
:root{
  color-scheme: only light;
  --paper:#FCFAF6;
  --paper-deep:#F6F2EA;
  --ink:#1A1714;
  --ink-soft:#57514A;
  --ink-faint:#7B7369;
  --rule:#E2DCD0;
  --sapphire:#1B3A5E;

  --serif:"Minion Pro","Iowan Old Style","Hoefler Text","Palatino Linotype",Palatino,Georgia,serif;
  --measure:34rem;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;color-scheme:only light;background:#FCFAF6}

/* Some in-app browsers force a dark transform. Re-assert the paper. */
@media (prefers-color-scheme:dark){
  html,body{background:#FCFAF6;color:#1A1714}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.62;
  font-kerning:normal;
  font-variant-numeric:oldstyle-num;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
a:focus-visible{outline:1.5px solid var(--sapphire);outline-offset:3px;border-radius:1px}

.wrap{
  max-width:var(--measure);
  margin:0 auto;
  padding:0 1.55rem;
}

/* ── running head ─────────────────────────────────── */
.head{
  max-width:var(--measure);
  margin:0 auto;
  padding:1.7rem 1.55rem 0;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
}
.head[hidden]{display:none}
.head-name,.head-section{
  font-size:.66rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.head-name{transition:color .25s}
.head-name:hover{color:var(--sapphire)}
.head-section{text-align:right}

/* ── cover strip ─────────────────────────────────── */
.coverstrip{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:.85rem;
  padding:2.6rem 0 0;
}
.coverstrip a{
  display:block;
  width:31%;
  max-width:9rem;
  aspect-ratio:1320/2103;
  border:1px solid rgba(26,23,20,.14);
  overflow:hidden;
  transition:opacity .3s;
}
.coverstrip a:hover{opacity:.82}
.coverstrip img{width:100%;height:100%;object-fit:cover;display:block}
.coverstrip .ph{
  width:100%;height:100%;
  background:var(--paper-deep);
  display:flex;align-items:center;justify-content:center;
  padding:.6rem;
  text-align:center;
  font-size:.55rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-faint);
  line-height:1.7;
}

.headshot{
  display:block;
  width:10.5rem;
  height:auto;
  margin:3rem auto 0;
  border:1px solid rgba(26,23,20,.14);
}

.bookcover{
  display:block;
  width:64%;
  margin:2.6rem auto 0;
  border:1px solid rgba(26,23,20,.14);
}

/* ── title block ──────────────────────────────────── */
.titleblock{
  padding:2.4rem 0 3.2rem;
  text-align:center;
}
.titleblock h1{
  margin:0;
  font-size:2.55rem;
  font-weight:400;
  letter-spacing:.005em;
  line-height:1.1;
}
.titleblock .rule-orn{
  margin:1.5rem auto 1.4rem;
  width:2.5rem;
  color:var(--ink-faint);
  font-size:.7rem;
  line-height:1;
}
.titleblock p{
  margin:0 auto;
  max-width:27rem;
  color:var(--ink-soft);
  font-size:1.02rem;
  font-style:italic;
  line-height:1.6;
}

/* ── section labels ───────────────────────────────── */
.label{
  font-size:.66rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 1.35rem;
  padding-bottom:.55rem;
  border-bottom:1px solid var(--rule);
}

section.block{padding:1.2rem 0 2.9rem}

/* ── contents entries ─────────────────────────────── */
.entry{
  display:block;
  padding:.92rem 0;
  border-bottom:1px solid var(--rule);
}
.entry:last-of-type{border-bottom:0}
.entry-line{
  display:flex;
  align-items:baseline;
  gap:.4rem;
  width:100%;
}
.entry-title{
  font-size:1.16rem;
  line-height:1.28;
  transition:color .25s;
}
.entry:hover .entry-title{color:var(--sapphire)}
.entry-leader{
  flex:1 1 auto;
  min-width:1.6rem;
  align-self:flex-end;
  margin-bottom:.34em;
  border-bottom:1px dotted var(--rule);
}
.entry-folio{
  flex:0 0 auto;
  font-size:.85rem;
  color:var(--ink-faint);
  font-variant-numeric:oldstyle-num;
}
.entry-sub{
  display:block;
  margin-top:.28rem;
  font-size:.94rem;
  font-style:italic;
  color:var(--ink-soft);
  line-height:1.45;
  max-width:26rem;
}
.entry-rung-folio{
  flex:0 0 auto;
  font-size:.62rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink-faint);
  align-self:center;
}
.entry-leader{margin-right:.15rem}
.entry-rung{
  display:block;
  margin-top:.34rem;
  font-size:.62rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

.moreline{
  margin:1.5rem 0 0;
  font-size:.9rem;
  color:var(--ink-soft);
  font-style:italic;
}
.moreline a{border-bottom:1px solid var(--rule);padding-bottom:1px}
.moreline a:hover{color:var(--sapphire);border-color:var(--sapphire)}

/* ── prose ────────────────────────────────────────── */
.prose p{margin:0 0 1.15rem}
.prose p:last-child{margin-bottom:0}
.prose .opener::first-line{
  font-variant-caps:small-caps;
  letter-spacing:.055em;
}
.orn{
  text-align:center;
  color:var(--ink-faint);
  margin:2rem 0;
  font-size:.72rem;
  letter-spacing:.5em;
  text-indent:.5em;
}

/* ── page titles ──────────────────────────────────── */
.pagetitle{padding:3.1rem 0 1.9rem}
.pagetitle h2{
  margin:0;
  font-size:1.95rem;
  font-weight:400;
  line-height:1.16;
  letter-spacing:.004em;
}
.pagetitle .sub{
  margin:.6rem 0 0;
  font-size:1.05rem;
  font-style:italic;
  color:var(--ink-soft);
  line-height:1.45;
}
.pagetitle .meta{
  margin:1.05rem 0 0;
  font-size:.66rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ── book detail ──────────────────────────────────── */
.buy{
  margin:2.4rem 0 0;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
}
.buy-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:.62rem 0;
  font-size:.95rem;
}
.buy-row span{color:var(--ink-soft)}
.buy-row a{
  color:var(--sapphire);
  border-bottom:1px solid rgba(27,58,94,.28);
  padding-bottom:1px;
}
.buy-row a:hover{border-bottom-color:var(--sapphire)}

.specs a{color:var(--sapphire);border-bottom:1px solid rgba(27,58,94,.25)}
.specs a:hover{border-bottom-color:var(--sapphire)}
.specs{
  margin:2.1rem 0 0;
  font-size:.82rem;
  color:var(--ink-faint);
  line-height:1.75;
}

/* ── excerpt slab ─────────────────────────────────── */
.excerpt{
  margin:2.2rem 0 0;
  padding:1.8rem 0 0;
  border-top:1px solid var(--rule);
}
.excerpt-end{border-top:1px solid var(--rule);padding-top:1.1rem}
.excerpt .prose p{font-size:1.03rem}
.excerpt-end{
  margin:1.6rem 0 0;
  font-size:.86rem;
  font-style:italic;
  color:var(--ink-faint);
}

/* ── filters ──────────────────────────────────────── */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem 1.15rem;
  padding:0 0 1.15rem;
  margin:0 0 .5rem;
  border-bottom:1px solid var(--rule);
}
.filt{
  font-size:.66rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink-faint);
  cursor:pointer;
  background:none;
  border:0;
  padding:.25rem 0;
  font-family:inherit;
  transition:color .22s;
}
.filt:hover{color:var(--ink-soft)}
.filt.on{color:var(--sapphire)}
.gloss{
  margin:1.1rem 0 1.6rem;
  font-size:.92rem;
  font-style:italic;
  color:var(--ink-soft);
  min-height:1.5rem;
}

/* ── footer ───────────────────────────────────────── */
.signup-line{
  margin:0 auto 2.4rem;
  text-align:center;
  font-size:.95rem;
  font-style:italic;
  color:var(--ink-soft);
}
.signup-line a{
  border-bottom:1px solid var(--rule);
  padding-bottom:2px;
  transition:color .25s,border-color .25s;
}
.signup-line a:hover{color:var(--sapphire);border-bottom-color:var(--sapphire)}

.signup{
  max-width:22rem;
  margin:0 auto 2.6rem;
  text-align:center;
}
.signup label{
  display:block;
  font-size:.92rem;
  font-style:italic;
  color:var(--ink-soft);
  margin-bottom:.85rem;
  text-transform:none;
  letter-spacing:0;
}
.signup-row{
  display:flex;
  align-items:baseline;
  gap:.6rem;
  border-bottom:1px solid var(--rule);
  padding-bottom:.4rem;
}
.signup input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  background:none;
  font-family:inherit;
  font-size:1rem;
  color:var(--ink);
  padding:.2rem 0;
}
.signup input::placeholder{color:var(--ink-faint);font-style:italic}
.signup input:focus{outline:none}
.signup-row:focus-within{border-bottom-color:var(--sapphire)}
.signup button{
  flex:0 0 auto;
  border:0;
  background:none;
  cursor:pointer;
  font-family:inherit;
  font-size:.66rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink-faint);
  padding:.2rem 0;
  transition:color .25s;
}
.signup button:hover{color:var(--sapphire)}

.signup[hidden],.signup-done[hidden]{display:none}
.signup-done{
  max-width:22rem;
  margin:0 auto 2.6rem;
  text-align:center;
  font-size:.95rem;
  font-style:italic;
  color:var(--ink-soft);
  line-height:1.55;
}

.essaynav{
  display:flex;
  justify-content:space-between;
  gap:2rem;
  margin:3rem 0 0;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
}
.essaynav a{
  flex:1 1 0;
  font-size:1.02rem;
  line-height:1.35;
  transition:color .25s;
}
.essaynav a:hover{color:var(--sapphire)}
.essaynav-next{text-align:right}
.essaynav span{
  display:block;
  font-size:.62rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:.4rem;
}

footer{
  margin-top:3.5rem;
  padding:2.2rem 0 3.4rem;
  border-top:1px solid var(--rule);
  text-align:center;
}
.colophon{
  font-size:.66rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink-faint);
  line-height:2.1;
}
.colophon a:hover{color:var(--sapphire)}
.footorn{color:var(--ink-faint);font-size:.7rem;margin-bottom:1rem}

.related{
  margin:2.6rem 0 0;
  padding-top:1.4rem;
  border-top:1px solid var(--rule);
  font-size:.94rem;
  font-style:italic;
  color:var(--ink-soft);
  line-height:1.55;
}
.related a{color:var(--sapphire)}

/* ── page entrance ────────────────────────────────── */
main{animation:rise .6s ease both}
@keyframes rise{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  main{animation:none}
  *{transition:none!important}
}

@media (min-width:640px){
  body{font-size:18px}
  .titleblock{padding:3rem 0 3.8rem}
  .titleblock h1{font-size:3.4rem}
  .pagetitle h2{font-size:2.35rem}
}
