/* SCV Talk Archive - shared stylesheet for the authored pages.
   Design tokens per the approved mockup (reference/template-preview.html).
   Self-hosted fonts only; no external requests of any kind. */
@import url('fonts/fonts.css');

:root{
  --ink:#1a1a1a; --cream:#faf7f2; --ochre:#c07830; --warmgray:#6b6259;
  /* design revision additions */
  --parchment:#f4eddf; --ochre-light:#d9b48c; --hairline:#e2dacb;
  --ochre-hover:#a65d2e; --paper:#fffdf9;
  --hair:#e2dacb; --edge:#ddd4c7; --measure:44rem; --wide:1080px;
  --skeleton:#ebe3d4;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--cream); color:var(--ink);
  font-family:'Source Serif 4',Georgia,'Times New Roman',serif;
  font-size:1.0625rem; line-height:1.65;
}

/* ---------- masthead ---------- */
.masthead{max-width:var(--wide);margin:0 auto;padding:2.5rem 1.25rem 0;text-align:center}
.masthead .brand{font-family:'Zilla Slab',serif;font-weight:700;font-size:52px;
  line-height:1.05;letter-spacing:-.01em;color:var(--ink);text-decoration:none;
  display:inline-block}
.masthead .brand span{color:var(--ochre)}
.masthead .site-label{font-family:'Zilla Slab',serif;font-weight:600;font-size:16px;
  letter-spacing:.34em;text-indent:.34em;  /* indent balances the trailing track */
  text-transform:uppercase;color:var(--warmgray);margin-top:14px}
/* The masthead image fills the content column exactly, so its edges line up
   with the hairline rule beneath it and with the text block below. Column width
   is set on .masthead itself; the image simply fills it. */
.masthead-img{display:block;width:100%;height:auto;margin:44px 0 0}
/* Post pages read in a narrower measure, so their masthead matches that column
   rather than the wide index column. */
/* No narrow header variant: the header is one width everywhere. Article
   CONTENT keeps the reading measure and centres inside it. */
/* Heritage bar: solid 6px ink, flush to the content column and to the mosaic. */
.masthead hr{border:none;height:6px;background:var(--ink);margin:44px 0 0}
nav.top{max-width:var(--wide);margin:0 auto;padding:22px 1.25rem;text-align:center;
  font-family:'Zilla Slab',serif;font-size:16px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;border-bottom:1px solid var(--hairline)}
nav.top a{color:var(--warmgray);text-decoration:none;margin:0 28px;padding-bottom:.3rem;
  border-bottom:2px solid transparent}
nav.top a:hover{color:var(--ink)}
nav.top a[aria-current]{color:var(--ochre);border-bottom-color:var(--ochre)}

.draft{max-width:var(--wide);margin:40px auto 0;padding:20px 26px;
  background:var(--parchment);border:none;border-left:4px solid var(--ochre);
  color:var(--warmgray);font-size:17px;line-height:1.55}
.draft .lbl{font-family:'Zilla Slab',serif;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ochre);margin-right:.5rem}

/* ---------- article ---------- */
article{max-width:var(--measure);margin:0 auto;padding:2.75rem 1.25rem 3rem}
.provenance{font-family:'Zilla Slab',serif;font-weight:500;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--warmgray);
  display:flex;flex-wrap:wrap;gap:.35rem .75rem;margin-bottom:1.1rem}
.provenance .dot{color:var(--ochre)}
.provenance a{color:inherit}
.provenance .circa{font-style:italic;text-transform:none;letter-spacing:.06em}
article h1{font-family:'Zilla Slab',serif;font-weight:700;
  font-size:clamp(1.9rem,5vw,2.6rem);line-height:1.12;letter-spacing:-.015em;margin-bottom:.9rem}
.byline{font-style:italic;color:var(--warmgray);font-size:.95rem;margin-bottom:2.2rem}
.byline b{font-style:normal;font-weight:600;color:var(--ink)}
.byline .tentative{font-size:.85rem}

.post-body p{margin-bottom:1.25rem}
.post-body h2,.post-body h3{font-family:'Zilla Slab',serif;margin:1.8rem 0 .7rem;line-height:1.25}
.post-body ul,.post-body ol{margin:0 0 1.25rem 1.4rem}
.post-body li{margin-bottom:.4rem}
.post-body blockquote{border-left:3px solid var(--warmgray);padding-left:1rem;
  margin:1.5rem 0;color:var(--warmgray)}
.post-body a{color:var(--ochre)}
.post-body img{max-width:min(100%,22rem);height:auto;border:1px solid #e2dbd0;
  padding:6px;background:#fff;display:block;margin:2rem auto}
.post-body figure{margin:2rem 0;text-align:center}
.post-body figcaption{font-size:.82rem;color:var(--warmgray);margin-top:.5rem;font-style:italic}
.post-body table{border-collapse:collapse;width:100%;margin-bottom:1.25rem;font-size:.95rem}
.post-body td,.post-body th{border:1px solid var(--edge);padding:.35rem .5rem}
.post-body pre{overflow-x:auto;background:#f3ede4;padding:.8rem;font-size:.85rem}

.media-note{border-left:3px solid var(--ochre);padding:.6rem 1rem;margin:1.75rem 0;
  font-size:.9rem;color:var(--warmgray);background:rgba(192,120,48,.06)}
.media-note a{color:var(--ochre)}
.missing-image{border:1px dashed #c9bfb1;background:rgba(107,98,89,.05);color:var(--warmgray);
  padding:1.25rem;margin:2rem auto;text-align:center;font-size:.85rem;font-style:italic;max-width:22rem}
.missing-image .filename{display:block;font-family:ui-monospace,Menlo,monospace;
  font-style:normal;font-size:.75rem;margin-top:.4rem;color:#8a7f72;word-break:break-all}
.flag{background:#fff4e0;border:1px solid var(--ochre);padding:.6rem 1rem;
  font-size:.8rem;color:#7a5220;margin-bottom:1.5rem}

/* ---------- comments ---------- */
/* End of the article, start of the town square. 3px ink matches the year
   headers and heritage bar; the parchment band shifts register without
   shouting. */
.comment-threshold{height:3px;background:var(--ink);margin:40px 0 0}
.comments{max-width:none;margin:0;padding:24px 22px 28px;
  background:var(--parchment);border:none}
.comments h2{font-family:'Zilla Slab',serif;font-weight:600;font-size:18px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin:0 0 24px}
.comments li{border-bottom:1px solid rgba(226,218,203,.9)}
.comments li:last-child{border-bottom:none}
.comments .inner,.prevnext .inner{max-width:var(--measure)}
.comments h2{font-family:'Zilla Slab',serif;font-weight:600;font-size:.85rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--warmgray);margin:1.2rem 0 1rem}
.comments ol{list-style:none}
.comments li{border-bottom:1px solid var(--hair);padding:.95rem 0;font-size:.96rem}
.comments .who{font-weight:600}
.comments .when{font-family:'Zilla Slab',serif;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--warmgray);margin-left:.5rem}
.comments .ctext{margin-top:.35rem}

/* ---------- footer / nav ---------- */
.archive-footer{max-width:var(--measure);margin:0 auto 3.5rem;padding:0 1.25rem}
.archive-footer hr{border:none;border-top:1px solid var(--ink);margin-bottom:1.1rem}
.archive-footer p{font-size:.85rem;color:var(--warmgray);line-height:1.6}
.archive-footer a{color:var(--ochre);text-decoration:none}
.archive-footer a:hover{text-decoration:underline}
.nav-links{display:flex;justify-content:space-between;gap:1.5rem;
  font-family:'Zilla Slab',serif;font-weight:600;font-size:.85rem;letter-spacing:.06em;margin-top:1.4rem}
.nav-links a{color:var(--ink);text-decoration:none;max-width:45%}
.nav-links a:hover{color:var(--ochre)}
.nav-links .spacer{flex:1}

/* ---------- index ---------- */
main.index{max-width:var(--wide);margin:0 auto;padding:2rem 1.25rem 4rem}
.summary{color:var(--warmgray);font-size:19px;margin:34px 0 0}
.summary .sep{color:var(--ochre);margin:0 .15rem}
/* Sticky context: the year stays visible while scrolling its section, with the
   month tucked just beneath it. Cream backgrounds so rows pass behind cleanly. */
/* Pinned year reads as a fixture: fully opaque cream, generous padding, and a
   3px ink rule so content scrolls cleanly beneath it. */
/* The pinned bar must cover the FULL column: rows sit in a list that is inset
   by .4rem on each side (for the hover background), so the header is pulled out
   by the same amount and padded back in. Without this the row rules visibly
   extend past the pinned bar's edges. */
h2.year{scroll-margin-top:0;font-family:'Zilla Slab',serif;font-size:40px;font-weight:700;letter-spacing:-.015em;
  margin:72px -.4rem 0;padding:18px .4rem 10px;border-bottom:3px solid var(--ink);
  display:flex;justify-content:space-between;align-items:baseline;
  position:sticky;top:0;background:var(--cream);z-index:3;
  box-shadow:0 6px 10px -8px rgba(26,26,26,.28)}
h2.year .n{font-size:14px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--warmgray);font-weight:600}
main.index ol{list-style:none}
/* 18px per the CD scale spec; supersedes the earlier 20px breathing-room note. */
li.post{display:flex;gap:.9rem;align-items:baseline;padding:18px .4rem;
  border-bottom:1px solid var(--hairline);margin:0 -.4rem;transition:background .12s ease}
li.post:hover{background:rgba(192,120,48,.05)}
/* Fixed-width, tabular date column so every row lines up and long titles wrap
   with a hanging indent instead of sliding under the date. */
li.post .date{font-family:'Zilla Slab',serif;font-size:17px;letter-spacing:.02em;
  color:var(--warmgray);flex:0 0 2.4rem;text-align:right;
  font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;
  transition:color .12s ease}
li.post:hover .date{color:var(--ochre)}
li.post .title{flex:1 1 18rem;min-width:0}
li.post .title{font-size:21px;font-weight:500;line-height:1.42}
li.post .title a{color:var(--ink);text-decoration:none}
li.post .title a:hover{color:var(--ochre);text-decoration:underline}
/* Right-hand markers live in their own flex row with fixed slots, so byline,
   era and the review dot can never overlap at any viewport width. */
li.post .meta{display:flex;align-items:baseline;gap:.6rem;flex:0 0 auto;
  margin-left:auto;white-space:nowrap}
li.post .by{font-size:.84rem;color:var(--warmgray);font-style:italic;
  flex:0 0 7.5rem;text-align:right;overflow:hidden;text-overflow:ellipsis}
li.post .era{flex:0 0 6.5rem;text-align:right}
.badge-slot{display:inline-block;width:.45rem;flex:0 0 .45rem}
/* Era is context, not a label to shout: plain warm-gray text, no box. */
.era{font-family:'Zilla Slab',serif;font-size:14px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ochre);white-space:nowrap}
/* Review aids, not reader-facing. The flag is a bare dot; both disappear with
   the DRAFT banner (body:not(.draft-mode) hides them). */
.badge{font-family:'Zilla Slab',serif;font-size:.62rem;letter-spacing:.06em;
  text-transform:uppercase;color:#9a8f82;white-space:nowrap}
.badge.flagged{display:inline-block;width:.45rem;height:.45rem;border-radius:50%;
  background:var(--ochre);opacity:.75;cursor:help}
body:not(.draft-mode) .badge{display:none}
/* Months are waypoints, not crumbs: real breathing room, and scroll-margin so
   an anchored jump never lands underneath the pinned year bar. */
h3.month{font-family:'Zilla Slab',serif;font-weight:600;font-size:18px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--warmgray);
  margin:0 -.4rem;padding:30px .4rem 12px;background:var(--cream);
  scroll-margin-top:6.5rem}
h3.month:first-of-type{margin-top:.5rem}
details.sitepages{margin-top:3.5rem;border-top:2px solid var(--ink);padding-top:1rem}
details.sitepages summary{font-family:'Zilla Slab',serif;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--warmgray);cursor:pointer}
details.sitepages li{padding:.3rem 0;border-bottom:1px solid var(--hair);font-size:.92rem;list-style:none}
details.sitepages a{color:var(--ink);text-decoration:none}

/* ---------- prose pages (about, search) ---------- */
main.prose{max-width:var(--measure);margin:0 auto;padding:2.5rem 1.25rem 4rem}
main.prose h1{font-family:'Zilla Slab',serif;font-weight:700;font-size:clamp(1.8rem,4.5vw,2.4rem);
  line-height:1.15;margin-bottom:1.6rem}
main.prose h2{font-family:'Zilla Slab',serif;font-weight:600;font-size:1.15rem;
  margin:2.4rem 0 .7rem;padding-bottom:.25rem;border-bottom:1px solid var(--edge)}
main.prose p{margin-bottom:1.1rem}
main.prose ul{margin:0 0 1.1rem 1.3rem}
main.prose li{margin-bottom:.4rem}
main.prose a{color:var(--ochre)}
.placeholder{border-left:3px solid var(--edge);padding:.5rem 0 .5rem 1rem;
  color:var(--warmgray);font-style:italic}

/* ---------- search ---------- */
#search{margin:1.5rem 0 2rem}
:root{--pagefind-ui-primary:#1a1a1a;--pagefind-ui-text:#1a1a1a;
  --pagefind-ui-background:#faf7f2;--pagefind-ui-border:#ddd4c7;
  --pagefind-ui-tag:#efe9e0;--pagefind-ui-border-width:1px;--pagefind-ui-font:'Source Serif 4',Georgia,serif}
.nojs{border:1px dashed var(--edge);padding:1rem;color:var(--warmgray);font-size:.9rem}

a:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:46rem){
  li.post .by{display:none}
}
@media (max-width:34rem){
  li.post .date{flex-basis:2.6rem}
  li.post .era{display:none}
}


/* ---------- losses page ---------- */
.losses-table{width:100%;border-collapse:collapse;font-size:.92rem;margin:1.2rem 0 2rem}
.losses-table th{font-family:'Zilla Slab',serif;font-weight:600;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--warmgray);
  text-align:left;border-bottom:1px solid var(--ink);padding:.4rem .5rem}
.losses-table td{border-bottom:1px solid var(--hair);padding:.3rem .5rem;vertical-align:top}
.losses-table td.d{font-family:'Zilla Slab',serif;font-size:.76rem;color:var(--warmgray);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.losses-table td.sid{font-family:ui-monospace,Menlo,monospace;font-size:.72rem;color:#9a8f82}
.losses-table tbody tr:hover{background:rgba(192,120,48,.05)}
blockquote.testimony{border-left:3px solid var(--ochre);padding:.4rem 0 .4rem 1.1rem;
  margin:1.2rem 0;color:var(--warmgray);font-style:italic}
blockquote.testimony cite{display:block;font-style:normal;font-size:.8rem;margin-top:.5rem;
  font-family:'Zilla Slab',serif;letter-spacing:.1em;text-transform:uppercase}
.recovery-call{border:1px solid var(--ochre);background:rgba(192,120,48,.06);
  padding:1rem 1.2rem;margin:1.5rem 0;font-size:.95rem}

/* ---------- support / colophon ---------- */
.support{margin-top:1.1rem;font-size:.82rem;color:var(--warmgray)}
.support a{color:var(--ochre);text-decoration:none}
.support a:hover{text-decoration:underline}

/* ---------- search results ---------- */
.pagefind-ui__result-title .result-date{font-family:'Zilla Slab',serif;font-size:.72rem;
  letter-spacing:.08em;color:var(--warmgray);margin-right:.5rem;text-transform:uppercase}


/* ---------- year histogram (navigation) ---------- */
.histogram{display:flex;align-items:flex-end;gap:10px;margin:56px 0 0;
  padding-bottom:0;border-bottom:1px solid var(--ink)}
.histogram .bar{flex:1 1 0;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;text-decoration:none;min-width:0}
.histogram .col{display:flex;align-items:flex-end;justify-content:center;width:100%}
.histogram .fill{display:block;width:100%;background:var(--ochre-light);
  transition:background .12s ease}
.histogram .is-peak .fill{background:var(--ochre)}
.histogram .bar:hover .fill,.histogram .bar:focus-visible .fill{background:var(--ochre-hover)}
.histogram .n{font-family:'Zilla Slab',serif;font-size:15px;font-weight:600;
  color:var(--warmgray);margin-bottom:.3rem;font-variant-numeric:tabular-nums}
.histogram .yr{font-family:'Zilla Slab',serif;font-size:17px;font-weight:500;
  color:var(--warmgray);padding-top:10px}
.histogram .is-peak .yr{color:var(--ink);font-weight:700}
.histogram .bar:hover .yr{color:var(--ochre)}

/* ---------- search inputs (index box and Pagefind UI) ---------- */
.indexsearch{display:flex;gap:0;margin:44px 0 0}
.indexsearch input[type=search],
.pagefind-ui__search-input{
  flex:1 1 auto;font-family:'Zilla Slab',serif;font-size:19px;
  padding:16px 22px;color:var(--ink);background:var(--paper);
  border:1px solid #d9d2c4;border-right:none;border-radius:0;
  -webkit-appearance:none;appearance:none}
.indexsearch input[type=search]:focus,
.pagefind-ui__search-input:focus{outline:2px solid var(--ochre);outline-offset:1px;
  border-color:var(--ochre)}
.indexsearch button{
  font-family:'Zilla Slab',serif;font-weight:600;font-size:15px;letter-spacing:.16em;
  text-transform:uppercase;padding:0 36px;cursor:pointer;
  color:var(--cream);background:var(--ochre);border:1px solid var(--ochre);border-radius:0}
.indexsearch button:hover{background:var(--ochre-hover);border-color:var(--ochre-hover)}
.pagefind-ui__search-input{border-right:1px solid #d9d2c4}
.pagefind-ui__search-clear{background:transparent;color:var(--warmgray);
  border-color:var(--edge);padding:.35rem .7rem}
.pagefind-ui__result-link{color:var(--ink);text-decoration:none;
  font-family:'Zilla Slab',serif;font-weight:600}
.pagefind-ui__result-link:hover{color:var(--ochre)}
.pagefind-ui__result-excerpt{font-size:.92rem;color:var(--warmgray)}
.pagefind-ui__filter-panel,.pagefind-ui__filter-name{font-family:'Zilla Slab',serif;
  font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--warmgray)}
.pagefind-ui__result{border-bottom:1px solid var(--hair);padding:.7rem 0}

/* Available to search and screen readers, never shown: attributed authorship
   where the published page carried no byline. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* ---------- post page: article + sticky right rail ---------- */
.postgrid{max-width:var(--wide);margin:0 auto;padding:0 1.25rem;
  display:grid;grid-template-columns:minmax(0,var(--measure)) 300px;
  gap:40px;align-items:start}
/* One column holds article, prev/next and comments, so all three share the
   article's exact left edge and width. The rail column is simply empty below
   the rail. */
.maincol{min-width:0;max-width:var(--measure)}
.postgrid > .maincol > article{max-width:none;margin:0;padding:2.75rem 0 3rem}
.rail{position:sticky;top:24px;padding-top:2.75rem;font-size:.9rem}
.rail h2{font-family:'Zilla Slab',serif;font-weight:600;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--warmgray);
  margin:0 0 .6rem}
.rail-card{border:1px solid var(--hairline);background:var(--parchment);
  padding:16px 18px;margin-bottom:24px}
.prov-line{display:flex;gap:.6rem;padding:.28rem 0;
  border-bottom:1px solid rgba(226,218,203,.75);font-size:.84rem;line-height:1.4}
.prov-line:last-child{border-bottom:none}
.prov-line .k{font-family:'Zilla Slab',serif;font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--warmgray);
  flex:0 0 5.2rem;padding-top:.15rem}
.prov-line .v{color:var(--ink);flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.prov-line .v a{color:var(--ochre);text-decoration:none}
.prov-line .v a:hover{text-decoration:underline}
.rail-nav{display:flex;flex-direction:column;gap:.9rem;margin-bottom:26px;
  border-top:1px solid var(--hairline);padding-top:16px}
.rail-nav .rn{text-decoration:none;display:block}
.rail-nav .lbl{display:block;font-family:'Zilla Slab',serif;font-weight:600;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--warmgray)}
.rail-nav .t{display:block;color:var(--ink);font-size:.92rem;line-height:1.35;
  margin-top:.15rem;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rail-nav .rn:hover .t{color:var(--ochre)}
.rail-nav .idx .t{font-family:'Zilla Slab',serif;font-weight:600;font-size:.84rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ochre)}
.rail-context{border-top:1px solid var(--hairline);padding-top:16px;margin-bottom:26px}
.rail-context ul{list-style:none}
.rail-context li{padding:.28rem 0;font-size:.88rem;line-height:1.35}
.rail-context a{color:var(--ink);text-decoration:none}
.rail-context a:hover{color:var(--ochre)}
.rail-context li.here span{color:var(--warmgray);font-style:italic}
.rail-context li.here{border-left:2px solid var(--ochre);padding-left:.5rem;
  margin-left:-.6rem}
.rail-cats{border-top:1px solid var(--hairline);padding-top:16px}
.rail-cats p{color:var(--warmgray);font-size:.86rem;line-height:1.5}
.rail .flag{margin-bottom:16px;font-size:.78rem}

/* Narrow: rail drops below the article in reading order - provenance card
   first, then navigation, then context. Sticky is released. */
@media (max-width:62rem){
  .postgrid{grid-template-columns:minmax(0,1fr);gap:0}
  .postgrid > article{max-width:var(--measure);margin:0 auto}
  .rail{position:static;padding-top:0;margin:0 auto 2.5rem;
    max-width:var(--measure);width:100%}
}


/* ---------- prev/next bar: between the article and its comments ---------- */
/* Everything below the article shares the ARTICLE column's edges, not the
   wider grid's: article, prev/next, comments and footer are one vertical
   column. The rail is the only thing outside it. */
.prevnext{max-width:none;margin:0;padding:16px 0;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  display:grid;grid-template-columns:1fr auto 1fr;gap:1.25rem;align-items:center}
.prevnext .pn{text-decoration:none;min-width:0}
.prevnext .pn.next{text-align:right}
.prevnext .lbl{display:block;font-family:'Zilla Slab',serif;font-weight:600;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--warmgray)}
.prevnext .t{display:block;color:var(--ink);font-size:.94rem;line-height:1.35;
  margin-top:.15rem;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.prevnext .pn:hover .t{color:var(--ochre)}
.prevnext .idx{font-family:'Zilla Slab',serif;font-weight:600;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ochre);white-space:nowrap}
@media (max-width:34rem){
  .prevnext{grid-template-columns:1fr;gap:.9rem;text-align:left}
  .prevnext .pn.next{text-align:left}
}

/* Align the sub-article blocks to the article column inside the wide wrapper.
   The grid puts the article in a minmax(0,var(--measure)) track starting at the
   container's left padding edge, so matching that width left-aligned keeps every
   edge flush. */
/* Inside .maincol these fill the column exactly - no independent measure. */
.maincol .prevnext,.maincol .comments{max-width:none;margin:0}
.maincol .archive-footer{max-width:none;margin:0;padding:0}


/* ---------- the lobby: dormant until a second publication registers ------- */
.masthead.lobby .brand{font-size:44px}
.lobby-main{max-width:var(--wide);margin:0 auto;padding:2.5rem 1.25rem 4rem}
.lobby-main .summary{margin:0 0 2.4rem}
.lobby-main .summary a{color:var(--ochre)}
.pubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(22rem,1fr));gap:28px}
.pubcard{display:block;text-decoration:none;color:inherit;background:var(--parchment);
  border:1px solid var(--hairline);transition:border-color .12s ease,transform .12s ease}
.pubcard:hover{border-color:var(--ochre)}
.pubcard-mast{display:block;width:100%;height:auto;border-bottom:3px solid var(--ink)}
.pubcard-body{padding:20px 22px 22px}
.pubcard-body h2{font-family:'Zilla Slab',serif;font-weight:700;font-size:28px;
  letter-spacing:-.01em;margin:0;border:none;padding:0;color:var(--ink)}
.pubcard-span{font-family:'Zilla Slab',serif;font-weight:600;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--warmgray);margin:.3rem 0 .9rem}
.pubcard-body p{font-size:.98rem;line-height:1.55;color:var(--ink);margin:0 0 1rem}
.pubcard-meta{font-family:'Zilla Slab',serif;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--warmgray);margin-bottom:1.1rem}
.pubcard-actions{display:flex;gap:.6rem}
.pubcard .btn{font-family:'Zilla Slab',serif;font-weight:600;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;padding:.5rem 1.2rem;
  background:var(--ochre);color:var(--cream);border:1px solid var(--ochre)}
.pubcard .btn.ghost{background:transparent;color:var(--ochre)}
.pubcard:hover .btn{background:var(--ochre-hover);border-color:var(--ochre-hover);color:var(--cream)}
.pubcard:hover .btn.ghost{background:transparent;color:var(--ochre-hover)}
@media (max-width:34rem){ .pubgrid{grid-template-columns:1fr} }

/* Pagefind renders every meta field as a visible list under each result. That
   surfaced a real name beside a deliberately first-name-only byline. The
   result's own provenance line carries what should be shown; nothing else. */
.pagefind-ui__result-inner > .pagefind-ui__result-tags,
.pagefind-ui__result .pagefind-ui__meta,
.pagefind-ui__result ul:not(.pagefind-ui__result-nested){display:none!important}


/* ---------- search: implemented from reference/cd-search-redesign.html -----
   Values taken from the mock's embedded markup. One deviation, ruled by the
   owner and treated as authoritative: the metadata row shows BYLINE (as
   published) only. The mock's AUTHOR field carried a real name beside a
   pseudonym, which is exactly the linkage the pseudonym policy forbids. */
.searchpage{max-width:var(--wide)}
.searchhero{margin:48px 0 0}
.searchnote{font-size:15px;color:var(--warmgray);margin:.7rem 0 0}

.pagefind-ui__form{position:relative}
.pagefind-ui__search-input{
  width:100%;font-family:'Zilla Slab',serif!important;font-size:22px!important;
  padding:18px 24px!important;background:var(--paper)!important;
  border:1px solid #d9d2c4!important;border-radius:0!important;color:var(--ink)!important}
.pagefind-ui__search-input:focus{outline:2px solid var(--ochre);outline-offset:1px}
/* Pagefind's form wraps the input AND the results area, so height:100% on an
   absolutely-positioned clear button stretched it ~1350px down the page as an
   ochre band over the results. Match the input's height instead. */
.pagefind-ui__search-clear{position:absolute;right:0;top:0;height:64.5px;
  font-family:'Zilla Slab',serif;font-weight:600;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;padding:0 28px;border:1px solid var(--ochre);
  background:var(--ochre);color:var(--cream);border-radius:0;cursor:pointer}
.pagefind-ui__search-clear:hover{background:var(--ochre-hover);border-color:var(--ochre-hover)}

/* count line */
.pagefind-ui__results-area{margin-top:0}
.pagefind-ui__message{margin-top:32px;font-family:'Source Serif 4',Georgia,serif;
  font-size:16px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--warmgray);border-bottom:1px solid var(--hairline);padding-bottom:14px}

/* result card */
.pagefind-ui__result{display:flex;flex-direction:column;gap:10px;padding:30px 0;
  border-bottom:1px solid var(--hairline);border-top:none}
.pagefind-ui__result-title{margin:0}
.pagefind-ui__result-link{font-family:'Source Serif 4',Georgia,serif;font-size:24px;
  font-weight:500;color:var(--ink);text-decoration:none;line-height:1.3}
.pagefind-ui__result-link:hover{color:var(--ochre)}
.result-prov{display:block;font-family:'Zilla Slab',serif;font-size:12px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--warmgray)}
.result-prov .sep{color:var(--ochre)}
.pagefind-ui__result-excerpt{font-size:17px;line-height:1.6;color:var(--ink)}
.pagefind-ui__result-excerpt mark{background:#F3DFC2;color:inherit;padding:0 .12em}
/* labelled metadata row */
.result-meta{display:flex;flex-wrap:wrap;column-gap:26px;row-gap:6px;margin-top:4px}
.result-meta .pair{display:flex;gap:8px;align-items:baseline}
.result-meta .k{font-family:'Zilla Slab',serif;font-size:11px;font-weight:600;
  letter-spacing:.22em;color:var(--warmgray)}
.result-meta .v{font-size:15px;color:var(--ink)}

/* filters as dropdowns */
.pagefind-ui__filter-panel{margin:22px 0 0;display:flex;gap:20px;flex-wrap:wrap}
.pagefind-ui__filter-group{border:none!important;padding:0!important;margin:0}
.pagefind-ui__filter-name{font-family:'Zilla Slab',serif;font-weight:600;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--warmgray);
  list-style:none;margin-bottom:6px}
.pagefind-ui__filter-name::-webkit-details-marker{display:none}
.pagefind-ui__filter-name::marker{content:""}
.pagefind-ui__filter-block{display:flex;flex-wrap:wrap;gap:.4rem;
  border:1px solid #d9d2c4;background:var(--paper);padding:8px 10px;max-height:190px;
  overflow-y:auto}
.pagefind-ui__filter-value{display:inline-flex;align-items:center;gap:.35rem;
  font-family:'Zilla Slab',serif;font-size:13px;color:var(--warmgray);cursor:pointer;
  padding:.2rem .5rem;border:1px solid transparent}
.pagefind-ui__filter-value:hover{color:var(--ink)}
.pagefind-ui__filter-value input{accent-color:var(--ochre)}
.pagefind-ui__filter-value:has(input:checked){border-color:var(--ochre);
  background:rgba(192,120,48,.10);color:var(--ink)}

/* empty state - copy verbatim from the mock */
.search-empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:72px 0}
.search-empty .headline{font-family:'Zilla Slab',serif;font-size:26px;font-weight:700;color:var(--ink)}
.search-empty .body{font-size:17px;color:var(--warmgray);line-height:1.6;text-align:center;max-width:380px}
.search-empty .clear{font-family:'Zilla Slab',serif;font-size:13px;font-weight:600;
  letter-spacing:.22em;color:var(--ochre);border-bottom:2px solid var(--ochre);
  padding-bottom:3px;cursor:pointer;margin-top:8px;background:none;border-top:none;
  border-left:none;border-right:none}

/* loading skeleton */
.search-skeleton{display:flex;flex-direction:column;gap:12px;padding:30px 0}
.search-skeleton .row{display:flex;flex-direction:column;gap:10px;padding:22px 0;
  border-bottom:1px solid var(--hairline)}
.search-skeleton .bar{height:20px;background:#EBE3D4}
.search-skeleton .bar.s{height:12px;background:#EBE5DA}
@media (prefers-reduced-motion:no-preference){
  .search-skeleton .bar{animation:sk 1.4s ease-in-out infinite}
  @keyframes sk{0%,100%{opacity:1}50%{opacity:.55}}
}

/* suggestions / corpus line */
#emptystate{margin:2.4rem 0 0;border-top:1px solid var(--hairline);padding-top:1.6rem}
#emptystate .corpus{font-family:'Zilla Slab',serif;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--warmgray);margin:0 0 1.4rem}
#emptystate h2{font-family:'Zilla Slab',serif;font-weight:600;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--warmgray);
  border:none;margin:0 0 .7rem;padding:0}
.suggest{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin:0}
.suggest a{font-size:17px;color:var(--ochre);text-decoration:none;
  border-bottom:1px solid rgba(192,120,48,.35);padding-bottom:1px}
.suggest a:hover{border-bottom-color:var(--ochre)}


/* ---------- compact header: interior working pages -----------------------
   Values from the CD bundle: 30px/700 wordmark, nav 13px/600 at 0.24em with
   32px gaps, 5px ink rule 14px beneath. The stacked masthead stays on the
   index. */
.compact{max-width:var(--wide);margin:0 auto;padding:56px 1.25rem 0;
  display:flex;align-items:baseline;justify-content:space-between;gap:2rem;
  font-family:'Zilla Slab',serif}
.compact .brand{font-size:30px;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.compact .brand span{color:var(--ochre)}
.compact nav{display:flex;gap:32px;font-size:13px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase}
.compact nav a{color:var(--warmgray);text-decoration:none;padding-bottom:3px;
  border-bottom:2px solid transparent}
.compact nav a:hover{color:var(--ink)}
.compact nav a.on{color:var(--ochre);border-bottom-color:var(--ochre)}
.heritage-rule{max-width:var(--wide);margin:14px auto 0;height:5px;
  background:var(--ink)}
@media (max-width:40rem){
  .compact{flex-direction:column;align-items:flex-start;gap:.9rem}
  .compact nav{gap:20px}
}

/* ---------- search page frame: full content column ----------------------- */
main.prose.searchpage{max-width:var(--wide)}
.searchhero{margin:36px 0 0}
.pagefind-ui__search-input{font-family:Georgia,'Source Serif 4',serif!important;
  font-size:19px!important;padding:15px 20px!important;border-right:none!important}
/* Pin to the input's height. Anything that resolves to full height - height:100%
   or top:0 with bottom:0 - stretches this into an ochre column over the results,
   because Pagefind's form wraps the input AND the result list. */
.pagefind-ui__search-clear{top:0;bottom:auto;height:53.5px;font-size:14px;
  letter-spacing:.22em;padding:0 32px}
/* Pagefind's own filter panel is replaced by real dropdowns (see filterrow). */
.pagefind-ui__filter-panel{display:none!important}
/* filter row: labelled controls on one line, per the mock */
.pagefind-ui__filter-panel{display:flex;gap:28px;align-items:flex-start;
  margin-top:20px;font-family:'Zilla Slab',serif;flex-wrap:wrap}
.pagefind-ui__filter-group{display:flex;gap:10px;align-items:baseline}
.pagefind-ui__filter-name{font-size:12px;font-weight:600;letter-spacing:.24em;
  color:var(--warmgray);margin:0;white-space:nowrap}
.pagefind-ui__filter-block{font-family:Georgia,'Source Serif 4',serif;font-size:16px;
  color:var(--ink);background:var(--paper);border:1px solid #D9D2C4;padding:6px 10px;
  display:flex;flex-wrap:wrap;gap:.35rem;max-height:170px;overflow-y:auto;
  min-width:11rem}


/* ---------- filter dropdowns, load-more, chips, footer, back-to-top -------- */
.filterrow{display:flex;gap:32px;align-items:center;margin-top:20px;flex-wrap:wrap}
.filterpair{display:flex;gap:10px;align-items:center}
.filterpair .k{font-family:'Zilla Slab',serif;font-size:11px;font-weight:600;
  letter-spacing:.22em;color:var(--warmgray)}
.filtersel{font-family:'Zilla Slab',serif;font-size:15px;color:var(--ink);
  background-color:var(--paper);border:1px solid #D9D2C4;padding:10px 34px 10px 14px;
  border-radius:0;-webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C07830' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.filtersel:focus{outline:2px solid var(--ochre);outline-offset:1px}

/* load more: a designed action, not a form control */
.pagefind-ui__button{display:block;width:100%;margin:26px 0 0;
  font-family:'Zilla Slab',serif;font-size:13px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ochre);background:var(--parchment);
  border:1px solid var(--hairline);border-radius:0;padding:18px 24px;cursor:pointer}
.pagefind-ui__button:hover{color:var(--ink);background:#efe7d8}

/* empty-state chips */
.suggest a{font-family:'Zilla Slab',serif;font-size:14px;color:var(--ochre);
  text-decoration:none;border:1px solid var(--hairline);background:var(--parchment);
  padding:6px 14px;display:inline-block}
.suggest a:hover{background:#efe7d8;color:var(--ink)}
.scopenote{font-size:14px;color:var(--warmgray);margin:.4rem 0 1.4rem}

/* sitewide footer */
.sitefoot{max-width:var(--wide);margin:64px auto 0;padding:0 1.25rem 56px;
  border-top:6px solid var(--ink)}
.sitefoot .desc{font-size:16px;line-height:1.6;color:var(--warmgray);
  max-width:560px;margin:26px 0 16px}
.sitefoot .links{display:flex;gap:26px;margin:0 0 22px}
.sitefoot .links a{font-family:'Zilla Slab',serif;font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ochre);text-decoration:none}
.sitefoot .links a:hover{color:var(--ochre-hover);text-decoration:underline}
.sitefoot .metarow{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-size:14px;color:var(--warmgray);border-top:1px solid var(--hairline);padding-top:16px}
.sitefoot .metarow a{color:var(--ochre);text-decoration:none}
.sitefoot .metarow a:hover{text-decoration:underline}
.sitefoot .sep{color:var(--ochre)}

/* back to top */
.totop{position:fixed;right:24px;bottom:24px;width:46px;height:46px;border-radius:50%;
  background:var(--parchment);border:1px solid var(--hairline);color:var(--ochre);
  font-size:24px;font-weight:700;line-height:1;cursor:pointer;opacity:0;
  pointer-events:none;display:flex;align-items:center;justify-content:center;
  transition:opacity .18s ease;z-index:50}
.totop.on{opacity:1;pointer-events:auto}
.totop:hover{background:#efe7d8;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.totop{transition:none}}

/* ------------------------------------------------------------ author pages
   Measurements taken from the CD author-page mock: a 780px column inside the
   wider frame, a 120px initials disc, the four-cell stat band ruled 3px above
   and hairline below, and year headings that reuse the index's heavy rule. */
/* Editor ruling: the author surfaces run the index's 1080 column, overriding
   the mock's 780. Site consistency wins. main.prose's 44rem reading measure
   still has to be outranked. */
main.prose.authorpage,main.prose.authorshub{max-width:var(--wide)}

.authhead{display:flex;align-items:center;gap:32px;margin:48px 0 0}
.avatar{width:120px;height:120px;flex:none;border-radius:50%;
  background:var(--skeleton);color:var(--ink);display:flex;align-items:center;
  justify-content:center;font-family:'Zilla Slab',serif;font-weight:700;
  font-size:44px;line-height:1;letter-spacing:.02em}
.authorpage .authhead h1{font-family:'Zilla Slab',serif;font-size:44px;font-weight:700;
  line-height:1;margin:0}
.postedas-line{font-size:16px;font-style:italic;color:var(--warmgray);margin:8px 0 0}

.statband{display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px;
  border-top:3px solid var(--ink);border-bottom:1px solid var(--hairline)}
/* 20px of clear air before the divider rule; without it the numbers
   touch the hairline in the narrower cells */
.statband .stat{padding:22px 20px 20px 0;border-right:1px solid var(--hairline)}
.statband .stat+.stat{padding-left:20px}
.statband .stat:last-child{border-right:none}
.statband .k{font-family:'Zilla Slab',serif;font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--warmgray)}
.statband .v{font-family:'Zilla Slab',serif;font-size:27px;font-weight:700;
  line-height:1;margin:6px 0;white-space:nowrap}
.statband .s{font-size:14px;color:var(--warmgray)}

.yeargroup{margin:0}
.yearhead{display:flex;align-items:baseline;justify-content:space-between;
  margin-top:56px;border-bottom:3px solid var(--ink);padding-bottom:10px}
.authorpage .yearhead h2{font-family:'Zilla Slab',serif;font-size:34px;font-weight:700;
  line-height:1;margin:0}
.yearhead span{font-family:'Zilla Slab',serif;font-size:13px;font-weight:600;
  letter-spacing:.24em;color:var(--warmgray)}
.arows{list-style:none;margin:0;padding:0}
.arows li{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:16px 0;border-bottom:1px solid var(--hairline)}
.authorpage .arows a{font-size:20px;font-weight:500;color:var(--ink);text-decoration:none}
.authorpage .arows a:hover{color:var(--ochre);text-decoration:underline}
.arows .meta{display:flex;align-items:baseline;gap:16px;white-space:nowrap}
.arows .era{font-family:'Zilla Slab',serif;font-size:12px;font-weight:600;
  letter-spacing:.18em;color:var(--ochre)}
.arows .d{font-size:15px;color:var(--warmgray)}

/* hub */
.authorshub .lede{font-size:18px;color:var(--warmgray);margin:0 0 32px}
.authgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--hairline);border:1px solid var(--hairline);margin:0 0 56px}
.authcard{display:flex;align-items:center;gap:18px;padding:22px 20px;
  background:var(--paper);text-decoration:none;color:inherit}
.authcard:hover{background:var(--parchment)}
.authcard .avatar{width:56px;height:56px;font-size:20px}
.authcard .who{display:flex;flex-direction:column;gap:3px;min-width:0}
.authorshub .authcard .n{font-family:'Zilla Slab',serif;font-size:21px;font-weight:700;
  line-height:1.15;color:var(--ink)}
.authcard:hover .n{color:var(--ochre)}
.authcard .alias{display:block;font-size:13px;font-style:italic;color:var(--warmgray)}
/* an unlinked card is the same object without the affordance */
.authcard.nolink{cursor:default}
.authcard.nolink:hover{background:var(--paper)}
.authcard.nolink:hover .n{color:var(--ink)}
.authcard .c{font-size:14px;color:var(--warmgray)}
.authcard .sep{color:var(--ochre)}


@media (max-width:760px){
  .statband{grid-template-columns:1fr 1fr}
  .statband .stat:nth-child(2n){border-right:none}
  .authgrid{grid-template-columns:1fr}
  .authhead{gap:20px}
  .avatar{width:88px;height:88px;font-size:32px}
  .authhead h1{font-size:34px}
  .arows li{flex-direction:column;gap:6px}
}



.authorshub .others{font-size:16px;line-height:1.7;color:var(--warmgray);
  margin:36px 0 0;max-width:70ch}
.authorshub .others .sep{color:var(--ochre)}

/* 5. back to top: fade + rise in, reverse on hide, gentle lift on hover */
.totop{transform:translateY(8px) scale(.96);
  transition:opacity .2s ease,transform .2s ease,background .18s ease,color .18s ease}
.totop.on{transform:translateY(0) scale(1)}
.totop:hover{transform:translateY(0) scale(1.08)}
.totop:active{transform:translateY(0) scale(1.02)}
@media (prefers-reduced-motion:reduce){
  .totop,.totop.on,.totop:hover,.totop:active{transition:none;transform:none}
}

/* editor-supplied attribution in the index column: italic, quieter than a
   byline the site actually printed */
.index .by .attributed,.by .attributed{font-style:italic;color:var(--warmgray)}

/* the arrow itself lifts on hover - a hint, not a bounce */
.totop .arw{display:block;line-height:1;transform:translateY(0);
  transition:transform .22s ease-in-out}
.totop:hover .arw{animation:nudge 1.1s ease-in-out infinite}
@keyframes nudge{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){
  .totop:hover .arw{animation:none}
  .totop .arw{transition:none}
}

/* Author-card tiers: four doors, eight plaques. A card that links says so -
   ink name, a "View posts" line, a hover that responds. A card that does not
   link is deliberately quieter, so eight non-links never read as eight broken
   links. The unlinked cards stay unlinked: the privacy ruling forbids an
   aggregation page for a protected identity. */
.authorshub .authcard .n{color:var(--ink)}
.authcard .go{display:block;margin-top:7px;font-family:'Zilla Slab',serif;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ochre);opacity:.85;transition:opacity .16s ease,transform .16s ease}
a.authcard{cursor:pointer;transition:background .16s ease,box-shadow .16s ease}
a.authcard:hover{background:var(--parchment);box-shadow:inset 0 0 0 1px var(--edge)}
a.authcard:hover .go{opacity:1;transform:translateX(3px)}
a.authcard:hover .n{color:var(--ochre)}

.authorshub .authcard.nolink{cursor:default;background:var(--cream)}
.authorshub .authcard.nolink .n{color:var(--warmgray);font-weight:600}
.authorshub .authcard.nolink .avatar{background:#efe9dc;color:var(--warmgray)}
.authorshub .authcard.nolink:hover{background:var(--cream);box-shadow:none}
.authorshub .authcard.nolink:hover .n{color:var(--warmgray)}
@media (prefers-reduced-motion:reduce){
  .authcard .go,a.authcard{transition:none}
  a.authcard:hover .go{transform:none}
}

/* About and What-is-missing run the 1080 standard */
main.prose.aboutpage,main.prose.lossespage{max-width:var(--wide)}
.aboutpage .draftnote{margin-top:34px;padding-top:16px;border-top:1px solid var(--hairline);
  font-style:italic;color:var(--warmgray)}
.recovery-call.lead{margin:26px 0 34px;padding:20px 22px;background:var(--parchment);
  border-left:5px solid var(--ochre);font-size:17px;line-height:1.65}

/* The commentariat: kin to the author cards above it, not a list that
   wandered in. Every selector carries .commentariat because main.prose ul/li
   (0,1,2) outranks a bare class and was re-imposing the prose indent. */
main.prose .commentariat{margin-top:60px}
main.prose .commentariat h2{font-family:'Zilla Slab',serif;font-size:26px;font-weight:700;
  line-height:1;margin:0 0 14px;padding-bottom:10px;border-bottom:3px solid var(--ink)}
main.prose .commentariat .lede{font-size:16px;color:var(--warmgray);margin:0 0 22px}
main.prose .commentariat .cvoices{list-style:none;margin:0;padding:0;
  display:grid;grid-auto-flow:column;grid-template-columns:1fr 1fr;
  column-gap:56px}
main.prose .commentariat .cvoices li{display:flex;align-items:baseline;
  justify-content:space-between;gap:20px;margin:0;padding:11px 0;
  border-bottom:1px solid var(--hairline)}
main.prose .commentariat .cvoices .h{font-family:'Zilla Slab',serif;font-size:17px;
  font-weight:500;color:var(--ink)}
main.prose .commentariat .cvoices .n{font-size:15px;color:var(--warmgray);
  white-space:nowrap;text-align:right}
main.prose .commentariat .note{margin:20px 0 0;font-size:14px;font-style:italic;
  color:var(--warmgray)}
@media (max-width:700px){
  main.prose .commentariat .cvoices{grid-auto-flow:row;grid-template-columns:1fr;
    grid-template-rows:none !important}
}

/* the preview caveat: one quiet line, not a banner */
.sitefoot .previewnote{font-size:14px;font-style:italic;color:var(--warmgray);
  margin:0 0 14px}
.aboutpage .marknote{font-size:14px;font-style:italic;color:var(--ochre);margin:6px 0 0}

/* support tab: fixed to the right edge, rotated, quiet */
.supporttab{position:fixed;right:0;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;text-orientation:mixed;
  background:var(--parchment);border:1px solid var(--hairline);border-right:0;
  border-radius:6px 0 0 6px;color:var(--ochre);text-decoration:none;
  font-family:'Zilla Slab',serif;font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;padding:16px 7px;z-index:60;
  transition:background .18s ease,color .18s ease}
.supporttab:hover{background:var(--highlight,#f3dfc2);color:var(--ink)}
@media print{.supporttab,.totop{display:none}}
@media (max-width:700px){.supporttab{display:none}}

/* avatar overrides */
.avatar.glyph-heart{font-family:'Zilla Slab',serif;font-size:44px;line-height:1;
  color:var(--ink);padding-bottom:4px}
.authcard .avatar.glyph-heart{font-size:24px;padding-bottom:2px}
.avatar.has-img{padding:0;overflow:hidden}
.avatar.has-img img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* the site describing its own writers, quoted on their pages */
main.prose .snapshots{margin:34px 0 8px}
main.prose .snapshots h2{font-family:'Zilla Slab',serif;font-size:20px;font-weight:700;
  margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--hairline)}
main.prose.tombstone{max-width:var(--measure)}

/* editor's note on attribution - one component, every author page that has one */
main.prose .editnote{margin:36px 0;padding:20px 22px;background:var(--paper);
  border-left:3px solid var(--ochre)}
main.prose .editnote .lbl{margin:0 0 8px;font-family:'Zilla Slab',serif;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--warmgray);font-style:normal}
main.prose .editnote p{margin:0;font-style:italic;font-size:15px;line-height:1.7;
  color:var(--warmgray);max-width:70ch}
/* consistent rhythm: stats band -> note -> snapshots */
main.prose .statband{margin-bottom:0}
main.prose .snapshots{margin:36px 0 8px}
@media (max-width:700px){
  main.prose .editnote{padding:16px 16px;margin:28px 0}
  main.prose .aboutsnap{padding:14px 16px}
}

/* quote boxes and the editor's note share one treatment */
main.prose .aboutsnap{margin:0 0 20px;padding:20px 22px;background:var(--paper);
  border-left:3px solid var(--ochre)}
main.prose .aboutsnap p{margin:0;font-size:16px;line-height:1.7;color:var(--ink);
  max-width:70ch}
main.prose .aboutsnap .lbl{margin:0 0 10px;font-family:'Zilla Slab',serif;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--warmgray);line-height:1.5}
main.prose .snapshots{margin:36px 0 0}
main.prose .snapshots h2{margin-bottom:16px}
main.prose .snapshots+.yeargroup .yearhead,
main.prose .editnote+.yeargroup .yearhead{margin-top:36px}

.sitefoot .supportline{font-size:15px;color:var(--warmgray);margin:0 0 20px}
.sitefoot .supportline a{color:var(--ochre);text-decoration:none}
.sitefoot .supportline a:hover{text-decoration:underline}