/* Andrew J. Harris — books.  Cream on dusk, Playfair + EB Garamond, county-records furniture. */

:root{--serif:"EB Garamond",Georgia,"Times New Roman",serif;--display:"Playfair Display",Georgia,serif;--wrap:74rem;--pad:clamp(1.1rem,4vw,2.25rem);--r:3px;}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:4.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--serif);
  font-size:clamp(1.06rem,.99rem + .3vw,1.2rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--amber2);text-decoration-color:var(--amber-dim);text-underline-offset:.18em}
a:hover{text-decoration-color:var(--amber2)}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;margin:0;letter-spacing:-.005em}
p{margin:0 0 1em}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber2);outline-offset:3px;border-radius:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--amber);color:var(--on-accent);
  padding:.6rem 1rem;font-weight:600}
.skip:focus{left:.5rem;top:.5rem}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* ── top bar ───────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:40;background:rgb(var(--bg-rgb) / .94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:1rem;min-height:3.5rem;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:.55rem;text-decoration:none;margin-right:auto}
.brand-name{font-family:var(--display);font-weight:700;font-size:1.08rem;color:var(--paper)}
.brand-sub{font-size:.82rem;color:var(--paper3);font-variant:small-caps;letter-spacing:.04em}
.menu-btn{background:none;border:1px solid var(--line2);color:var(--paper2);
  padding:.42rem .8rem;border-radius:var(--r);font-size:.92rem;min-height:2.4rem}
.nav{display:none;width:100%;padding-bottom:.7rem;gap:.2rem;flex-direction:column}
.nav.is-open{display:flex}
.nav a{padding:.62rem .2rem;color:var(--paper2);text-decoration:none;border-bottom:1px solid var(--line)}
.nav a:last-child{border-bottom:0}
.nav a:hover,.nav a[aria-current]{color:var(--amber2)}
@media (min-width:820px){
  .menu-btn{display:none}
  .nav{display:flex!important;flex-direction:row;width:auto;padding:0;gap:1.5rem}
  .nav a{border:0;padding:.3rem 0}
}

/* ── hero ──────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;min-height:clamp(23rem,62vh,34rem);display:flex;
  align-items:flex-end;border-bottom:1px solid var(--line)}
.hero-img{position:absolute;inset:0;z-index:-2}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;filter:saturate(.72) contrast(1.02)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgb(var(--bg-rgb) / .55) 0%,rgb(var(--bg-rgb) / .72) 45%,rgb(var(--bg-rgb) / .97) 100%)}
.hero-inner{padding-block:clamp(2.5rem,9vw,4.5rem) clamp(2rem,6vw,3rem)}
.hero-kicker,.hero-name{max-width:22ch}
.hero-kicker{font-variant:small-caps;letter-spacing:.09em;color:var(--amber);margin:0 0 .5rem;
  font-size:1rem}
.hero-name{font-size:clamp(2.6rem,10.5vw,5.2rem);font-weight:900;margin:0 0 .7rem;
  color:var(--paper);text-shadow:none}
.hero-blurb{max-width:38rem;color:#E9E1D0;font-size:clamp(1.08rem,1rem + .5vw,1.32rem);margin-bottom:1.5rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem}
.anim .hero-kicker,.anim .hero-name,.anim .hero-blurb,.anim .hero-cta{
  opacity:0;transform:translateY(10px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
.anim .hero-name{animation-delay:.08s}
.anim .hero-blurb{animation-delay:.16s}
.anim .hero-cta{animation-delay:.24s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.anim .hero-kicker,.anim .hero-name,.anim .hero-blurb,
  .anim .hero-cta{opacity:1;transform:none;animation:none}}

/* ── buttons ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.9rem;
  padding:.62rem 1.25rem;border-radius:var(--r);text-decoration:none;font-weight:600;
  font-size:1.02rem;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--amber);color:var(--on-accent);border-color:var(--amber)}
.btn-primary:hover{background:var(--amber2)}
.btn-ghost{border-color:var(--line2);color:var(--paper)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber2)}
.share-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.btn-sm{min-height:2.35rem;padding:.4rem .95rem;font-size:.95rem;background:transparent;font-family:inherit}
.share-fb{border-color:var(--amber);color:var(--amber2)}
.linkish{background:none;border:0;padding:0;color:var(--amber2);cursor:pointer;
  text-decoration:underline;text-underline-offset:.18em;font-size:inherit}

/* ── rules & sections ──────────────────────────────────── */
.rule-double{height:4px;border-top:1px solid var(--amber-dim);border-bottom:1px solid var(--amber-dim)}
section{padding-block:clamp(2.6rem,7vw,4.6rem)}
.h1{font-size:clamp(2rem,6.5vw,3.1rem);margin-bottom:.5rem}
.h2{font-size:clamp(1.6rem,4.6vw,2.3rem);margin-bottom:.5rem}
.h3{font-size:clamp(1.22rem,3vw,1.5rem);margin-bottom:.5rem}
.lede{color:var(--paper2);max-width:44rem;font-size:1.06em}

/* ── stats ─────────────────────────────────────────────── */
.stats{padding-block:clamp(1.3rem,3vw,1.9rem);background:var(--ink2);border-bottom:1px solid var(--line)}
.stats-in{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem .6rem;text-align:center}
@media (min-width:600px){.stats-in{grid-template-columns:repeat(4,1fr)}}
.stats-in b{display:block;font-family:var(--display);font-size:clamp(1.5rem,5.5vw,2.1rem);
  color:var(--amber2);font-weight:700;line-height:1}
.stats-in span{font-size:.86rem;color:var(--paper3);font-variant:small-caps;letter-spacing:.06em}

/* ── featured release ──────────────────────────────────── */
.feature{background:var(--ink2);border-bottom:1px solid var(--line)}
.feat-in{display:grid;gap:1.6rem;align-items:start}
@media (min-width:760px){.feat-in{grid-template-columns:15rem 1fr;gap:2.6rem}}
.feat-cover img{width:100%;max-width:15rem;border:1px solid var(--line2);
  box-shadow:0 18px 44px rgb(var(--shade-rgb) / 0.14)}
.stamp{display:inline-block;font-variant:small-caps;letter-spacing:.08em;color:var(--amber);
  border:1px solid var(--amber-dim);padding:.18rem .6rem;margin:0 0 .8rem;font-size:.94rem}
.feat-title{font-size:clamp(1.9rem,6vw,3rem);margin-bottom:.4rem}
.feat-title a{color:var(--paper);text-decoration:none}
.feat-title a:hover{color:var(--amber2)}
.feat-hook{font-style:italic;color:var(--amber2);font-size:1.12em;margin-bottom:.8rem}
.feat-blurb{color:var(--paper2);max-width:40rem}
.feat-note{color:var(--paper3);font-size:.94rem;max-width:36rem}

/* ── picker ────────────────────────────────────────────── */
.pick-card{border:1px solid var(--line);background:var(--ink2);padding:clamp(1.1rem,4vw,2rem);
  border-left:3px solid var(--amber);margin-top:1.4rem}
.pick-q{margin-bottom:1.5rem}
.pick-q:last-child{margin-bottom:0}
.pick-q h3{font-size:1.16rem;margin-bottom:.75rem;font-family:var(--serif);font-weight:600;
  color:var(--paper)}
.pick-q h3 i{font-style:normal;color:var(--amber);margin-right:.5rem}
.opts{display:flex;flex-wrap:wrap;gap:.55rem}
.opt{background:transparent;border:1px solid var(--line2);color:var(--paper2);
  padding:.55rem .95rem;border-radius:var(--r);cursor:pointer;min-height:2.7rem}
.opt:hover{border-color:var(--amber);color:var(--paper)}
.opt[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--on-accent);font-weight:600}
.pick-result h3{font-family:var(--display);font-size:1.35rem;margin-bottom:1rem}
.pick-hits{display:grid;gap:1rem;margin-bottom:1.2rem}
@media (min-width:700px){.pick-hits{grid-template-columns:repeat(3,1fr)}}
.hit{display:grid;grid-template-columns:4.6rem 1fr;gap:.9rem;align-items:start;
  border:1px solid var(--line);padding:.8rem;background:var(--ink3);text-decoration:none}
.hit img{border:1px solid var(--line2)}
.hit b{font-family:var(--display);color:var(--paper);display:block;font-size:1.02rem;line-height:1.2}
.hit span{color:var(--paper3);font-size:.9rem;display:block;margin-top:.3rem}
.hit em{color:var(--amber2);font-style:normal;font-size:.86rem;display:block;margin-top:.35rem}

/* ── catalog tools ───────────────────────────────────── */
.books-head{margin-bottom:1.4rem}
.tools{display:grid;gap:.85rem;padding:1rem 0 1.6rem;border-bottom:1px solid var(--line);
  margin-bottom:2rem}
.search input,.contact input,.contact textarea,.contact select,.news-form input{
  width:100%;background:var(--ink2);border:1px solid var(--line2);color:var(--paper);
  padding:.72rem .85rem;border-radius:var(--r);font:inherit;min-height:2.9rem}
.search input::placeholder{color:var(--paper3)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{background:transparent;border:1px solid var(--line2);color:var(--paper2);
  padding:.4rem .8rem;border-radius:var(--r);cursor:pointer;font-size:.95rem;min-height:2.4rem}
.chip:hover{border-color:var(--amber);color:var(--paper)}
.chip.is-on{background:var(--amber);border-color:var(--amber);color:var(--on-accent);font-weight:600}
.ku-toggle{color:var(--paper2);font-size:.95rem;display:flex;align-items:center;gap:.5rem}
.ku-toggle input{width:1.05rem;height:1.05rem;accent-color:var(--amber)}
.count{margin:0;color:var(--paper3);font-variant:small-caps;letter-spacing:.05em}
@media (min-width:900px){
  .tools{grid-template-columns:minmax(14rem,20rem) 1fr;align-items:center}
  .chips{grid-column:2;justify-self:end}
  .ku-toggle{grid-column:1}
  .count{grid-column:2;justify-self:end}
}

/* ── record cards ──────────────────────────────────────── */
.grid{display:grid;gap:2.2rem}
.grp-items{display:grid;gap:1.1rem}
@media (min-width:780px){.grp-items{grid-template-columns:repeat(auto-fill,minmax(21rem,1fr))}}
.grp-series{border-left:2px solid var(--amber-dim);padding-left:clamp(.8rem,2.5vw,1.4rem)}
.grp-head{margin-bottom:1rem}
.grp-name{font-size:1.35rem}
.grp-name a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--amber-dim)}
.grp-name a:hover{color:var(--amber2)}
.grp-line{color:var(--paper3);margin:.3rem 0 0;max-width:46rem;font-size:.98rem}
.rec{display:grid;grid-template-columns:5.6rem 1fr;gap:1rem;background:var(--ink2);
  border:1px solid var(--line);border-left:3px solid var(--amber-dim);padding:1rem;align-items:start}
@media (min-width:520px){.rec{grid-template-columns:7.2rem 1fr;gap:1.2rem}}
.rec-cover img{border:1px solid var(--line2);width:100%}
.rec-body{min-width:0}
.tab{display:inline-block;font-variant:small-caps;letter-spacing:.07em;font-size:.88rem;
  color:var(--amber);text-decoration:none;margin-bottom:.35rem}
.tab i{font-style:normal;color:var(--paper3);margin-left:.4rem}
.tab-plain{color:var(--paper3)}
.rec-title{font-size:1.18rem;margin-bottom:.3rem;overflow-wrap:break-word}
.rec-title a{color:var(--paper);text-decoration:none}
.rec-title a:hover{color:var(--amber2)}
.rec-hook{color:var(--paper2);font-size:.99rem;margin-bottom:.6rem}
.ku{display:inline-block;font-size:.76rem;font-variant:small-caps;letter-spacing:.07em;
  color:var(--amber2);border:1px solid var(--amber-dim);padding:.1rem .45rem;margin-bottom:.6rem}
.rec-more{font-size:.92rem;display:inline-block;margin-top:.55rem}

/* buy chips */
.buys{display:flex;flex-wrap:wrap;gap:.4rem}
.buy{display:inline-flex;align-items:baseline;gap:.4rem;text-decoration:none;
  border:1px solid var(--line2);padding:.34rem .62rem;border-radius:var(--r);font-size:.9rem;
  color:var(--paper2);min-height:2.15rem}
.buy-f{font-variant:small-caps;letter-spacing:.05em}
.buy-p{color:var(--amber2);font-weight:600}
.buy:hover{border-color:var(--amber);color:var(--paper)}
.buy-kindle{background:var(--amber);border-color:var(--amber);color:var(--on-accent)}
.buy-kindle .buy-p{color:var(--on-accent)}
.buy-kindle:hover{background:var(--amber2);border-color:var(--amber2);color:var(--on-accent)}
.buy-soon{opacity:.62;cursor:default}
.buy-soon .buy-p{color:var(--paper3);font-weight:400;font-style:italic}
.buys-lg .buy{font-size:1rem;padding:.5rem .9rem;min-height:2.7rem}
.empty{color:var(--paper2);padding:2rem 0}
.allaz{margin-top:2rem}

/* ── series cards ──────────────────────────────────────── */
.ser-grid{display:grid;gap:1.1rem;margin-top:1.5rem}
@media (min-width:760px){.ser-grid{grid-template-columns:repeat(2,1fr)}}
.ser{border:1px solid var(--line);background:var(--ink2);padding:1.3rem;border-top:2px solid var(--amber-dim)}
.ser-name{font-size:1.3rem;margin-bottom:.3rem}
.ser-name a{color:var(--paper);text-decoration:none}
.ser-name a:hover{color:var(--amber2)}
.ser-line{color:var(--paper2);font-size:.99rem}
.ser-order{list-style:none;margin:.9rem 0;padding:0;display:grid;gap:.5rem;
  border-left:1px solid var(--line2);padding-left:.9rem}
.ser-order li{display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap}
.ord{font-variant:small-caps;letter-spacing:.06em;color:var(--amber);font-size:.85rem;
  min-width:5.2rem}
.ser-order a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--amber-dim)}
.ser-order a:hover{color:var(--amber2)}
.ser-order .is-here span:last-child{color:var(--paper3)}
.ser-note{color:var(--paper3);font-size:.92rem;margin:0}
.order-box{border:1px solid var(--line);background:var(--ink2);padding:1.2rem;margin-top:1.5rem}

/* ── newsletter ────────────────────────────────────────── */
.news{background:var(--ink2);border-block:1px solid var(--line)}
.news-inner{display:grid;gap:1.6rem}
@media (min-width:860px){.news-inner{grid-template-columns:1fr 1fr;gap:3rem;align-items:start}}
.news-copy p{color:var(--paper2);max-width:34rem}
.news-form{display:grid;gap:.9rem}
.field{display:grid;gap:.32rem}
.field>span{font-size:.92rem;color:var(--paper2);font-variant:small-caps;letter-spacing:.05em}
.field>span i{font-style:normal;color:var(--paper3);font-variant:normal;letter-spacing:0}
.checks{border:1px solid var(--line2);border-radius:var(--r);padding:.7rem .9rem;margin:0;display:grid;gap:.4rem}
.checks legend{font-size:.9rem;color:var(--paper3);font-variant:small-caps;letter-spacing:.06em;padding:0 .3rem}
.checks label{display:flex;align-items:center;gap:.55rem;color:var(--paper2);font-size:.97rem}
.checks input{width:1.05rem;height:1.05rem;accent-color:var(--amber)}
.fineprint{color:var(--paper3);font-size:.88rem;margin:0}
.hp{position:absolute;left:-9999px}
.news-compact{margin-top:1rem}

/* ── about / prose / faq ───────────────────────────────── */
.prose{max-width:44rem}
.prose p,.prose li{color:var(--paper2)}
.prose .h3{margin-top:1.8rem}
.center{text-align:center;margin-inline:auto}
.about-in p{max-width:44rem;color:var(--paper2)}
.plain{list-style:none;padding:0;display:grid;gap:.5rem}
.pull{border-left:2px solid var(--amber);margin:0 0 1em;padding:.4rem 0 .4rem 1rem;
  color:var(--paper);font-style:italic}
.faq-list{max-width:48rem;margin-top:1.2rem;border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line);padding:.2rem 0}
.faq summary{cursor:pointer;padding:.85rem 0;font-family:var(--display);font-size:1.06rem;
  color:var(--paper);list-style-position:outside}
.faq summary::marker{color:var(--amber)}
.faq p{color:var(--paper2);margin:0 0 .9rem;max-width:44rem}

/* ── book page ─────────────────────────────────────────── */
.crumbs{padding-top:1.4rem;font-size:.9rem;color:var(--paper3)}
.crumbs a{color:var(--paper2)}
.crumbs span{margin-inline:.2rem}
.bk-top{display:grid;gap:1.6rem;padding-top:1.6rem}
@media (min-width:800px){.bk-top{grid-template-columns:17rem 1fr;gap:3rem;align-items:start}}
.bk-cover img{width:100%;max-width:17rem;border:1px solid var(--line2);
  box-shadow:0 20px 50px rgb(var(--shade-rgb) / 0.154)}
.bk-title{font-size:clamp(2rem,6.4vw,3.2rem);margin-bottom:.4rem}
.bk-hook{font-style:italic;color:var(--amber2);font-size:1.15em;margin-bottom:1.1rem}
.bk-blurb{max-width:42rem}
.bk-blurb p{color:var(--paper2)}
.ku-line{color:var(--paper2);font-size:.95rem}
.fmt{border-collapse:collapse;margin:1.4rem 0;width:100%;max-width:30rem;font-size:.97rem}
.fmt th,.fmt td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--line)}
.fmt th{font-weight:600;font-variant:small-caps;letter-spacing:.05em;color:var(--paper2)}
.fmt .muted{color:var(--paper3);font-style:italic}
.bk-actions{margin-top:.6rem}
.bk-series{border-top:1px solid var(--line);padding-top:2rem;margin-top:2.4rem}
.bk-rel{padding-top:2.4rem}
.rel-grid{display:grid;gap:1rem;margin-top:1.1rem}
@media (min-width:640px){.rel-grid{grid-template-columns:repeat(3,1fr)}}
.rel{display:grid;grid-template-columns:4.4rem 1fr;gap:.85rem;text-decoration:none;
  border:1px solid var(--line);background:var(--ink2);padding:.85rem;align-items:start}
.rel:hover{border-color:var(--amber-dim)}
.rel img{border:1px solid var(--line2)}
.rel-t{font-family:var(--display);color:var(--paper);font-size:1rem;line-height:1.2;display:block}
.rel-h{color:var(--paper3);font-size:.88rem;display:block;margin-top:.3rem}
.page-head{padding-top:1.4rem}

/* ── A–Z list ──────────────────────────────────────────── */
.search-wide{display:block;max-width:26rem;margin:1.2rem 0 .6rem}
.az-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.az{padding:1rem 0;border-bottom:1px solid var(--line);display:grid;gap:.25rem}
.az-t{font-family:var(--display);font-size:1.14rem;color:var(--paper);text-decoration:none}
.az-t:hover{color:var(--amber2)}
.az-k{font-variant:small-caps;letter-spacing:.06em;color:var(--amber);font-size:.85rem}
.az-h{color:var(--paper2);font-size:.98rem}
.az-f{font-size:.9rem;color:var(--paper3);display:flex;gap:.9rem;flex-wrap:wrap;margin-top:.25rem}

/* ── contact ───────────────────────────────────────────── */
.contact{display:grid;gap:.95rem;max-width:36rem;border:1px solid var(--line);
  background:var(--ink2);padding:clamp(1.1rem,4vw,1.8rem)}
.contact textarea{resize:vertical;min-height:8rem}

/* ── footer ────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);background:var(--ink2);padding-block:2.6rem 1.4rem;margin-top:0}
.foot-grid{display:grid;gap:1.8rem}
@media (min-width:760px){.foot-grid{grid-template-columns:2fr 1fr 1fr;gap:2.5rem}}
.foot-name{font-family:var(--display);font-size:1.2rem;margin:0 0 .3rem}
.foot-line{color:var(--paper3);max-width:26rem;font-size:.96rem}
.foot-h{font-variant:small-caps;letter-spacing:.07em;color:var(--amber);margin:0 0 .5rem;font-size:.95rem}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;font-size:.97rem}
.foot-list a{color:var(--paper2);text-decoration:none}
.foot-list a:hover{color:var(--amber2)}
.foot-base{border-top:1px solid var(--line);margin-top:2rem;padding-top:1.1rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot-base p{color:var(--paper3);font-size:.85rem;margin:0}
.ext{color:var(--amber2)}

/* ══════════════════════════════════════════════════════════════════════════
   THE STREET
   The brick main street is no longer a strip at the top of the home page --
   it is fixed behind the whole site, on every page, and the books and the
   words scroll over it.  Every brown in the old palette is re-cut in brick
   red so the page furniture belongs to the photograph.

   Layer order (all below the content):
     html::before  -3  the street, fixed to the viewport
     html::after   -2  a fixed wash: vignette + a floor of darkness
     body::before  -1  a document-height scrim: open at the top of the page,
                       deepening as you scroll so text always has ground
   ══════════════════════════════════════════════════════════════════════════ */

:root{--glass:blur(9px) saturate(.92);}

html{background:var(--ink);}

/* ── the street ─────────────────────────────────────────────────────────── */
html::before{
  content:"";position:fixed;inset:0;z-index:-3;
  background-image:none;
  background-size:cover;background-position:50% 20%;background-repeat:no-repeat;
}
@media (min-aspect-ratio:1/1){
  html::before{background-image:none;background-position:50% 32%}
}

/* ── fixed wash: corners hold, the middle of the street stays open ──────── */
html::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(135% 95% at 55% 26%,
      rgb(var(--bg-rgb) / 0) 0%, rgb(var(--bg-rgb) / .28) 58%, rgb(var(--bg-rgb) / .64) 100%),
    linear-gradient(180deg,
      rgb(var(--bg-rgb) / .32) 0%, rgb(var(--bg-rgb) / .06) 26%, rgb(var(--bg-rgb) / .28) 100%);
}

/* ── document scrim: light at the top of the page, deep once you are in ── */
body{background:transparent;position:relative;min-height:100vh}
body::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgb(var(--bg-rgb) / 0)    0,
    rgb(var(--bg-rgb) / .06)  30vh,
    rgb(var(--bg-rgb) / .40)  68vh,
    rgb(var(--bg-rgb) / .66) 108vh,
    rgb(var(--bg-rgb) / .72) 100%);
}
/* interior pages open straight into text, so they start deeper */
body.deep::before{
  background:linear-gradient(180deg,
    rgb(var(--bg-rgb) / .28)  0,
    rgb(var(--bg-rgb) / .52) 38vh,
    rgb(var(--bg-rgb) / .70) 95vh,
    rgb(var(--bg-rgb) / .74) 100%);
}

/* ── header ─────────────────────────────────────────────────────────────── */
.topbar{
  background:linear-gradient(180deg,rgb(var(--bg-rgb) / .92),rgb(var(--bg-rgb) / .74));
  
  border-bottom:1px solid var(--line);
}

/* ── hero: no second copy of the photograph, the fixed one shows through ── */
.hero{min-height:clamp(25rem,76vh,42rem);border-bottom:0}
.hero-img{display:none}
.hero::after{
  background:linear-gradient(180deg,
    rgb(var(--bg-rgb) / .14) 0%, rgb(var(--bg-rgb) / 0) 20%,
    rgb(var(--bg-rgb) / .50) 52%, rgb(var(--bg-rgb) / .82) 100%);
}
@media (min-width:760px){
  /* keep the far end of the street open; darken only the side the words are on */
  .hero::after{
    background:
      linear-gradient(90deg, rgb(var(--bg-rgb) / .66) 0%, rgb(var(--bg-rgb) / .30) 40%, rgb(var(--bg-rgb) / 0) 66%),
      linear-gradient(180deg, rgb(var(--bg-rgb) / .16) 0%, rgb(var(--bg-rgb) / 0) 24%,
        rgb(var(--bg-rgb) / .34) 66%, rgb(var(--bg-rgb) / .78) 100%);
  }
}
/* the kicker was breaking into four stacked lines against the 22ch cap */
.hero-kicker{max-width:46ch;color:var(--amber2);text-shadow:none}
@media (max-width:520px){.hero-kicker{font-size:.9rem;letter-spacing:.11em}}
.hero-name{text-shadow:none}
.hero-blurb{text-shadow:none}

/* ── the big bands become glass over the street ─────────────────────────── */
.stats,.feature,.news,.foot,.x-rail{
  
}
.stats{border-top:1px solid var(--line)}
.feature{border-top:1px solid var(--line)}

/* ── cards: dark brick glass, no blur (26 of them on one page) ──────────── */
.rec,.ser,.hit,.rel,.pick-card,.contact,.order-box,.x-door,.x-post,
.x-ku-side,.x-peek-body,.x-drawer-foot{
  box-shadow:0 14px 34px -20px rgb(var(--shade-rgb) / 0.238);
}
.rec{border-left-color:var(--brick2)}
.grp-series{border-left-color:rgb(var(--edge-rgb) / .42)}
.x-ku-in{}

/* covers and portraits get a brick edge rather than a brown one */
.rec-cover img,.hit img,.rel img,.feat-cover img,.bk-cover img{
  border-color:rgb(var(--edge-rgb) / .6);
}

/* ── floating furniture ─────────────────────────────────────────────────── */
.x-bar{background:rgb(var(--bg-rgb) / .90);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.x-save{background:rgb(var(--bg-rgb) / .84)}
.x-tools select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2355645B' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .5rem center;background-size:.7rem}
.x-drawer{background:rgb(var(--bg-rgb) / .95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.x-drawer-veil{background:rgb(var(--bg-rgb) / .74)}

/* form fields need to stay obviously fillable */
.search input,.contact input,.contact textarea,.contact select,.news-form input{
  background:rgb(var(--bg-rgb) / .82);
}
.search input:focus,.contact input:focus,.contact textarea:focus,.news-form input:focus{
  background:rgb(var(--bg-rgb) / .94);border-color:var(--amber)
}

/* ── selection, scrollbars, form accents ────────────────────────────────── */
::selection{background:rgb(var(--edge-rgb) / .42);color:var(--on-accent)}
.x-rail-scroll::-webkit-scrollbar-thumb{background:rgb(var(--edge-rgb) / .6)}

/* ── if the browser cannot blur, lean on opacity instead ────────────────── */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  :root{}
  .topbar{background:rgb(var(--bg-rgb) / .96)}
  .x-bar{background:rgb(var(--bg-rgb) / .96)}
}

/* ── very small screens: the street needs less of the scrim to read ─────── */
@media (max-width:420px){
  .hero{min-height:clamp(23rem,68vh,34rem)}
}

/* ── words sitting straight on the street get their own footing ─────────── */
.h1,.h2,.lede,.grp-name,.grp-line,.count,.x-rail-head h2,.x-rail-head p,
.x-doors .lede,.picker .lede,.books-head p,.az-t,.az-h,.az-k,.bk-title,.bk-hook,
.crumbs,.page-head p,.prose p,.prose li,.about-in p,.pull{
  text-shadow:none;
}
.feat-title,.feat-hook,.feat-blurb,.hero-name{text-shadow:none}

/* ── trailers ─────────────────────────────────────────── */
.bk-trailer{padding-top:2.2rem}
.trailer{display:grid;gap:1.2rem;align-items:start;margin-top:1rem}
@media (min-width:760px){.trailer{grid-template-columns:minmax(0,28rem) 1fr;gap:2.4rem}
  .trailer-portrait{grid-template-columns:17rem 1fr}}
.trailer-v{display:block;width:100%;height:auto;max-width:100%;background:#000;border:1px solid var(--line2);
  border-radius:var(--r);box-shadow:0 18px 44px rgb(var(--shade-rgb) / 0.14)}
.trailer-portrait .trailer-v{max-width:17rem}
.trailer-frame{position:relative;display:inline-block;max-width:100%;vertical-align:top}
.trailer-portrait .trailer-frame{max-width:17rem}
.trailer-frame .trailer-v{max-width:100%}
.trailer-sound{position:absolute;left:.7rem;bottom:.7rem;z-index:2;display:inline-flex;align-items:center;gap:.4rem;
  padding:.42rem .8rem;border:1px solid rgb(var(--fg-rgb) / .55);border-radius:999px;background:rgb(var(--shade-rgb) / 0.154);
  color:#fff;font:600 .82rem/1 system-ui,sans-serif;letter-spacing:.02em;cursor:pointer;backdrop-filter:blur(3px)}
.trailer-sound::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:#e8b04a;box-shadow:0 0 0 0 rgb(var(--accent-rgb) / .7);animation:trailer-pulse 1.6s ease-out infinite}
@keyframes trailer-pulse{to{box-shadow:0 0 0 .55rem rgb(var(--accent-rgb) / 0)}}
.trailer-frame.is-sound .trailer-sound{display:none}
.trailer-lede{font-size:1.15rem;margin:0 0 .8rem}
.trailer-buttons{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .8rem}
.trailer-note{color:var(--paper2);font-size:.98rem;margin:0}
.feat-cover .feat-video{display:block;width:100%;height:auto;max-width:15rem;aspect-ratio:313/500;object-fit:cover;
  background:#000;border:1px solid rgb(var(--edge-rgb) / .6);box-shadow:0 18px 44px rgb(var(--shade-rgb) / 0.14)}


/* ── author portrait ───────────────────────────────────── */
.author-block{display:grid;gap:1.5rem;align-items:start;margin-top:1.3rem}
@media (min-width:760px){.author-block{grid-template-columns:minmax(0,19rem) minmax(0,1fr);gap:2.6rem}}
.author-photo{margin:0}
.author-photo img{width:100%;max-width:19rem;border:1px solid var(--line2);border-radius:var(--r);
  box-shadow:0 18px 44px rgb(var(--shade-rgb) / 0.14)}
.author-photo figcaption{margin:.6rem 0 0;max-width:19rem;font-size:.86rem;line-height:1.45;
  color:var(--paper3);font-variant:small-caps;letter-spacing:.03em;
  text-shadow:none}
.author-bio{max-width:44rem}
.author-bio>*:first-child{margin-top:0}

.about-in{display:grid;gap:1.3rem;align-items:start}
@media (min-width:700px){.about-in{grid-template-columns:11.5rem minmax(0,1fr);gap:2.2rem}}
.author-mug{margin:0}
.author-mug img{width:9.5rem;height:9.5rem;object-fit:cover;object-position:50% 22%;
  border:1px solid var(--line2);border-radius:var(--r);box-shadow:0 12px 30px rgb(var(--shade-rgb) / 0.126)}
@media (min-width:700px){.author-mug img{width:11.5rem;height:11.5rem}}

.bk-author{padding-top:2.2rem}
.author-card{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:1.1rem;align-items:start;
  margin-top:1rem}
@media (min-width:560px){.author-card{grid-template-columns:7rem minmax(0,1fr);gap:1.5rem}}
.author-card img{width:100%;height:auto;border:1px solid var(--line2);border-radius:var(--r);
  box-shadow:0 10px 26px rgb(var(--shade-rgb) / 0.126)}
.author-card p{margin:0 0 .55rem;color:var(--paper2);max-width:44rem;
  text-shadow:none}
.author-card p:last-child{margin-bottom:0}
.author-card .author-name{font-family:var(--display);font-size:1.08rem;color:var(--paper);
  margin-bottom:.3rem}

/* price notice */
.price-strip{background:rgb(var(--bg-rgb) / .94);border-block:1px solid var(--amber-dim);color:var(--paper);text-align:center;padding:.7rem var(--pad);font-size:.98rem;line-height:1.45}
.price-strip b{color:var(--amber);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;margin-right:.6rem;white-space:nowrap}
.price-strip a{color:var(--amber);text-decoration:underline;text-underline-offset:3px;margin-left:.5rem;white-space:nowrap}
.price-strip a:hover,.price-strip a:focus-visible{color:var(--paper)}
.lower-note{display:inline-block;margin:0 0 .6rem;padding:.2rem .6rem;border:1px solid var(--amber);border-radius:var(--r);color:var(--amber);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:520px){.price-strip b{display:block;margin:0 0 .15rem}.price-strip a{display:inline-block;margin-left:.35rem}}


/* ══════════════════════════════════════════════════════════════════════════
   DAYLIGHT
   The porch in daylight: whitewashed clapboard, a haint-blue ceiling,
   magnolia-leaf ink, and brick for the one thing you are meant to press.
   Fraunces for anything that speaks; Libre Franklin for anything that informs.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;
  /* raw channels, for anything that needs its own alpha */
  --bg-rgb:245 243 236;      /* clapboard */
  --fg-rgb:22 35 29;         /* magnolia ink */
  --accent-rgb:142 47 34;    /* brick */
  --edge-rgb:120 134 124;    /* weathered rail */
  --shade-rgb:30 44 36;      /* shadows carry a little green, like shade under a tree */

  /* the old names, re-cut (the rest of the stylesheet still speaks them) */
  --ink:#F5F3EC;             /* page */
  --ink2:#FFFFFF;            /* cards */
  --ink3:#EDF2EE;            /* quiet panels */
  --line:#DADFD5;
  --line2:#B7C2B7;
  --paper:#16231D;           /* text */
  --paper2:#3A4A41;
  --paper3:#5C6A61;
  --amber:#8E2F22;           /* fills you press */
  --amber2:#7B2619;          /* words that link */
  --amber-dim:rgb(142 47 34 / .3);
  --on-accent:#FFFAF1;
  --brick:#8E2F22; --brick2:#B5503C;

  /* new */
  --haint:#CFE3DF; --haint2:#A9CCC6; --haint3:#E4EFEC;
  --kudzu:#2F4A3A; --kudzu2:#1F3328;
  --brass:#A9853F; --brass2:#8A6A2A;
  --rose:#B8747A; --sky:#3F78A6;

  --display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --serif:"Libre Franklin","Franklin Gothic Medium","Helvetica Neue",Arial,sans-serif;
  --r:6px;
  --lift:0 1px 0 rgb(var(--shade-rgb) / .05),0 10px 26px -14px rgb(var(--shade-rgb) / .28);
  --lift2:0 2px 0 rgb(var(--shade-rgb) / .06),0 22px 44px -22px rgb(var(--shade-rgb) / .38);

  --s-pane:#FFFFFF; --s-edge:#B7C2B7; --s-soft:rgb(var(--fg-rgb) / .05);
  --s-shadow:0 26px 60px -28px rgb(var(--shade-rgb) / .45);
  --x-glow:rgb(var(--accent-rgb) / .08); --x-shadow:0 18px 44px -22px rgb(var(--shade-rgb) / .4);
}

/* ── ground ─────────────────────────────────────────────────────────────── */
html{background:var(--ink)}
html::before,html::after,body::before{content:none!important;display:none!important}
body{background:var(--ink);color:var(--paper);font-family:var(--serif);
  font-size:clamp(1rem,.965rem + .18vw,1.09rem);line-height:1.6;font-optical-sizing:auto}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.012em;
  font-variation-settings:"SOFT" 40,"WONK" 0;color:var(--paper)}
a{color:var(--amber2);text-decoration-color:rgb(var(--accent-rgb) / .35)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--kudzu);outline-offset:3px}
::selection{background:var(--haint2);color:var(--paper)}

/* small caps are retired: Franklin has none, and plain words read better */
.brand-sub,.hero-kicker,.stats-in span,.stamp,.count,.tab,.ku,.buy-f,.ord,.field>span,.checks legend,
.fmt th,.az-k,.foot-h,.author-photo figcaption{font-variant:normal;letter-spacing:0}

/* ── top bar ────────────────────────────────────────────────────────────── */
.topbar{background:rgb(var(--bg-rgb) / .93);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid var(--line)}
.brand-name{font-family:var(--display);font-weight:650;font-size:1.16rem;letter-spacing:-.01em;color:var(--paper);
  font-variation-settings:"SOFT" 60,"WONK" 1}
.brand-sub{display:none}
.menu-btn{border-radius:999px;border-color:var(--line2);color:var(--paper);padding-inline:1rem;background:var(--ink2)}
.nav a{color:var(--paper2);font-weight:500;font-size:.97rem}
.nav a:hover,.nav a[aria-current]{color:var(--amber2)}
@media (max-width:819px){.nav{background:var(--ink2);border-radius:12px;box-shadow:var(--lift2);padding:.4rem 1rem;margin-bottom:.6rem}}

/* ── the price notice: one dark band, the only one above the fold ───────── */
.price-strip{background:var(--kudzu2);border:0;color:#EEF3EE;padding:.62rem var(--pad);font-size:.95rem}
.price-strip b{color:#E9CF94;letter-spacing:0;text-transform:none;font-size:.95rem;font-family:var(--display);font-style:italic;font-weight:600;margin-right:.5rem}
.price-strip a{color:#fff;text-decoration-color:rgb(255 255 255 / .5)}
.price-strip a:hover,.price-strip a:focus-visible{color:#E9CF94}

/* ── hero: the plat and the porch ───────────────────────────────────────── */
.hero{position:relative;isolation:isolate;display:block;min-height:0;overflow:hidden;border:0;padding-block:0;
  background:linear-gradient(180deg,var(--haint) 0%,var(--haint3) 58%,var(--ink) 100%)}
.hero::after{content:none}
.hero-art{position:absolute;inset:0;z-index:-1;background:url("/art/plat-tall.svg") center top/cover no-repeat;opacity:.95}
.hero-inner{display:grid;gap:clamp(1.6rem,5vw,3rem);padding-block:clamp(2.2rem,7vw,4.5rem) clamp(2.2rem,6vw,3.6rem)}
.hero-name{font-size:1.02rem;font-weight:650;letter-spacing:0;margin:0;display:inline;color:var(--paper);max-width:none;
  font-variation-settings:"SOFT" 60,"WONK" 1}
.hero-kicker{display:inline;margin:0 0 0 .55rem;padding-left:.65rem;border-left:1px solid rgb(var(--fg-rgb) / .3);
  font-size:.92rem;color:var(--paper2);max-width:none;letter-spacing:0}
.hero-line{font-family:var(--display);font-weight:560;font-size:clamp(3rem,13.2vw,6.6rem);line-height:.92;letter-spacing:-.035em;
  margin:clamp(1rem,3vw,1.6rem) 0 clamp(1rem,2.6vw,1.5rem);color:var(--paper);max-width:9.5ch;text-wrap:balance;
  font-variation-settings:"SOFT" 100,"WONK" 1;font-optical-sizing:auto}
.hero-blurb{color:var(--paper2);font-size:clamp(1.04rem,.98rem + .42vw,1.24rem);line-height:1.5;max-width:33rem;margin-bottom:1.6rem}
.hero-fan{display:flex;justify-content:center;align-items:flex-end;padding:1.2rem 0 .6rem;min-width:0}
.fan-c{flex:0 0 auto;width:clamp(4.9rem,22vw,10.4rem);margin-inline:clamp(-1.9rem,-4.2vw,-1rem);border-radius:4px;overflow:hidden;
  transform:rotate(var(--rot)) translateY(var(--dy));transform-origin:50% 120%;box-shadow:0 1px 0 rgb(255 255 255 / .5) inset,0 18px 30px -14px rgb(var(--shade-rgb) / .55);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s;position:relative;z-index:var(--z)}
.fan-c img{width:100%;height:auto;aspect-ratio:313/500;object-fit:cover}
.fan-1{--rot:-13deg;--dy:.9rem;--z:1}.fan-2{--rot:-6.5deg;--dy:.25rem;--z:2}.fan-3{--rot:0deg;--dy:0rem;--z:3}
.fan-4{--rot:6.5deg;--dy:.25rem;--z:2}.fan-5{--rot:13deg;--dy:.9rem;--z:1}
.fan-c:hover,.fan-c:focus-visible{transform:rotate(calc(var(--rot) * .45)) translateY(calc(var(--dy) - .9rem));z-index:6;
  box-shadow:0 26px 40px -16px rgb(var(--shade-rgb) / .6)}
@media (min-width:760px){
  .hero-art{background-image:url("/art/plat-wide.svg");background-position:center}
  .hero-inner{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center;min-height:clamp(30rem,74vh,40rem)}
  .hero-fan{padding:0}
  .fan-c{width:clamp(6.6rem,12.6vw,11.4rem);margin-inline:clamp(-2.4rem,-2.6vw,-1.3rem)}
}
/* one moment on load: the hand of covers is dealt */
@media (prefers-reduced-motion:no-preference){
  .fan-c{animation:deal .9s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--z) * 70ms + 120ms)}
  @keyframes deal{from{opacity:0;transform:rotate(0deg) translateY(2.4rem)}}
}
.anim .hero-line{opacity:0;transform:translateY(10px);animation:rise .7s cubic-bezier(.2,.7,.3,1) .06s forwards}
@media (prefers-reduced-motion:reduce){.anim .hero-line{opacity:1;transform:none;animation:none}}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{border-radius:10px;font-weight:650;font-size:1rem;letter-spacing:0;min-height:3rem;padding:.62rem 1.3rem}
.btn-primary{background:var(--amber);border-color:var(--amber);color:var(--on-accent);box-shadow:0 10px 20px -12px rgb(var(--accent-rgb) / .8)}
.btn-primary:hover{background:var(--amber2);border-color:var(--amber2)}
.btn-ghost{background:rgb(255 255 255 / .7);border-color:rgb(var(--fg-rgb) / .28);color:var(--paper)}
.btn-ghost:hover{background:#fff;border-color:var(--paper);color:var(--paper)}
.btn-sm{border-radius:999px;background:var(--ink2);border-color:var(--line2);color:var(--paper)}
.btn-sm:hover{border-color:var(--paper)}
.share-fb{border-color:var(--line2);color:var(--paper)}
.linkish{color:var(--amber2)}

/* ── doors ──────────────────────────────────────────────────────────────── */
.doors{padding-block:clamp(2rem,5vw,3.4rem) clamp(1.6rem,4vw,2.6rem)}
.doors h2{font-size:clamp(1.55rem,4.6vw,2.3rem);margin-bottom:clamp(1rem,3vw,1.5rem);font-variation-settings:"SOFT" 100,"WONK" 1}
.door-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
@media (min-width:760px){.door-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}}
@media (min-width:1100px){.door-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.door{--g:var(--kudzu);--t:#E3ECE5;display:flex;flex-direction:column;gap:.3rem;padding:.9rem .9rem 1rem;border-radius:14px;
  background:var(--t);color:var(--paper);text-decoration:none;border-bottom:3px solid var(--g);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s}
.door:hover{transform:translateY(-3px);box-shadow:var(--lift2)}
.door-covers{display:flex;justify-content:center;padding:.3rem 0 .7rem}
.door-covers img{width:31%;max-width:4.6rem;height:auto;aspect-ratio:313/500;object-fit:cover;border-radius:2px;
  box-shadow:0 8px 14px -8px rgb(var(--shade-rgb) / .6)}
.door-covers img:nth-child(1){transform:rotate(-7deg) translate(18%,6%)}
.door-covers img:nth-child(2){position:relative;z-index:1;transform:translateY(-4%)}
.door-covers img:nth-child(3){transform:rotate(7deg) translate(-18%,6%)}
.door-name{font-family:var(--display);font-weight:620;font-size:1.12rem;line-height:1.15;font-variation-settings:"SOFT" 80,"WONK" 1}
.door-say{font-size:.86rem;line-height:1.38;color:var(--paper2)}
.door-crime{--g:#8E2F22;--t:#F2E2DC}.door-thriller{--g:#2F4A3A;--t:#DFE9E1}.door-strange{--g:#5A4E7C;--t:#E6E3EE}
.door-love{--g:#A65B62;--t:#F4E3E3}.door-sff{--g:#3F78A6;--t:#DCE9F2}.door-nonfiction{--g:#8A6A2A;--t:#F0E8D4}
.door-foot{margin:1.1rem 0 0;color:var(--paper2);font-size:.97rem}

/* ── sections and headings ──────────────────────────────────────────────── */
.rule-double{height:0;border:0;border-top:1px solid var(--line)}
.h1{font-size:clamp(2.1rem,6.8vw,3.4rem);letter-spacing:-.025em;font-variation-settings:"SOFT" 100,"WONK" 1}
.h2{font-size:clamp(1.6rem,4.8vw,2.4rem);letter-spacing:-.02em;font-variation-settings:"SOFT" 100,"WONK" 1}
.lede{color:var(--paper2)}

/* ── the new release ────────────────────────────────────────────────────── */
.feature{background:var(--ink2);border-block:1px solid var(--line)}
.feat-cover img,.feat-cover .feat-video{border:0;border-radius:4px;box-shadow:var(--lift2)}
.stamp{border:0;background:var(--amber);color:var(--on-accent);border-radius:999px;padding:.2rem .75rem;font-size:.8rem;font-weight:650}
.feat-title{font-size:clamp(1.9rem,6.2vw,3.1rem);letter-spacing:-.02em}
.feat-hook,.bk-hook{font-family:var(--display);font-style:italic;font-weight:420;color:var(--paper);font-size:1.22em;line-height:1.3;
  font-variation-settings:"SOFT" 100,"WONK" 1}
.lower-note{border:0;background:#F0E8D4;color:var(--brass2);border-radius:999px;letter-spacing:0;text-transform:none;font-size:.8rem;font-weight:650;padding:.2rem .7rem}

/* ── chips, pickers, filters ────────────────────────────────────────────── */
.chip,.opt{border-radius:999px;background:var(--ink2);border-color:var(--line2);color:var(--paper);font-size:.92rem;font-weight:500}
.chip:hover,.opt:hover{border-color:var(--paper);color:var(--paper)}
.chip.is-on,.opt[aria-pressed="true"]{background:var(--kudzu);border-color:var(--kudzu);color:#F5F3EC;font-weight:600}
.ku-toggle input,.checks input{accent-color:var(--kudzu)}
.pick-card{border:0;border-radius:16px;background:var(--ink2);box-shadow:var(--lift);border-top:4px solid var(--haint2)}
.pick-q h3{font-family:var(--serif);font-weight:650}
.pick-q h3 i{color:var(--kudzu)}
.hit{border:0;border-radius:12px;background:var(--ink3)}
.hit img,.rel img{border:0;border-radius:2px;box-shadow:0 6px 12px -7px rgb(var(--shade-rgb) / .6)}
.hit em{color:var(--paper2)}
.search input,.contact input,.contact textarea,.contact select,.news-form input{background:#fff;border-color:var(--line2);border-radius:10px;color:var(--paper)}
.search input:focus,.contact input:focus,.contact textarea:focus,.news-form input:focus{background:#fff;border-color:var(--kudzu)}
.count{color:var(--paper3);font-size:.9rem}
.tools{border-bottom:0;padding-bottom:1rem;margin-bottom:1.2rem}

/* ── book cards ─────────────────────────────────────────────────────────── */
.grid{gap:1.6rem}
.grp-items{gap:.9rem}
.grp-series{border:0;border-radius:18px;background:var(--haint3);padding:clamp(.9rem,2.6vw,1.5rem)}
.grp-name a{border-bottom:0;text-decoration:underline;text-decoration-color:var(--haint2);text-decoration-thickness:2px;text-underline-offset:.2em}
.grp-line{color:var(--paper2)}
.rec{border:0;border-radius:14px;background:var(--ink2);box-shadow:var(--lift);padding:.9rem;grid-template-columns:5.4rem 1fr;gap:.9rem}
@media (min-width:520px){.rec{grid-template-columns:6.8rem 1fr;gap:1.1rem;padding:1rem}}
.rec-cover img,.bk-cover img,.x-rail img{border:0;border-radius:3px;box-shadow:0 10px 18px -10px rgb(var(--shade-rgb) / .65)}
.tab{font-size:.76rem;font-weight:600;color:var(--kudzu);margin-bottom:.2rem}
.tab i{color:var(--paper3);font-weight:500}
.tab-plain{color:var(--paper3)}
.rec-title{font-size:1.12rem;line-height:1.16;letter-spacing:-.01em}
.rec-hook{font-size:.93rem;line-height:1.42;color:var(--paper2);margin-bottom:.55rem}
.ku{border:0;background:var(--haint);color:var(--kudzu2);border-radius:999px;font-size:.72rem;font-weight:650;padding:.14rem .55rem}
.rec-more{font-size:.88rem}

/* buy chips: format over price, three across */
.buys{gap:.38rem}
.buy{flex-direction:column;align-items:flex-start;gap:0;border-radius:9px;padding:.3rem .62rem .36rem;min-height:0;line-height:1.15;
  background:var(--ink2);border-color:var(--line2);color:var(--paper)}
.buy-f{font-size:.68rem;font-weight:500;color:var(--paper3)}
.buy-p{color:var(--paper);font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums}
.buy:hover{border-color:var(--paper)}
.buy-kindle{background:var(--amber);border-color:var(--amber);color:var(--on-accent)}
.buy-kindle .buy-f{color:rgb(255 250 241 / .82)}
.buy-kindle .buy-p{color:var(--on-accent)}
.buy-kindle:hover{background:var(--amber2);border-color:var(--amber2)}
.buys-lg{gap:.5rem}
.buys-lg .buy{padding:.5rem 1rem .58rem;min-height:0;border-radius:11px;min-width:6.2rem}
.buys-lg .buy-f{font-size:.76rem}.buys-lg .buy-p{font-size:1.18rem}

/* ── series ─────────────────────────────────────────────────────────────── */
.ser{border:0;border-radius:16px;background:var(--ink2);box-shadow:var(--lift);border-top:4px solid var(--haint2)}
.ser-order{border-left-color:var(--haint2)}
.ord{color:var(--kudzu);font-size:.8rem;font-weight:600}
.ser-order a,.ser-name a{border-bottom:0}
.ser-order a{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:.2em}
.order-box{border:0;border-radius:16px;background:var(--ink3)}

/* ── the newsletter: the one green room ─────────────────────────────────── */
.news{background:var(--kudzu2);border:0;
  --paper:#F5F3EC;--paper2:#D5DFD7;--paper3:#A9B9AE;--line2:rgb(255 255 255 / .28);--line:rgb(255 255 255 / .16);--amber2:#F0D9A3;--amber:#E9CF94}
.news h2,.news .h2{color:#F5F3EC}
.news-form input{background:#fff;color:#16231D;border-color:transparent}
.news .btn-primary{background:#F5F3EC;border-color:#F5F3EC;color:var(--kudzu2);box-shadow:none}
.news .btn-primary:hover{background:#fff}
.news .checks input{accent-color:#E9CF94}
.news a{color:#F0D9A3}
.field>span{font-size:.86rem;font-weight:600;color:var(--paper2)}
.checks{border-radius:12px}
.checks legend{font-size:.84rem;color:var(--paper3)}

/* ── about, prose, questions ────────────────────────────────────────────── */
.about-street{grid-column:1/-1;margin:0 0 .4rem}
.about-street img{width:100%;height:clamp(9rem,26vw,17rem);object-fit:cover;object-position:50% 42%;border-radius:16px;box-shadow:var(--lift)}
.author-mug img,.author-photo img,.author-card img{border:0;border-radius:12px;box-shadow:var(--lift)}
.author-photo figcaption{color:var(--paper3)}
.pull{border-left:3px solid var(--haint2);font-family:var(--display);font-style:italic;font-size:1.12em;color:var(--paper)}
.faq summary{font-family:var(--serif);font-weight:600;font-size:1.02rem}
.faq summary::marker{color:var(--kudzu)}

/* ── book page ──────────────────────────────────────────────────────────── */
.bk-title{letter-spacing:-.025em;font-variation-settings:"SOFT" 100,"WONK" 1}
.fmt th{font-weight:600;color:var(--paper2)}
.rel{border:0;border-radius:12px;background:var(--ink2);box-shadow:var(--lift)}
.rel:hover{box-shadow:var(--lift2)}
.trailer-v,.feat-cover .feat-video{background:#101613;border:0;border-radius:10px;box-shadow:var(--lift2)}
.trailer-sound{background:rgb(16 22 19 / .72);border-color:rgb(255 255 255 / .5);color:#fff}
.trailer-sound::before{background:#E9CF94;box-shadow:0 0 0 0 rgb(233 207 148 / .7)}
@keyframes trailer-pulse{to{box-shadow:0 0 0 .55rem rgb(233 207 148 / 0)}}
.az-k{color:var(--kudzu);font-size:.8rem;font-weight:600}
.contact{border:0;border-radius:16px;background:var(--ink2);box-shadow:var(--lift)}

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot{background:var(--kudzu2);border:0;
  --paper:#F5F3EC;--paper2:#D5DFD7;--paper3:#A9B9AE;--line:rgb(255 255 255 / .16);--amber:#E9CF94;--amber2:#F0D9A3}
.foot-name{color:#F5F3EC;font-variation-settings:"SOFT" 60,"WONK" 1}
.foot-h{color:#E9CF94;font-size:.86rem;font-weight:600}
.foot a{color:#D5DFD7}
.foot a:hover{color:#fff}

/* ── header tools, the announcement line, the floating bar ──────────────── */
.s-tools{gap:.45rem}
.s-iconbtn{border-radius:999px!important;background:var(--ink2)!important;border-color:var(--line2)!important;color:var(--paper)!important}
.x-shelfbtn{border-radius:999px!important;background:var(--ink2)!important;border-color:var(--line2)!important;color:var(--paper)!important}
@media (max-width:819px){
  .s-tools{width:100%;padding-bottom:.55rem}
  .s-tools>.s-iconbtn:first-child{flex:1;justify-content:flex-start;color:var(--paper3)!important}
}
body[data-page="home"] .s-ann{display:none}
.s-ann{background:var(--haint3)!important;border:0!important;border-bottom:1px solid var(--line)!important;color:var(--paper)!important}
.x-bar{background:rgb(255 255 255 / .96)!important;border:1px solid var(--line2)!important;box-shadow:var(--lift2)!important;border-radius:999px}
html:not(.past-hero) body[data-page="home"] .x-bar{opacity:0;pointer-events:none}
body[data-page="home"] .x-bar{transition:opacity .25s,transform .25s}
@media (max-width:520px){.price-strip{font-size:.9rem;padding-block:.5rem}.price-strip b{display:inline;margin:0 .4rem 0 0}.ps-more{display:none}}
.hero-line{max-width:12ch}

/* ── polish: cards, badges, quiet buttons (html-prefixed so they outrank the later sheets) ── */
html .rec .tab{display:block;padding-right:2.3rem;min-height:1.1rem}
html .x-save{top:.55rem;right:.55rem;width:2rem;height:2rem;background:#fff;border-color:var(--line);color:var(--paper3);backdrop-filter:none}
html .x-save:hover{border-color:var(--paper);color:var(--paper)}
html .x-save[aria-pressed="true"]{color:var(--amber);border-color:var(--amber)}
html .x-order{font-family:var(--serif);font-size:.72rem;font-weight:650;letter-spacing:0;text-transform:none;color:var(--kudzu);
  background:var(--haint);border:0;padding:.14rem .55rem}
html .x-order.is-start{background:var(--kudzu);color:#F5F3EC;border:0}
html .x-post .x-tag{letter-spacing:0;text-transform:none;font-size:.78rem;font-weight:600;color:var(--kudzu);background:var(--haint3);border:0;padding:.16rem .6rem}
html .s-res-grp{letter-spacing:0;text-transform:none;font-size:.84rem;font-weight:650;color:var(--paper3)}
html .s-tag-key{font-variant:normal;letter-spacing:0}
html .x-peek{color:var(--paper2);font-size:.88rem;text-decoration-color:var(--line2)}
html .x-peek:hover{color:var(--paper)}
html .x-mini{border-radius:999px;color:var(--paper);background:var(--ink2)}
html .x-mini:hover{border-color:var(--paper);color:var(--paper)}
html .x-mini.is-primary{background:var(--amber);border-color:var(--amber);color:var(--on-accent)}
html .sh-btn{color:var(--paper2);border-color:var(--line2);border-radius:999px;background:var(--ink2);font-size:.86rem;padding:.4em .85em}
html .sh-btn:hover,html .sh-btn:focus-visible{background:var(--ink3);border-color:var(--paper);color:var(--paper)}
html .sh-mini{border-color:var(--line2)}
html .s-peekbtn,html .rec.s-has-peek>.s-peekbtn{color:var(--paper2);border-color:var(--line2);border-radius:999px;background:var(--ink2)}
html .s-peekbtn:hover,html .s-peekbtn:focus-visible{background:var(--ink3);border-color:var(--paper);color:var(--paper)}
html .s-peekbtn:focus-visible{outline-color:var(--kudzu)}
html .s-btn{border-radius:999px}
/* "Read more" and Share sit on one line */
html .rec-body .rec-more{display:inline-block;margin-right:.7rem}
html .rec-body .sh-btn{margin-top:.5rem;vertical-align:middle}
/* buy pills: equal columns so three formats never wrap */
html .rec .buys{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.34rem;max-width:19rem}
html .rec .buy{padding-inline:.5rem;min-width:0}
html .rec .buy-f{white-space:nowrap}
/* the shelf: single books sit side by side; a series keeps its own full-width room */
@media (min-width:780px){
  html .grid{grid-template-columns:repeat(auto-fill,minmax(23rem,1fr));grid-auto-flow:dense;align-items:start}
  html .grid>.grp-series{grid-column:1/-1}
  html .grid>.grp:not(.grp-series) .grp-items{grid-template-columns:minmax(0,1fr)}
  html .grp-items{grid-template-columns:repeat(auto-fill,minmax(23rem,1fr))}
}
html .grid>.grp:not(.grp-series){padding-block:0}
html .grid{gap:1.1rem}
html .grid>.grp-series{margin-block:.7rem}
html .tools{padding-bottom:.4rem;margin-bottom:1.1rem}
@media (max-width:519px){html .rec .buy{padding-inline:.4rem}html .rec .buy-f{font-size:.64rem}html .rec .buy-p{font-size:.92rem}}
html{scroll-padding-top:8rem}

/* ── book page details ──────────────────────────────────────────────────── */
html .rel{grid-template-columns:4.4rem minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:.9rem;row-gap:.2rem;padding:.8rem;align-items:start}
html .rel img{grid-row:1/3}
html .rel-t,html .rel-h{grid-column:2}
html .rel-h{color:var(--paper2);margin-top:0}
html .s-tags{margin:.7rem 0 1.1rem}
html .s-tag{border-radius:999px;background:var(--ink2);border-color:var(--line)}
html .s-tag-ku{background:var(--haint);border-color:var(--haint);color:var(--kudzu2);font-weight:600}
/* the buy bar that follows a phone reader down the page */
.bk-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;gap:.7rem;
  padding:.55rem var(--pad) calc(.55rem + env(safe-area-inset-bottom));background:rgb(255 255 255 / .97);
  border-top:1px solid var(--line2);box-shadow:0 -12px 28px -18px rgb(var(--shade-rgb) / .5);
  transform:translateY(110%);transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.bk-sticky.is-on{transform:none}
.bk-sticky-t{display:none}
.bk-sticky-b{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.4rem;flex:1;min-width:0}
.bk-sticky .buy{padding:.34rem .6rem .4rem;text-decoration:none;border:1px solid var(--line2);border-radius:10px;display:flex}
.bk-sticky .buy-kindle{border-color:var(--amber)}
.bk-sticky .buy-soon{opacity:.6}
@media (max-width:759px){.bk-sticky{display:flex}body.has-bk-sticky{padding-bottom:4.2rem}}
@media (prefers-reduced-motion:reduce){.bk-sticky{transition:none}}
@media print{.bk-sticky{display:none!important}}
html .rel-t{font-weight:600}

/* ── inner-page details ─────────────────────────────────────────────────── */
html .az-t{font-weight:600}
html .az-f{display:block;font-size:.92rem;line-height:1.9}
html .az-f a{white-space:nowrap}
html .az .sh-mini{justify-self:start;margin:.2rem 0 0}
main select,.s-dlg select{appearance:none;-webkit-appearance:none;max-width:100%;font:inherit;font-size:.95rem;color:var(--paper);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2355645B' stroke-width='1.6'/%3E%3C/svg%3E") right .8rem center/.7rem no-repeat;
  border:1px solid var(--line2);border-radius:10px;padding:.55rem 2.2rem .55rem .8rem;min-height:2.7rem;text-overflow:ellipsis}
main select:focus-visible{border-color:var(--kudzu)}
#sClubPick{width:100%}
html .s-ann-in{flex-wrap:nowrap;align-items:flex-start;font-size:.93rem;line-height:1.45}
html .s-ann-x{flex:none;margin-left:auto}

/* ── sheets, toasts, settings ───────────────────────────────────────────── */
html .sh-veil{background:rgb(var(--shade-rgb) / .38)}
html .sh-sheet{background:#fff;color:var(--paper);border:0;box-shadow:0 -22px 60px -20px rgb(var(--shade-rgb) / .5);border-radius:18px 18px 0 0}
@media (min-width:46rem){html .sh-sheet{border:0;border-radius:18px}}
html .sh-grip{background:var(--line2)}
html .sh-head img{border:0;box-shadow:0 6px 12px -7px rgb(var(--shade-rgb) / .6)}
html .sh-head p{color:var(--paper2)}
html .sh-head .sh-prices{color:var(--paper);font-weight:600}
html .sh-x{color:var(--paper3)}
html .sh-i{background:var(--ink);border-color:var(--line);border-radius:12px;color:var(--paper)}
html .sh-i:hover,html .sh-i:focus-visible{background:var(--haint3);border-color:var(--haint2)}
html .sh-i b{font-weight:600}
html .sh-i small,html .sh-note{color:var(--paper3)}
html .sh-note b{color:var(--paper2);font-weight:600}
html .sh-toast{background:var(--kudzu2);color:#F5F3EC;border:0;border-radius:999px;box-shadow:var(--lift2)}
/* "Quiet the background" now takes the survey map and the tints away */
html.s-calm .hero-art{display:none}
html.s-calm .hero{background:var(--ink)}
html.s-calm .door{--t:var(--ink2);box-shadow:var(--lift)}
html.s-calm .grp-series{background:var(--ink3)}
html:not(.past-hero) body[data-page="home"] .x-bar{animation:none;visibility:hidden}

/* ── moving between pages: a short cross-fade where the browser supports it ── */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* trailer pause control */
.trailer-hold{position:absolute;right:.7rem;bottom:.7rem;z-index:2;background:rgb(16 22 19 / .72);border:1px solid rgb(255 255 255 / .5);color:#fff;
  font:600 .82rem/1 var(--serif);padding:.5rem .8rem;border-radius:999px;cursor:pointer}
.trailer-frame.is-sound .trailer-hold{display:none}
@media (min-width:760px){.hero-line{font-size:clamp(2.6rem,6.2vw,5.4rem)}}
@media (min-width:760px) and (max-width:999px){.fan-c{width:clamp(4.8rem,10.6vw,7rem);margin-inline:-1.1rem}.hero-inner{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
@media (min-width:820px){html .nav{gap:clamp(.8rem,1.5vw,1.3rem)}html .nav a{font-size:.93rem;white-space:nowrap}html .bar{column-gap:.8rem;row-gap:.2rem}}

/* ── series sections: the series' own covers sit behind the words ───────── */
.has-cv{position:relative;isolation:isolate;overflow:hidden;background:var(--kudzu2);
  --paper:#F9F7F1;--paper2:#E6ECE6;--paper3:#C9D4CB;--line2:rgb(255 255 255 / .34);--line:rgb(255 255 255 / .2);--amber2:#F0D9A3;--amber:#E9CF94;--kudzu:#BFD9D2;--haint2:rgb(255 255 255 / .45);
  color:var(--paper);text-shadow:0 1px 2px rgb(8 14 11 / .85),0 0 14px rgb(8 14 11 / .55)}
.cv-bg{position:absolute;inset:0;z-index:-1;display:flex;pointer-events:none}
.cv-bg img{flex:1 1 0;min-width:0;width:auto;height:100%;object-fit:cover;object-position:50% 22%;border:0;border-radius:0;box-shadow:none;filter:saturate(1.05)}
.cv-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgb(12 20 16 / .9) 0%,rgb(12 20 16 / .78) 50%,rgb(12 20 16 / .56) 100%)}
.ser.has-cv{border-top:0}
.ser.has-cv .ser-order a{text-decoration-color:rgb(255 255 255 / .55)}
.ser.has-cv .ser-order a:hover,.ser.has-cv .ser-name a:hover,.grp-head.has-cv .grp-name a:hover{color:var(--amber2)}
.grp-head.has-cv{border-radius:14px;padding:clamp(1.1rem,3vw,1.9rem) clamp(1rem,2.6vw,1.6rem)}
.grp-head.has-cv .grp-name{font-size:clamp(1.45rem,2.6vw,1.8rem)}
.grp-head.has-cv .grp-line{color:var(--paper);font-size:1.02rem}
.grp-head.has-cv .cv-bg::after,.page-head-cv .cv-bg::after{
  background:linear-gradient(90deg,rgb(12 20 16 / .88) 0%,rgb(12 20 16 / .72) 42%,rgb(12 20 16 / .4) 100%)}
.page-head-cv{border-radius:18px;padding:clamp(1.4rem,4vw,2.6rem) clamp(1.1rem,3vw,2rem);box-shadow:var(--lift)}
.page-head-cv .h1{color:var(--paper)}
.page-head-cv .lede{color:var(--paper);margin-bottom:0}
@media (max-width:700px){
  .grp-head.has-cv .cv-bg img:nth-child(n+5),.page-head-cv .cv-bg img:nth-child(n+5){display:none}
  .ser.has-cv .cv-bg img:nth-child(n+4){display:none}
  .cv-bg::after,.grp-head.has-cv .cv-bg::after,.page-head-cv .cv-bg::after{background:rgb(12 20 16 / .79)}
}
@media (forced-colors:active){.cv-bg{display:none}}

/* Book covers next to every title (A to Z list and series reading order) */
.az{grid-template-columns:4.75rem 1fr;column-gap:1.1rem;align-items:start}
.az>*{grid-column:2}
.az>.az-cv{grid-column:1;grid-row:1 / span 8;display:block;align-self:start}
.az-cv img{display:block;width:100%;height:auto;aspect-ratio:313/500;object-fit:cover;
  border:1px solid var(--line2);box-shadow:0 6px 16px rgb(var(--shade-rgb) / 0.12);background:var(--ink3)}
.az-cv:hover img{border-color:var(--amber-dim)}
@media (max-width:520px){.az{grid-template-columns:3.9rem 1fr;column-gap:.85rem}}
.ser-order li{align-items:center}
.ser-order .ser-cv{width:2.4rem;height:auto;aspect-ratio:313/500;object-fit:cover;flex:none;
  border:1px solid var(--line2);background:var(--ink3)}

/* ── hero headline: the author's name and portrait open the page (Oct 9 2026) ── */
.hero-words{container-type:inline-size;min-width:0}
.hero-head{--pw:clamp(6.4rem,28cqi,12rem);display:grid;grid-template-columns:var(--pw) minmax(0,1fr);
  column-gap:clamp(1rem,4.2cqi,1.75rem);align-items:end}
.hero-portrait{margin:0;width:var(--pw);padding:.3rem;background:#fff;border-radius:14px;
  box-shadow:0 1px 0 rgb(255 255 255 / .6) inset,0 20px 38px -18px rgb(var(--shade-rgb) / .55),0 2px 6px rgb(var(--shade-rgb) / .12)}
.hero-portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:10px;background:#E4E4E2}
.hero-title{font-family:var(--display);font-weight:600;color:var(--paper);margin:0 0 -.06em;
  font-size:clamp(2.35rem,10.6vw,4.4rem);
  font-size:clamp(2.2rem,calc((100cqi - var(--pw) - 1.6rem) / 4.75),4.9rem);
  line-height:.94;letter-spacing:-.03em;font-variation-settings:"SOFT" 100,"WONK" 1;font-optical-sizing:auto}
.hero-title span{display:block;white-space:nowrap}
.hero-sub{font-family:var(--display);font-weight:430;font-style:italic;color:var(--paper2);
  font-size:clamp(1.3rem,6.6cqi,2.05rem);line-height:1.18;letter-spacing:-.012em;max-width:24ch;text-wrap:balance;
  margin:clamp(1.1rem,4cqi,1.6rem) 0 clamp(1.4rem,5cqi,2rem);padding-top:clamp(.9rem,3.4cqi,1.3rem);
  border-top:1px solid rgb(var(--fg-rgb) / .22);font-variation-settings:"SOFT" 60,"WONK" 1}
@media (prefers-reduced-motion:no-preference){
  .anim .hero-head,.anim .hero-sub{opacity:0;transform:translateY(10px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
  .anim .hero-head{animation-delay:.06s}
  .anim .hero-sub{animation-delay:.14s}
}
/* side by side with the hand of covers: a little smaller, so the name never runs under a cover */
@media (min-width:760px){.hero-title{font-size:clamp(2.2rem,calc((100cqi - var(--pw) - 1.6rem) / 5.45),4.6rem)}}
@media (min-width:1200px){.fan-c{width:clamp(6.6rem,11.4vw,10.4rem)}}
/* the author photo no longer sits at the bottom, so the about box is a single column */
.about-in.no-mug{grid-template-columns:minmax(0,1fr)}