:root{
  --paper:#F4F5F2; --surface:#FFFFFF; --sunk:#EAECE6; --tint:#EDF0EA;
  --ink:#1A1F1C; --ink-mid:#4A5450; --ink-faint:#7B8580;
  --rule:#DBDFD6; --rule-soft:#E8EAE3;
  --accent:#1F5E63; --accent-deep:#164A4E; --accent-soft:#E1EDEC; --on-accent:#FFFFFF;
  --brass:#8A6420; --warn:#A93B2C;
  --slab:"Zilla Slab", Georgia, serif;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --shadow:0 1px 2px rgba(26,31,28,.04), 0 12px 32px -24px rgba(26,31,28,.4);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111512; --surface:#191E1A; --sunk:#212721; --tint:#161B17;
    --ink:#E9ECE4; --ink-mid:#AEB6AC; --ink-faint:#818A80;
    --rule:#2C312A; --rule-soft:#242921;
    --accent:#74BFC1; --accent-deep:#8FD0D1; --accent-soft:#16302F; --on-accent:#0E1614;
    --brass:#C9A059; --warn:#E28C79;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -24px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:#111512; --surface:#191E1A; --sunk:#212721; --tint:#161B17;
  --ink:#E9ECE4; --ink-mid:#AEB6AC; --ink-faint:#818A80;
  --rule:#2C312A; --rule-soft:#242921;
  --accent:#74BFC1; --accent-deep:#8FD0D1; --accent-soft:#16302F; --on-accent:#0E1614;
  --brass:#C9A059; --warn:#E28C79;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -24px rgba(0,0,0,.9);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:18px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
[hidden]{display:none!important;}
a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px;}
.wrap{max-width:900px; margin:0 auto; padding-inline:24px;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:30; background:var(--paper); border-bottom:1px solid var(--rule);}
.nav .wrap{display:flex; align-items:center; gap:20px; padding-block:13px; flex-wrap:wrap;}
.brand{
  display:flex; align-items:center; gap:10px; margin-right:auto;
  font-family:var(--slab); font-weight:600; font-size:15.5px;
  letter-spacing:-.01em; color:var(--ink); text-decoration:none;
}
.mark{width:15px; height:15px; flex:none;}
.navlinks{display:flex; gap:22px;}
.navlinks a{font-family:var(--slab); font-size:14px; font-weight:500; color:var(--ink-mid); text-decoration:none;}
.navlinks a:hover,.navlinks a.here{color:var(--accent);}
.navlinks a.here{text-decoration:underline; text-underline-offset:5px;}

/* ---------- hero + page heads ---------- */
.hero{padding-block:76px 60px; border-bottom:1px solid var(--rule);}
.kicker{
  font-family:var(--slab); font-size:12px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass); margin:0 0 20px;
}
h1{
  font-family:var(--slab); font-weight:700; font-size:clamp(36px,7vw,60px);
  line-height:1.04; letter-spacing:-.025em; margin:0 0 22px; text-wrap:balance; max-width:17ch;
}
.lede{font-size:clamp(20px,3vw,24px); line-height:1.45; color:var(--ink-mid); margin:0 0 30px; max-width:34ch; font-weight:300;}
.lede b{color:var(--ink); font-weight:400;}
.lede-sm{font-size:19px; color:var(--ink-mid); max-width:60ch; margin:0 0 22px;}
.pagehead{padding-block:64px 34px; border-bottom:1px solid var(--rule);}
.pagehead h1{margin-bottom:16px;}

/* ---------- sections ---------- */
section{padding-block:62px; border-bottom:1px solid var(--rule);}
section.tinted{background:var(--tint);}
.eyebrow{
  font-family:var(--slab); font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 14px;
}
h2{font-family:var(--slab); font-weight:600; font-size:clamp(25px,4.2vw,33px); line-height:1.16; letter-spacing:-.018em; margin:0 0 20px; text-wrap:balance;}
h3{font-family:var(--slab); font-weight:600; font-size:17px; letter-spacing:-.005em; margin:0 0 14px; color:var(--ink);}
p{margin:0 0 18px; max-width:62ch;}
p:last-child{margin-bottom:0;}
.big{font-size:21px; line-height:1.5;}
.prose h2{margin-top:40px; font-size:21px;}
.runon{color:var(--ink-mid);} .runon b{color:var(--ink); font-weight:500;}

.three{display:grid; gap:14px; margin-top:28px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.plank{background:var(--surface); border:1px solid var(--rule-soft); border-top:3px solid var(--accent); border-radius:3px; padding:18px 20px; box-shadow:var(--shadow);}
.plank p{font-size:16.5px; color:var(--ink-mid); margin:0;}
.plank strong{display:block; font-family:var(--slab); font-weight:600; font-size:15px; color:var(--ink); margin-bottom:6px;}

/* ---------- the annual rhythm ---------- */
.rhythm{list-style:none; padding:0; margin:26px 0 0; counter-reset:none;}
.rhythm li{
  display:grid; grid-template-columns:88px minmax(0,1fr); gap:6px 18px;
  padding:14px 0; border-top:1px solid var(--rule); align-items:baseline;
}
.rhythm li:last-child{border-bottom:1px solid var(--rule);}
.rhythm .m{
  font-family:var(--slab); font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brass);
}
.rhythm a{font-family:var(--slab); font-weight:600; font-size:18px; text-decoration:none; color:var(--ink);}
.rhythm a:hover{color:var(--accent);}
.rhythm .rd{grid-column:2; color:var(--ink-mid); font-size:16px;}

/* ---------- shelf ---------- */
.jump{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:8px;}
.jump a{font-family:var(--slab); font-size:14px; color:var(--ink-mid); text-decoration:none; border-bottom:1px solid var(--rule);}
.jump a:hover{color:var(--accent); border-color:var(--accent);}
.group{margin-top:40px;}
.group:first-of-type{margin-top:0;}
.grouphead{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding-bottom:9px; margin-bottom:14px; border-bottom:1px solid var(--rule);}
.grouphead h3{margin:0; font-size:19px;}
.n{font-family:var(--slab); font-size:12px; font-weight:500; color:var(--ink-faint); font-variant-numeric:tabular-nums;}
.groupnote{font-size:16px; color:var(--ink-mid); margin:-4px 0 16px; max-width:62ch;}
.titles{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(268px,1fr));}
.title{
  text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--rule-soft); border-radius:3px;
  padding:15px 17px; box-shadow:var(--shadow);
  display:grid; grid-template-columns:64px minmax(0,1fr); gap:14px; align-items:start;
}
.title:hover{border-color:var(--accent);}
.cover{width:64px; height:auto; display:block; border-radius:2px; box-shadow:0 1px 3px rgba(26,31,28,.2), 0 6px 14px -10px rgba(26,31,28,.55);}
.title .meta{display:flex; flex-direction:column; gap:7px; min-width:0;}
.title .t{font-family:var(--slab); font-weight:600; font-size:16px; line-height:1.28; letter-spacing:-.008em; color:var(--ink);}
.title .sub{display:block; font-family:var(--slab); font-weight:500; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--brass); margin-top:5px;}
.title .d{font-size:15px; line-height:1.4; color:var(--ink-mid); margin:0;}
.home-peek{margin-top:26px;}
.more{margin-top:26px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--slab); font-size:15px; font-weight:600;
  color:var(--on-accent); background:var(--accent); border:1px solid var(--accent);
  border-radius:3px; padding:11px 22px; text-decoration:none;
}
.btn:hover{background:var(--accent-deep); border-color:var(--accent-deep);}
.btn.ghost{background:transparent; color:var(--accent);}
.btn.ghost:hover{background:var(--accent-soft);}

/* ---------- book page ---------- */
.crumbs{font-family:var(--slab); font-size:13.5px; color:var(--ink-faint); margin:0 0 26px;}
.crumbs a{color:var(--ink-mid); text-decoration:none;}
.crumbs a:hover{color:var(--accent);}
.crumbs span{margin:0 7px;}
.bookpage{padding-block:44px 62px;}
.bookgrid{display:grid; grid-template-columns:240px minmax(0,1fr); gap:44px; align-items:start;}
.bookcover img{width:240px; height:auto; border-radius:3px; box-shadow:0 2px 6px rgba(26,31,28,.18), 0 20px 44px -26px rgba(26,31,28,.6);}
.bookbody h1{font-size:clamp(28px,5vw,40px); margin-bottom:10px; max-width:20ch;}
.booksub{font-family:var(--slab); font-size:18px; font-weight:500; color:var(--ink-mid); margin:0 0 20px;}
.monthtag{font-family:var(--slab); font-size:13px; color:var(--ink-faint); margin:0 0 20px;}
.monthtag .m{font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); margin-right:8px;}
.bookdesc{font-size:19px; line-height:1.55;}
.pull{
  margin:26px 0; padding:16px 0 16px 20px; border-left:3px solid var(--brass);
  font-style:italic; color:var(--ink-mid); font-size:17.5px; max-width:56ch;
}
.pull cite{display:block; margin-top:9px; font-style:normal; font-family:var(--slab); font-size:13.5px; letter-spacing:.04em; color:var(--ink-faint);}
.pull cite::before{content:"— ";}
.buy{margin:28px 0 14px;}
.pubnote{font-family:var(--slab); font-size:13.5px; color:var(--ink-faint);}

/* ---------- signup ---------- */
.signup-block{max-width:520px;}
.signup-h{font-size:24px; margin-bottom:12px;}
.signup-p{font-size:16.5px; color:var(--ink-mid); margin-bottom:20px;}
.signup{max-width:470px;}
.signup-row{display:flex; gap:9px; flex-wrap:wrap;}
.signup input[type="email"]{
  flex:1 1 210px; min-width:0; font-family:var(--serif); font-size:17px; color:var(--ink);
  background:var(--surface); border:1px solid var(--rule); border-radius:3px; padding:12px 14px;
}
.signup input[type="email"]::placeholder{color:var(--ink-faint);}
.signup button{
  font-family:var(--slab); font-size:15px; font-weight:600; color:var(--on-accent);
  background:var(--accent); border:1px solid var(--accent); border-radius:3px;
  padding:12px 22px; cursor:pointer;
}
.signup button:hover{background:var(--accent-deep); border-color:var(--accent-deep);}
.fineprint{font-family:var(--slab); font-size:13.5px; color:var(--ink-faint); margin:14px 0 0; line-height:1.5;}
.formkit-alert{list-style:none; margin:0 0 11px; padding:0;}
.formkit-alert:empty{display:none;}
.formkit-alert li{font-family:var(--slab); font-size:14.5px; color:var(--warn); padding:9px 12px; border:1px solid var(--warn); border-radius:3px; background:var(--surface);}
.signup .formkit-alert-success,.signup [data-element="success"]{font-family:var(--slab); font-size:16px; font-weight:500; color:var(--accent);}
.signup button[data-active] span{opacity:.6;}
.formkit-spinner{display:none;}

/* ---------- elsewhere + footer ---------- */
.elsewhere{display:flex; flex-wrap:wrap; gap:8px 18px; margin:14px 0 0; padding:0; list-style:none; font-family:var(--slab); font-size:15px;}
.elsewhere a{text-decoration:none;}
.elsewhere a:hover{text-decoration:underline;}
footer{
  padding-block:32px 56px; font-family:var(--slab); font-size:14px; color:var(--ink-faint);
  display:flex; gap:12px 28px; flex-wrap:wrap; align-items:center; justify-content:space-between;
}
.foot-mark{display:flex; align-items:center; gap:9px;}
.foot-mark .mark{opacity:.65;}
.foot-links{display:flex; gap:10px 20px; flex-wrap:wrap;}
.foot-links a{color:var(--ink-faint); text-decoration:none;}
.foot-links a:hover{color:var(--accent);}

@media (max-width:640px){
  .bookgrid{grid-template-columns:1fr; gap:26px;}
  .bookcover img{width:170px;}
}
@media (max-width:460px){
  body{font-size:17px;}
  section,.hero{padding-block:46px;}
  .navlinks{gap:16px;} .navlinks a{font-size:13.5px;}
  .rhythm li{grid-template-columns:1fr; gap:3px;}
  .rhythm .rd{grid-column:1;}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;} *{transition:none!important;}}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}