/* JBC site — shared styles */
:root{
  --paper:#f5f6f8;
  --surface:#ffffff;
  --ink:#172033;
  --muted:#555f75;
  --rule:#d5d9e2;
  --accent:#8c2a2f;      /* deep red, picked up from the book covers */
  --accent-ink:#ffffff;
  --serif:"Newsreader","Georgia","Times New Roman",serif;
  --sans:"Public Sans","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#10151f;--surface:#171e2c;--ink:#e9ecf3;--muted:#a3adc2;--rule:#2b3447;--accent:#e08a8e;--accent-ink:#10151f}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:1.05rem;line-height:1.5}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:.2em}
a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{max-width:60rem;margin:0 auto;padding:0 1.25rem}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--surface);padding:.5rem 1rem;z-index:10}

/* header */
.site-header{border-bottom:1px solid var(--rule);background:var(--surface)}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;padding-top:.6rem;padding-bottom:.6rem}
.brand{font-size:1.2rem;font-weight:600;color:var(--ink);text-decoration:none;letter-spacing:.01em}
nav ul{display:flex;flex-wrap:wrap;gap:.25rem 1.75rem;list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:.9rem}
nav a{color:var(--muted);text-decoration:none;padding:.35rem 0;border-bottom:2px solid transparent}
nav a:hover{color:var(--ink)}
nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

/* type */
h1,h2,h3{font-weight:600;line-height:1.15;margin:0 0 .35em}
h1{font-size:clamp(2rem,4.5vw,3rem);letter-spacing:-.015em}
h2{font-size:clamp(1.35rem,2.5vw,1.7rem)}
h3{font-size:1.2rem}
p{margin:0 0 .75em;max-width:40em}
.lede{font-size:1.15rem;color:var(--muted);max-width:34em}
.small{font-family:var(--sans);font-size:.88rem;color:var(--muted)}

/* home hero */
.hero{padding:1.75rem 0 1.25rem}
.hero h1{margin-bottom:.35em}
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,12rem));gap:clamp(.75rem,3vw,2rem);justify-content:start;padding:.5rem 0 0}
.shelf a{display:block;transition:transform .2s ease}
.shelf a:hover{transform:translateY(-6px)}
.shelf img,.book-cover img{aspect-ratio:2/3;object-fit:cover;box-shadow:0 1px 2px rgba(0,0,0,.25),0 14px 28px -10px rgba(0,0,0,.35);border-radius:2px;width:100%}
.shelf figcaption{font-size:.95rem;margin-top:.6rem;line-height:1.3}
.shelf figcaption span{display:block;font-family:var(--sans);font-size:.8rem;color:var(--muted)}
.shelf figure{margin:0}
.shelf-line{height:6px;background:var(--rule);margin-top:1.5rem}

section.block{padding:1.5rem 0;border-top:1px solid var(--rule)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem}
.plain-list{list-style:none;margin:0;padding:0}
.plain-list li{padding:.4rem 0;border-bottom:1px solid var(--rule)}
.plain-list li:last-child{border-bottom:0}
.plain-list b{font-weight:600}

/* books page */
.page-head{padding:1.5rem 0 .5rem}
.book{display:grid;grid-template-columns:minmax(0,11rem) 1fr;gap:clamp(1rem,3vw,2rem);padding:1.5rem 0;border-top:1px solid var(--rule);align-items:start}
.book-cover{display:flex;flex-direction:column;gap:.9rem}
.book-cover .back{margin-top:0}
.book-cover .small{margin-top:-.55rem;font-size:.8rem}
.byline{font-family:var(--sans);color:var(--muted);font-size:.88rem;margin:0 0 .75rem}
blockquote.pull{margin:.9rem 0;padding:.15rem 0 .15rem 1rem;border-left:3px solid var(--accent);font-style:italic;font-size:1.1rem;max-width:30em}
.facts{font-family:var(--sans);font-size:.85rem;color:var(--muted);margin:.9rem 0 0;padding-top:.6rem;border-top:1px solid var(--rule)}
.facts div{margin:.15rem 0}
.facts dt{display:inline;font-weight:600;color:var(--ink)}
.facts dd{display:inline;margin:0}
.buy{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-block;font-family:var(--sans);font-size:.88rem;font-weight:600;background:var(--accent);color:var(--accent-ink);padding:.45rem .9rem;border-radius:3px;text-decoration:none}
.btn:hover{filter:brightness(1.1)}

/* writings */
.piece{border-top:1px solid var(--rule)}
.piece:last-of-type{border-bottom:1px solid var(--rule)}
.piece summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:5rem 1fr;gap:1rem;padding:.7rem 0;align-items:baseline}
.piece summary::-webkit-details-marker{display:none}
.piece summary .when{font-family:var(--sans);font-size:.9rem;color:var(--muted)}
.piece summary .title{font-size:1.2rem;font-weight:600}
.piece summary .note{display:block;font-size:.9rem;color:var(--muted);font-weight:400;margin-top:.15rem}
.piece summary::after{content:"+";float:right}
.piece[open] summary::after{content:"–"}
.piece .body{padding:0 0 1rem 6rem}
.poem{font-style:italic;font-size:1.05rem;line-height:1.4;white-space:pre-line;margin:0 0 .6rem}
.empty{padding:.9rem 1rem;border:1px dashed var(--rule);margin-top:1.25rem;color:var(--muted)}

footer{border-top:1px solid var(--rule);margin-top:1.5rem;padding:1rem 0 1.5rem;font-family:var(--sans);font-size:.88rem;color:var(--muted)}

@media (max-width:760px){
  .cols{grid-template-columns:1fr}
  .book{grid-template-columns:1fr}
  .book-cover{max-width:11rem}
  .shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
  .shelf figcaption{font-size:.85rem}
  .shelf figcaption span{display:none}
  .piece summary{grid-template-columns:1fr;gap:.2rem}
  .piece .body{padding-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* author's note (poem 19) */
.note{margin:.9rem 0 0;padding:.9rem 1rem;background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:2px}
.note h4{font-family:var(--sans);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .4rem}
.note h6{font-family:var(--sans);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 .4rem}
.note p{font-size:1rem;margin-bottom:.6em}
.more>summary,.scripture>summary{cursor:pointer;font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--accent);padding:.3rem 0;list-style:none}
.more>summary::-webkit-details-marker,.scripture>summary::-webkit-details-marker{display:none}
.more>summary::before,.scripture>summary::before{content:"+ ";font-weight:400}
.more[open]>summary::before,.scripture[open]>summary::before{content:"– "}
.more-body{border-top:1px solid var(--rule);margin-top:.4rem}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem .4rem;margin:.2rem 0 .8rem;padding:0;font-family:var(--sans);font-size:.82rem}
.chips li{border:1px solid var(--rule);border-radius:99px;padding:.1rem .6rem;background:var(--paper)}
.scripture{margin:.5rem 0 .9rem;border:1px solid var(--rule);border-radius:2px;background:var(--paper);padding:.2rem .8rem}
.scripture-body{padding:.2rem 0 .6rem;font-size:1.05rem}
.scripture-body p{font-size:1.05rem;line-height:1.5;margin-bottom:.55em;max-width:none}
.scripture-body p.version{font-size:.8rem;margin-bottom:.4em}
.flock{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:.6rem 0}
.flock>div{padding-top:.4rem;border-top:2px solid var(--rule)}
.flock>div:first-child{border-top-color:var(--accent)}
.verdict{font-style:italic;font-weight:600}
.points{margin:.2rem 0 .8rem;padding-left:1.3rem}
.points li{margin-bottom:.4rem;font-size:1rem}
@media (max-width:760px){.flock{grid-template-columns:1fr}}

/* CV page */
.cv-row{display:grid;grid-template-columns:11rem 1fr;gap:1.25rem;padding:.9rem 0;border-top:1px solid var(--rule)}
.cv-row>h2{font-family:var(--sans);font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:.25rem 0 0}
.cv-item{display:grid;grid-template-columns:1fr auto;gap:.1rem 1.25rem;margin-bottom:.55rem}
.cv-item:last-child{margin-bottom:0}
.cv-item .main{font-weight:600}
.cv-item .main.plain{font-weight:400}
.cv-item .when{font-family:var(--sans);font-size:.88rem;color:var(--muted);white-space:nowrap;text-align:right}
.cv-item .sub{grid-column:1;font-size:.95rem;color:var(--muted);line-height:1.4}
.cv-year{display:grid;grid-template-columns:3.5rem 1fr;gap:.5rem;margin-bottom:.35rem}
.cv-year b{font-family:var(--sans);font-size:.88rem;color:var(--muted);font-weight:600;padding-top:.1rem}
.cv-list{margin:0;padding-left:1.1rem}
.cv-intro{max-width:44rem;margin:.25rem 0 1rem}
@media (max-width:760px){.cv-row{grid-template-columns:1fr;gap:.3rem}.cv-item{grid-template-columns:1fr}.cv-item .when{text-align:left}}

/* timeline page */
.tl-wrap{overflow-x:auto;margin:.75rem 0 0}
table.tl{border-collapse:collapse;width:100%;font-size:.95rem;line-height:1.35}
table.tl caption{text-align:left;font-family:var(--sans);font-size:.85rem;color:var(--muted);padding-bottom:.6rem}
table.tl th,table.tl td{padding:.35rem .6rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
table.tl thead th{font-family:var(--sans);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--ink);position:sticky;top:0;background:var(--paper)}
table.tl tbody th[scope="rowgroup"]{font-family:var(--sans);font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);padding-top:1.1rem;border-bottom:1px solid var(--accent);background:transparent}
table.tl td.when{font-family:var(--sans);font-size:.85rem;color:var(--muted);white-space:nowrap}
table.tl td.age{font-family:var(--sans);font-size:.85rem;white-space:nowrap;text-align:center}
table.tl td.remark{color:var(--muted);font-size:.9rem}
table.tl tr.grad td{background:var(--surface);font-weight:600}
table.tl tr.grad td.when,table.tl tr.grad td.age,table.tl tr.grad td.remark{font-weight:400}
table.tl tr.grad td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.dl{display:flex;flex-wrap:wrap;gap:.6rem;margin:.6rem 0 0}
.btn.alt{background:transparent;color:var(--accent);border:1px solid var(--accent)}

/* home: links beside titles, tighter */
.quick{padding:1rem 0 .5rem}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}
.q{padding:.55rem 0 .6rem;border-top:1px solid var(--rule)}
.q-head{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}
.q-head h2{margin:0}
.q p{margin:.2rem 0 0;font-size:.98rem;color:var(--muted)}
.still{margin:.6rem 0 0;max-width:none}
@media (max-width:760px){.quick-grid{grid-template-columns:1fr}}

/* CV page: no gaps between lines */
.cv-row{padding:.45rem 0;gap:1rem}
.cv-row>h2{margin-top:.15rem}
.cv-item{margin-bottom:0;row-gap:0}
.cv-item .sub{line-height:1.3}
.cv-year{margin-bottom:0}
.cv-list{line-height:1.35}
.cv-row p{margin:0}
.cv-intro{margin:.2rem 0 .6rem}

/* timeline: tighter */
table.tl{font-size:.9rem;line-height:1.22}
table.tl th,table.tl td{padding:.14rem .5rem}
table.tl thead th{padding-top:.25rem;padding-bottom:.25rem}
table.tl tbody th[scope="rowgroup"]{padding-top:.55rem;padding-bottom:.1rem;font-size:.7rem}
table.tl td.when,table.tl td.age{font-size:.8rem}
table.tl td.remark{font-size:.85rem}
table.tl caption{padding-bottom:.3rem}
.tl-wrap{margin-top:.4rem}

/* newsletters and essays */
.issues{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:.5rem}
.issue{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding:1rem 0;border-top:1px solid var(--rule)}
.issue img{width:100%;height:auto;box-shadow:0 1px 2px rgba(0,0,0,.25),0 10px 20px -10px rgba(0,0,0,.35);background:#fff}
.issue h2{margin:0 0 .15rem;font-size:1.25rem}
.issue .meta{font-family:var(--sans);font-size:.82rem;color:var(--muted);margin:0 0 .5rem}
.issue ol{margin:0 0 .6rem;padding-left:1.15rem;font-size:.98rem;line-height:1.4}
.issue li{margin-bottom:.15rem}
.crumb{font-family:var(--sans);font-size:.85rem;margin:1rem 0 0}
.essay{max-width:40rem}
.essay .issue-label{font-family:var(--sans);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:1.2rem 0 .3rem}
.essay h1{font-size:clamp(1.7rem,4vw,2.4rem);margin-bottom:.2rem}
.essay .byline2{font-style:italic;color:var(--muted);margin:0 0 1rem}
.essay p{margin:0 0 .75em;max-width:none}
.essay h2.sub{font-family:var(--sans);font-size:.85rem;font-style:italic;font-weight:700;margin:1.2rem 0 .3rem;padding-top:.4rem;border-top:1px solid var(--rule);line-height:1.3}
.essay blockquote.pq{margin:1.1rem 0;padding:.5rem 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);font-family:var(--sans);font-weight:700;font-size:1.25rem;text-align:center;line-height:1.2}
.essay .law{font-family:var(--sans);font-weight:700;font-size:1.1rem;text-align:center;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:.6rem .4rem;margin:1rem 0}
.essay .cond{margin-left:1.2rem}
.essay .poem2{font-style:italic}
.essay .poem2 p{margin-bottom:.6em}
.sidebox{border:1.5px solid var(--ink);padding:.6rem .8rem;margin:0 0 1rem;font-size:.95rem;background:var(--surface)}
.sidebox h2{font-family:var(--sans);font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;margin:0 0 .35rem;padding-bottom:.25rem;border-bottom:1px solid var(--ink)}
.sidebox p{margin:0 0 .4em}
.sidebox.right{float:right;width:19rem;margin:.2rem 0 1rem 1.25rem}
.sidebox table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.82rem;line-height:1.3}
.sidebox th{text-align:left;border-bottom:1.5px solid var(--ink);padding:.2rem .3rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.sidebox td{vertical-align:top;padding:.25rem .3rem;border-bottom:1px solid var(--rule)}
.sidebox td:first-child{font-weight:700;width:34%}
.figcard{background:#fff;color:#000;border:1px solid var(--rule);padding:.6rem;margin:0 0 1rem}
.figcard svg{width:100%;height:auto;display:block}
.figcard figcaption{font-family:var(--sans);font-size:.82rem;line-height:1.35;margin-top:.4rem;color:#000}
.pager{display:flex;justify-content:space-between;gap:1rem;font-family:var(--sans);font-size:.9rem;border-top:1px solid var(--rule);margin-top:1.5rem;padding-top:.7rem}
@media (max-width:760px){.issues{grid-template-columns:1fr}.sidebox.right{float:none;width:auto;margin:0 0 1rem}.issue{grid-template-columns:6rem 1fr}}
.sidebox table.sum td:first-child{width:3.2rem;font-weight:400}