:root{
  --paper:#F5F0E4; --ink:#23272F; --muted:#524E46; --soft:#403D37; --rule:#DFD6C3; --faint:#EFE8D8;
  --house:#184487; --houseLit:#137DC7;
  --hemming:#2E4A3D; --brennan:#8A4A2B; --blue:#5B3A5E; --gray:#4A4A48;
  --accent:var(--house);
  --measure:34rem;
}
/* pen accents, driven by Ghost's body classes - no code edit needed per page */
.tag-hemming-allen-grant{--accent:var(--hemming)}
.tag-wyatt-wayne-brennan{--accent:var(--brennan)}
.tag-art-blue{--accent:var(--blue)}
.tag-gray-i-rony{--accent:var(--gray)}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--paper);color:var(--ink);font-family:"EB Garamond",Georgia,serif;font-size:19px;line-height:1.62}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
hr{border:0;border-top:1px solid var(--rule)}
.wrap{max-width:64rem;margin:0 auto;padding:0 2.5rem}
.d{font-family:"Fraunces",Georgia,serif;font-weight:300;letter-spacing:-.015em;line-height:1.05}
.lbl{font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-variant-numeric:lining-nums}
.tick{display:block;width:2.2rem;height:2px;margin-bottom:1.4rem}
.tick-accent{background:var(--accent)}

/* head */
.site-head{position:sticky;top:0;background:rgba(245,240,228,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);z-index:10}
.site-head .nav{display:flex;align-items:baseline;justify-content:space-between;padding:1.15rem 0;gap:2rem}
.mark{font-family:"Fraunces",serif;font-size:1.02rem;letter-spacing:.02em;display:flex;align-items:center;gap:.7rem}
.mark img{height:30px;width:auto;display:block;mix-blend-mode:multiply}
.mark em{font-style:normal;color:var(--muted)}
.primary ul,.fnav ul{list-style:none;display:flex;gap:2rem;flex-wrap:wrap}
.primary a,.acct a{font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding-bottom:2px;border-bottom:1px solid transparent}
.primary a:hover,.primary li.nav-current a,.acct a:hover{color:var(--house);border-color:var(--house)}
.acct{white-space:nowrap}

/* hero */
.hero{padding:8rem 0 5rem}
.hero-t{font-size:clamp(3rem,7.5vw,5.6rem);margin-top:1.6rem}
.lede{font-size:1.34rem;color:var(--soft);max-width:31rem;margin-top:2rem;line-height:1.5}
.acts{margin-top:3rem;display:flex;gap:2.5rem;align-items:center;flex-wrap:wrap}
.btn{font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;color:var(--house);border-bottom:1px solid var(--house);padding-bottom:.35rem}
.btn:hover{color:var(--houseLit);border-color:var(--houseLit)}
.btn.q{border-color:var(--rule);color:var(--muted)}
.btn.q:hover{color:var(--house);border-color:var(--house)}

/* pens */
.pens{border-top:1px solid var(--rule)}
.pen{display:grid;grid-template-columns:1.1fr 1.4fr;gap:3.5rem;padding:3.2rem 0;border-bottom:1px solid var(--rule);transition:background .25s}
.pen:hover{background:var(--faint)}
.pen h3{font-family:"Fraunces",serif;font-weight:400;font-size:1.85rem;letter-spacing:-.01em;line-height:1.15}
.pen .gen{margin-top:.5rem}
.pen .tag{font-size:1.16rem;font-style:italic;color:var(--soft);max-width:26rem}
.pen .more{margin-top:1.1rem;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* page shells */
.page{padding:5.5rem 0 7rem}
.crumb{margin-bottom:2.2rem}
.ttl{font-size:clamp(2.4rem,5.5vw,3.9rem)}
.sub{font-size:1.24rem;color:var(--soft);margin-top:1.4rem;max-width:var(--measure);font-style:italic}
.byline{margin-top:1.6rem}
.body{max-width:var(--measure);margin-top:2.6rem}
.body p{margin-bottom:1.35rem}
.rulewide{margin:4.5rem 0}
.listing{padding:5rem 0 7rem}

/* work rows */
.works{border-top:1px solid var(--rule)}
.work{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:baseline;padding:1.7rem 0;border-bottom:1px solid var(--rule);transition:background .25s}
.work:hover{background:var(--faint)}
.work .num{font-family:"Fraunces",serif;color:var(--accent);font-variant-numeric:lining-nums;font-size:.8rem}
.work h4{font-family:"Fraunces",serif;font-weight:400;font-size:1.32rem}
.work .meta{color:var(--soft);font-size:1rem;margin-top:.25rem;max-width:40rem}
.rate{font-size:.7rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;border:1px solid var(--rule);padding:.22rem .55rem;color:var(--muted);white-space:nowrap}

/* post body */
.post-body h2,.post-body h3{font-family:"Fraunces",serif;font-weight:400;letter-spacing:-.01em;margin:2.6rem 0 1rem;line-height:1.2}
.post-body h2{font-size:1.7rem}
.post-body h3{font-size:1.32rem}
.post-body em{font-style:italic}
.post-body blockquote{border-left:2px solid var(--accent);padding-left:1.4rem;margin:2rem 0;font-style:italic;color:var(--soft)}
.post-body hr{margin:2.8rem 0}
.post-body a{border-bottom:1px solid var(--rule)}
.post-body a:hover{border-color:var(--house);color:var(--house)}
.post-body figure{margin:2.4rem 0}
.post-body figcaption{font-size:.9rem;color:var(--muted);margin-top:.6rem;text-align:center}
.kg-width-wide{max-width:52rem;margin-left:calc((34rem - 52rem)/2)}
.kg-width-full{max-width:64rem;margin-left:calc((34rem - 64rem)/2)}
@media(max-width:1100px){.kg-width-wide,.kg-width-full{max-width:100%;margin-left:0}}

/* gate */
.gate{max-width:var(--measure)}
.gatecopy{margin-top:1rem;color:var(--soft);font-size:1.1rem}

/* next / prev */
.nextprev{display:flex;justify-content:space-between;gap:3rem;padding:0 2.5rem 6rem;flex-wrap:wrap}
.np{max-width:20rem}
.np.r{text-align:right;margin-left:auto}
.np h4{font-family:"Fraunces",serif;font-weight:400;font-size:1.2rem;margin-top:.4rem}
.np:hover h4{color:var(--house)}

/* pagination */
.pagination{display:flex;justify-content:space-between;align-items:baseline;padding:2.5rem 0;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pagination a:hover{color:var(--house)}

/* footer */
footer{border-top:1px solid var(--rule);padding:3.5rem 0 5rem;color:var(--muted);font-size:.95rem}
.fgrid{display:flex;justify-content:space-between;gap:3rem;flex-wrap:wrap}
.fmark{font-family:"Fraunces",serif;color:var(--ink)}
.ftag{margin-top:.45rem;max-width:22rem;font-style:italic;color:var(--muted)}
.fnav a:hover{color:var(--house)}
.fend{text-align:right}

@media(max-width:720px){
  .wrap{padding:0 1.5rem}
  .pen,.work{grid-template-columns:1fr;gap:1rem}
  .hero{padding:5rem 0 3.5rem}
  .site-head .nav{flex-wrap:wrap;gap:1rem}
  .fend{text-align:left}
  .nextprev{padding:0 1.5rem 4rem}
  .np.r{text-align:left;margin-left:0}
}

/* feature */
.feature{padding:6.5rem 0;border-bottom:1px solid var(--rule)}
.pull{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(1.6rem,3.3vw,2.4rem);line-height:1.32;max-width:44rem;letter-spacing:-.01em}
.pull .em{font-style:italic;color:var(--house)}
.attrib{margin-top:2rem;color:var(--muted);font-size:1rem}
.stats{display:flex;gap:3.5rem;margin-top:3.5rem;flex-wrap:wrap}
.stat .n{font-family:"Fraunces",serif;font-size:1.9rem;font-weight:300;font-variant-numeric:lining-nums}
.stat .k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.3rem}

/* pricing rows - used by the Reading Plans page HTML card */
.tiers{margin-top:3.5rem;border-top:1px solid var(--rule)}
.tier{display:grid;grid-template-columns:1.1fr 2fr auto;gap:2.5rem;padding:2.1rem 0;border-bottom:1px solid var(--rule);align-items:baseline}
.tier h4{font-family:"Fraunces",serif;font-weight:400;font-size:1.3rem}
.tier .note{color:var(--soft);font-size:1.02rem;margin-top:.35rem}
.tier .amt{font-family:"Fraunces",serif;font-size:1.55rem;font-weight:300;white-space:nowrap;font-variant-numeric:lining-nums}
.tier .amt small{font-size:.82rem;color:var(--muted);letter-spacing:.04em}
.tier.hi{background:var(--faint);box-shadow:inset 3px 0 0 var(--house);margin:0 -1.5rem;padding-left:1.5rem;padding-right:1.5rem}
.tier .go{display:inline-block;margin-top:.6rem;margin-right:1.6rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--house);border-bottom:1px solid var(--house);padding-bottom:.25rem;width:fit-content}
.fine{margin-top:3rem;color:var(--soft);font-size:1rem;max-width:38rem}
.plans-full{max-width:none}
@media(max-width:720px){.tier{grid-template-columns:1fr;gap:1rem}}

/* scene break: the house divider, rendered from Ghost's horizontal rule */
.post-body hr{border:0;margin:2.8rem 0;text-align:center;height:auto}
.post-body hr::after{content:"* * *";display:block;font-family:"Fraunces",serif;font-weight:500;
  letter-spacing:.5em;color:var(--muted);font-size:.95rem;text-indent:.5em}

/* pen pickers on the Reading Plans page */
.pick{margin-top:.6rem}
.pick label{display:block;font-size:1rem;color:var(--ink);margin-bottom:.3rem;cursor:pointer}
.pick input{margin-right:.55rem}
.tiny{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#two-msg{margin-top:.5rem}

/* adult imprint: rating chip and the age confirmation */
.rate.adult{border-color:var(--blue);color:var(--blue)}
.agegate{max-width:var(--measure);margin-top:2.6rem;border:1px solid var(--rule);
  background:var(--faint);padding:1.8rem}
.agegate .acts{margin-top:1.6rem;gap:2rem}
.agecopy{margin-top:.8rem;color:var(--soft)}
.agegate button.btn{background:none;border:0;border-bottom:1px solid var(--house);
  font-family:inherit;cursor:pointer;padding:0 0 .35rem}
.agehidden{display:none}

/* The Voices page - heading sits tighter to the pen rows than a normal page */
.voices-head{padding:5.5rem 0 2.5rem}
.voices-head .body{margin-top:2rem}

/* Brennan's scene/chapter break is a hash, and that is canonical - never the house star */
.tag-wyatt-wayne-brennan .post-body hr::after{content:"#";letter-spacing:0;text-indent:0}