/* 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 */
  --para:1.5rem; --rhythm:2rem;   /* body paragraph step; section step */
  --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}

/* One spacing value for body prose, from the token scale. Recovered posts
   carry four content management systems' worth of paste artifacts; the
   display gives all of them the same rhythm. .blankline is applied at render
   time to whitespace-only paragraphs and to the second and later <br> in a
   run - the record keeps them, the page does not show them. See
   normalise_display_rhythm(). */
.post-body p{margin:0 0 var(--para)}
.post-body p.blankline,.post-body br.blankline{display:none}
/* A run of <br> was the paragraph break in the eras with no <p>. The run
   collapses to one paragraph step rather than to nothing. */
.post-body br.parabreak{display:block;content:"";height:0;margin-bottom:var(--para)}
/* Word paste sets its own margins inline on every paragraph; the display
   scale has to outrank the paste, or the rhythm is whatever 2014 Word chose. */
.post-body p[class*="Mso"],.post-body p[style]{margin:0 0 var(--para)!important}
.post-body h2,.post-body h3{font-family:'Zilla Slab',serif;
  margin:var(--rhythm) 0 .6rem;line-height:1.25}
.post-body ul,.post-body ol{margin:0 0 var(--para) 1.4rem}
.post-body li{margin-bottom:.4rem}
.post-body blockquote{border-left:3px solid var(--warmgray);padding-left:1rem;
  margin:var(--rhythm) 0;color:var(--warmgray)}
.post-body a{color:var(--ochre)}
.post-body .missing-image{margin:var(--rhythm) 0}
.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:var(--rhythm) 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-family:'Source Serif 4',Georgia,serif;font-size:16px;
  font-weight:400;color:var(--warmgray);margin:14px 0 0;line-height:1.5}

/* The sitewide footer that used to live here - a cream band with two ragged
   small-caps rows - was replaced wholesale by CD's dark footer. Its rules were
   dead weight overridden later in the file by source order, which is exactly
   the kind of thing that survives a year and then wins an argument after an
   unrelated edit reorders the file. Deleted rather than commented. */

/* Back to top. One component at every width - it was already fixed-position
   sitewide; what changed is the glyph colour and the gutter guarantee.
   Ochre #c07830 on parchment measures 3.02:1, which clears AA only by
   treating a 24px bold arrow as large text and clears it by 0.02. The darker
   ochre-text reads 4.26:1 and passes as body text, so the margin stops
   depending on how a checker classifies a glyph. */
.totop{position:fixed;bottom:24px;width:46px;height:46px;border-radius:50%;
  /* Never over the reading column. Past 1128px there is real gutter and the
     button sits in it; below that it tucks to the viewport edge, where the
     content's own 1.25rem padding still keeps it off the text. */
  right:max(16px, calc((100vw - var(--wide)) / 2 - 58px));
  background:var(--parchment);border:1px solid var(--hairline);
  color:var(--ochre-text);
  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}

/* 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;
  font-variant-emoji:text;
  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 */
/* 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 .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}

/* ==========================================================================
   MOBILE. Verified at 390px against the live site, where the index scrolled
   sideways to 545px: li.post is a flex row and a long title cannot shrink
   below its longest word run, so one 2009 headline set the width of the whole
   document. Everything here is written narrowest-first-safe.
   ========================================================================== */
@media (max-width:40rem){
  /* --- overflow: nothing may exceed the viewport ------------------------ */
  html,body{overflow-x:hidden}
  li.post{flex-wrap:wrap;gap:.35rem .7rem;padding:14px .4rem}
  li.post .title{flex:1 1 100%;min-width:0;font-size:18px;line-height:1.4}
  li.post .title a{overflow-wrap:anywhere}
  li.post .date{flex:0 0 auto;font-size:15px}
  li.post .meta{flex:1 1 auto;justify-content:flex-start;gap:.5rem}
  li.post .era{flex:0 0 auto;text-align:left;font-size:.72rem}

  /* --- nav: one row, evenly spaced, never a half-wrapped pile ----------- */
  nav.top{padding:14px .5rem;display:flex;justify-content:space-between;
    gap:0;overflow:visible}
  nav.top a{margin:0;flex:1 1 0;text-align:center;font-size:11px;
    letter-spacing:.06em;padding:11px 2px;min-height:44px;
    display:flex;align-items:center;justify-content:center}
  header.compact{flex-direction:column;align-items:stretch;gap:6px;
    padding:22px 1rem 0}
  header.compact .brand{font-size:22px}
  header.compact nav{display:flex;justify-content:space-between;gap:0}
  header.compact nav a{flex:1 1 0;text-align:center;font-size:11px;
    letter-spacing:.06em;min-height:44px;display:flex;align-items:center;
    justify-content:center;padding:0 2px}

  /* --- histogram: abbreviated years, guaranteed gaps -------------------- */
  .histogram{gap:3px;margin-top:34px;padding:0 .25rem}
  .histogram .bar{min-width:0;padding-bottom:2px}
  .histogram .n{font-size:10px;letter-spacing:0}
  .histogram .yr{font-size:12px;letter-spacing:0}
  /* '06 rather than 2006 - the century is not the information */
  .histogram .yr{font-size:0}
  .histogram .yr::after{content:"’" attr(data-short);font-size:12px}
  /* the whole column is the tap target, not just the bar */
  .histogram .bar{min-height:44px;justify-content:flex-end}

  /* --- search --------------------------------------------------------- */
  .pagefind-ui__form{display:block}
  .pagefind-ui__search-input{width:100%;font-size:16px}
  .pagefind-ui__search-clear{position:static;width:100%;margin-top:8px}
  #filterrow{flex-direction:column;align-items:stretch;gap:8px}
  #filterrow .filterpair{width:100%}
  #filterrow .filtersel{width:100%;min-height:44px}
  .suggest{display:flex;flex-wrap:wrap;gap:8px}
  .suggest li{margin:0}

  /* --- tap targets ------------------------------------------------------ */
  .sitefoot .links a,.sitefoot .supportline a,.suggest a{
    display:inline-block;min-height:44px;line-height:44px}
  .totop{right:14px;bottom:14px}
}

/* The boxes used to span the full 1040px content column while their text
   stopped at 70ch, which left a large empty region on the right and made the
   copy look shoved into a corner. The MEASURE now belongs to the box: it ends
   where the text ends. Left-anchored to the content edge, never centred, so
   the boxes still line up with the stats band and the year headings. */
main.prose .editnote,

/* ---- mobile index rows: one metadata line, never an orphan separator ----
   Below 40rem the older rules hid .by and .era but left the QA badge, so each
   row rendered a lone ochre dot under its title. The badge is editor chrome;
   it goes. Author and platform return as a single line, and the separator is
   generated BETWEEN them so it cannot exist without both. */
@media (max-width:40rem){
  li.post .meta{flex:1 1 100%;justify-content:flex-start;gap:0;
    font-size:.8rem;line-height:1.5}
  li.post .by{display:inline;font-style:italic;color:var(--warmgray)}
  li.post .era{display:inline;text-align:left;color:var(--warmgray);
    font-size:.72rem;letter-spacing:.06em}
  li.post .by + .era::before{content:"\00B7";margin:0 .45em;color:var(--ochre);
    letter-spacing:0}
  li.post .badge,li.post .badge-slot,li.post .badge.flagged{display:none}
}

/* ---- mobile search row: input and button share the margin ---------------
   The button sat outside the content margin because the form was not a flex
   row and the input took 100% of a box that already held the button. */
@media (max-width:48rem){
  .pagefind-ui *,.searchhero *{box-sizing:border-box}
  .pagefind-ui__form{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  .pagefind-ui__search-input{flex:1 1 0;min-width:0;width:auto;height:48px;
    font-size:16px}
  .pagefind-ui__search-clear{position:static;flex:0 0 auto;width:auto;
    height:48px;margin:0;padding:0 16px;white-space:nowrap}
}
@media (max-width:22.5rem){
  /* below 360px the button will not sit beside the input without crowding it,
     so it stacks full width underneath */
  .pagefind-ui__search-input{flex:1 1 100%}
  .pagefind-ui__search-clear{flex:1 1 100%;width:100%}
}

/* ---- homepage stats band + census line ---------------------------------- */
main.index .indexband{margin:40px 0 0;border-top:3px solid var(--ink);
  border-bottom:1px solid var(--hairline);grid-template-columns:repeat(3,1fr)}
main.index .censusline{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:0;margin:16px 0 0;font-size:13px;color:var(--warmgray)}
main.index .censusline .pf{white-space:nowrap}
main.index .censusline .p{font-family:'Zilla Slab',serif;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase}
main.index .censusline .c{font-variant-numeric:tabular-nums}
main.index .censusline .sep{color:var(--ochre);margin:0 .7em}
@media (max-width:40rem){
  main.index .indexband{grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--hairline);margin-top:24px}
  main.index .indexband .stat{padding:14px 8px 12px 0}
  main.index .indexband .stat+.stat{padding-left:8px}
  main.index .indexband .v{font-size:20px}
  main.index .indexband .k{font-size:9px;letter-spacing:.14em}
  main.index .censusline{font-size:12px}
  main.index .censusline .sep{margin:0 .5em}
}
@media (max-width:22.5rem){
  main.index .indexband{grid-template-columns:1fr}
  main.index .indexband .stat{border-right:none;padding-left:0}
  main.index .indexband .stat+.stat{border-top:1px solid var(--hairline);padding-left:0}
}



/* ==========================================================================
   SEARCH FORM, mobile first, inside the unified container.
   CLEAR was a full-width 48px ochre block - the largest object on the page -
   while the filters floated at 201px beside each other. Search is primary,
   Clear is a quiet text link, filters stack full width.
   ========================================================================== */
.pagefind-ui__form{display:block;width:100%}
.pagefind-ui__search-input{display:block;width:100%;height:48px;font-size:16px;
  box-sizing:border-box}
.searchactions{display:flex;align-items:center;gap:16px;margin:10px 0 0}
.searchactions .searchgo{flex:0 0 auto;min-height:44px;padding:0 22px;
  background:var(--ochre);color:#fff;border:0;border-radius:2px;cursor:pointer;
  font-family:'Zilla Slab',serif;font-size:13px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase}
.searchactions .searchgo:hover{background:var(--ochre-hover)}
/* Clear: a quiet text link, never a block */
.pagefind-ui__search-clear.quiet{position:static!important;width:auto!important;
  height:auto!important;min-height:44px;margin:0!important;padding:0!important;
  background:none!important;border:0!important;color:var(--warmgray)!important;
  font-family:inherit!important;font-size:14px!important;letter-spacing:0!important;
  text-transform:none!important;text-decoration:underline;cursor:pointer;
  display:inline-flex;align-items:center}
.pagefind-ui__search-clear.quiet:hover{color:var(--ochre)!important}

/* filters: label above select, stacked, full width */
#filterrow{display:flex;flex-direction:column;gap:14px;width:100%;margin:18px 0 0}
#filterrow .filterpair{display:flex;flex-direction:column;gap:5px;width:100%}
#filterrow .filterpair .k{font-family:'Zilla Slab',serif;font-size:11px;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--warmgray)}
#filterrow .filtersel{width:100%;min-height:44px;box-sizing:border-box}

@media (min-width:48rem){
  /* desktop: input and buttons on one row, filters side by side beneath */
  .pagefind-ui__form{display:flex;align-items:center;gap:12px}
  .pagefind-ui__search-input{flex:1 1 auto;width:auto}
  .searchactions{margin:0;flex:0 0 auto;order:2}
  #filterrow{flex-direction:row;flex-wrap:wrap;gap:24px}
  #filterrow .filterpair{width:auto;min-width:220px;flex:0 1 auto}
}

/* ==========================================================================
   MOBILE HEADER & MENU - Claude Design's spec, integrated.
   Reference: design/Archive Mobile Header.dc.html
   CD's tokens differ from the live site's in three places; live tokens win
   and the differences are logged in design/DESIGN.md.
   Breakpoint is CD's 720px, not my earlier 640: five items at 13px/+24%
   tracking need ~430px plus the wordmark, which is why the fifth clipped.
   ========================================================================== */
.hdr-sentinel{height:0}
header.masthead .wordmarkrow,header.compact .wordmarkrow{display:contents}
.menubtn{display:none}

@media (max-width:44.9375rem){         /* <=719px */
  /* NOT sticky. It was, from before the promoted-bar model existed, and that
     is why the mobile bar never engaged: the trigger asks whether the in-page
     nav has left the viewport, and a pinned header means it never does. The
     nav sat at bottom:56 at every scroll depth, so the threshold could not
     cross zero on any page. The header now scrolls away like everything else
     and the promoted bar takes over, which is the model the editor specified
     for both breakpoints. */
  header.masthead,header.compact{position:static;z-index:100;
    background:var(--cream);max-width:none;padding:0;margin:0;
    display:block;border-bottom:4px solid var(--ink);
    transition:border-bottom-width .16s ease}

  /* One rule at the top, not two. The header carries a 4px ink border AND the
     page emits a separate 5px heritage rule 14px below it, so mobile showed
     two black bars with a cream stripe between them. The header's own border
     is the rule at this width. */
  .heritage-rule{display:none}
  header.masthead .wordmarkrow,header.compact .wordmarkrow{
    display:flex;align-items:center;justify-content:space-between;
    height:56px;padding:0 16px;box-sizing:border-box;
    transition:height .16s ease}
  header.masthead .brand,header.compact .brand{font-family:'Zilla Slab',serif;
    font-size:clamp(20px,6.5vw,24.5px);font-weight:700;color:var(--ink);
    text-decoration:none;
    letter-spacing:-.015em;margin:0;white-space:nowrap;
    transition:font-size .16s ease}

  /* scrolled compression: 56->48, 24.5->22, rule 4->3 */
  header.masthead.stuck .wordmarkrow,header.compact.stuck .wordmarkrow{height:48px}
  header.masthead.stuck .brand,header.compact.stuck .brand{
    font-size:clamp(18px,5.9vw,22px)}
  header.masthead.stuck,header.compact.stuck{border-bottom-width:3px}

  /* the word-button, not a hamburger */
  .menubtn{display:flex;align-items:center;justify-content:center;
    min-width:44px;height:44px;margin-right:-10px;background:none;border:0;
    cursor:pointer;padding:0}
  .menubtn .lbl{font-family:'Zilla Slab',serif;font-size:14px;font-weight:600;
    letter-spacing:.22em;text-transform:uppercase;color:var(--ochre);
    border-bottom:2px solid var(--ochre);padding-bottom:2px;text-indent:.22em}
  header.menu-open .menubtn .lbl{color:var(--ink);border-bottom-color:var(--ink)}

  /* the menu: push-down, in flow, no overlay */
  header.masthead nav.top,header.compact nav{display:flex;flex-direction:column;
    max-width:none;margin:0;padding:0;border:0;overflow:hidden}
  header.js nav.top,header.compact.js nav{max-height:0;
    transition:max-height .16s ease-out}
  header.js.menu-open nav.top,header.compact.js.menu-open nav{max-height:340px;
    border-bottom:4px solid var(--ink)}
  header.masthead nav.top a,header.compact nav a{display:flex;align-items:center;
    justify-content:space-between;height:52px;min-height:52px;padding:0 16px;
    margin:0;text-decoration:none;border-bottom:1px solid var(--hairline);
    font-family:'Zilla Slab',serif;font-size:14px;font-weight:600;
    letter-spacing:.24em;text-transform:uppercase;color:var(--ink);flex:0 0 auto}
  header.masthead nav.top a:last-child,header.compact nav a:last-child{border-bottom:0}
  /* current page: ochre label plus the underline convention as a row rule */
  header.masthead nav.top a[aria-current],header.compact nav a.on{color:var(--ochre)}
  header.masthead nav.top a[aria-current]::after,header.compact nav a.on::after{
    content:"";width:24px;height:2px;background:var(--ochre)}

  /* index photo and tagline become page content below the rule */
  header.masthead .site-label{order:9;text-align:center;font-style:italic;
    font-size:15px;color:var(--warmgray);padding:20px 16px;margin:0}
  header.masthead hr{display:none}
  header.masthead.menu-open ~ main,header.compact.menu-open ~ main{opacity:.35}
  main{transition:opacity .16s ease}
}
@media (prefers-reduced-motion:reduce){
  header.js nav.top,header.compact.js nav,main,
  header.masthead .wordmarkrow,header.compact .wordmarkrow{transition:none}
}
/* ---- author page: the bio stack, one shared component -------------------
   Four gaps, and they are a spec rather than taste. The stats band used to
   sit flush against the bio on every author except Jeff, and the quote,
   its attribution and the editor's note ran into each other with no gap at
   all - three different voices with nothing between them.

     band  -> bio            one full unit
     bio   -> quote          one full unit  (different speaker, full step)
     quote -> attribution    half unit, attached: the cite belongs to the
                             quote above it and must not float free
     last  -> editor's note  one full unit
     note  -> year heading   one full unit

   Set on .authorpage so every bio'd author moves together; nothing here is
   per-author. */
main.prose.authorpage{--gap-unit:32px; --gap-half:14px}
main.prose .authorbio{margin:var(--gap-unit) 0 0;font-size:17px;
  /* matches the post-body reading measure - a bio is prose and should feel
     like the prose it introduces, not like a caption */
  line-height:1.65;color:var(--ink)}
main.prose.authorpage .statband + .aboutsnap,
main.prose.authorpage .statband + .editnote{margin-top:var(--gap-unit)}
main.prose.authorpage .authorbio + .aboutsnap{margin-top:var(--gap-unit)}
main.prose.authorpage .aboutsnap + .editnote,
main.prose.authorpage .authorbio + .editnote{margin-top:var(--gap-unit)}
main.prose.authorpage .aboutsnap + .yeargroup .yearhead,
main.prose.authorpage .authorbio + .yeargroup .yearhead,
main.prose.authorpage .editnote + .yeargroup .yearhead{margin-top:var(--gap-unit)}
/* The quote's own paragraph margin (17.6px) was larger than the half step and
   won the adjacency, so the attribution floated at a near-full gap however the
   half step was specified. The paragraph gives up its bottom margin; the cite
   sets the distance. */
/* ---- three voices on an author page -------------------------------------
   A reader scanning the page has to be able to tell where the archive stops
   speaking and the site starts, without reading a word. Three speakers, three
   treatments, and the distinctions are structural rather than decorative:

     BIO            the archive's voice. Plain body text at the content edge.
                    No rule, no indent, no italics - the default voice needs
                    no marking, and marking it would flatten the contrast the
                    other two depend on.
     ABOUT QUOTE    the site's own voice, quoted. Indented one step behind a
                    2px ochre rule, attribution attached beneath it.
     EDITOR'S NOTE  the archive talking about its own method. A small-caps
                    label naming it, a thin ochre rule, italic body - lighter
                    than the quote because it is an aside, not testimony.

   These lost their treatments in the typography-not-panels pass, which
   removed the panels and the distinctions with them. */
main.prose.authorpage .aboutsnap{border-left:2px solid var(--ochre);
  padding:2px 0 2px var(--gap-unit);margin-left:0;font-style:normal}
main.prose.authorpage .editnote{border-left:1px solid var(--ochre);
  padding:2px 0 2px var(--gap-unit);background:none}
main.prose.authorpage .editnote p{font-style:italic;color:var(--warmgray)}
main.prose.authorpage .editnote .lbl{font-family:'Zilla Slab',serif;
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  font-style:normal;color:var(--ochre-text);margin:0 0 10px}
main.prose .aboutsnap p:last-of-type{margin-bottom:0}
main.prose .aboutsnap cite{display:block;margin-top:var(--gap-half,14px);
  font-size:13px;font-style:italic;color:var(--warmgray)}

/* ---- three index-mobile fixes ------------------------------------------- */
/* 2. Divider between EVERY adjacent cell. A right-border-plus-last-child
      pattern leaves the gap wherever a later rule resets it; a left border on
      each cell after the first cannot. Applies to both bands. */
.statband .stat{border-right:0}
.statband .stat + .stat{border-left:1px solid var(--hairline)}

/* 3. The index's own search form never got the mobile treatment - only the
      Pagefind form on /search did - so its button sat outside the right
      margin while the input respected the left. */
.indexsearch{display:flex;gap:8px;width:100%;box-sizing:border-box}
.indexsearch input{flex:1 1 auto;min-width:0;box-sizing:border-box}
.indexsearch button{flex:0 0 auto;box-sizing:border-box;white-space:nowrap}
@media (max-width:40rem){
  .indexsearch{flex-wrap:wrap}
  .indexsearch input{flex:1 1 100%;height:48px;font-size:16px}
  .indexsearch button{flex:1 1 100%;min-height:44px}
  /* 1. mosaic first, tagline under it */
  /* mosaic above the tagline at MOBILE ONLY - desktop keeps its
     approved document order */
  header.masthead > .wordmarkrow{order:1}
  header.masthead > nav.top{order:2}
  header.masthead > .mastheadlink{order:3}
  header.masthead > .site-label{order:4}
  /* inside the row: wordmark left, MENU right - both explicit so neither
     falls back to order:0 and jumps the other */
  header.masthead .wordmarkrow .brand{order:1;margin-right:auto}
  header.masthead .wordmarkrow .menubtn{order:2}
}

/* ---- search results: single column inside the frame ---------------------
   The desktop collapse was mine: I made .pagefind-ui__form a flex ROW for the
   mobile input+button fix, and the form also contains the results drawer - so
   the drawer became a flex sibling of the input and shrank into a narrow
   right-hand column while the form sat orphaned at the left. The drawer now
   claims a full row of its own. */
.pagefind-ui__form{flex-wrap:wrap}
.pagefind-ui__drawer{flex:1 1 100%;width:100%;min-width:0}
@media (min-width:48rem){
  .pagefind-ui__form{align-items:flex-start}
  .pagefind-ui__search-input{flex:1 1 auto}
  .searchactions{order:0}
  .pagefind-ui__drawer{order:9}
}
/* one metadata line, never a stack */
.result-prov{display:block;font-family:'Zilla Slab',serif;font-size:11.5px;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--warmgray);margin:0 0 8px}
.result-prov .sep{color:var(--ochre);letter-spacing:0}
.result-meta{display:none}
.pagefind-ui__result{max-width:none}
.pagefind-ui__result-excerpt{max-width:70ch}
@media (max-width:40rem){
  .result-prov{font-size:11px;letter-spacing:.12em;line-height:1.6}
}
/* posts named in archive chrome link to their pages */
main.prose .citelink{color:var(--ochre);text-decoration:none;
  border-bottom:1px solid rgba(192,120,48,.35)}
main.prose .citelink:hover{color:var(--ochre-hover);border-bottom-color:var(--ochre)}
/* the archive offering its own copy beside a link the publication wrote.
   Display layer only - the original href is untouched. */
.post-body .archived-copy{font-size:.78em;color:var(--ochre);text-decoration:none;
  white-space:nowrap;vertical-align:baseline}
.post-body .archived-copy:hover{text-decoration:underline;color:var(--ochre-hover)}

/* ---- accessibility: skip link + focus visibility ------------------------ */
.skiplink{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);
  color:var(--cream);padding:12px 18px;text-decoration:none;
  font-family:'Zilla Slab',serif;font-size:14px}
.skiplink:focus{left:0}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--ochre-hover);outline-offset:2px}

/* option-2 contrast tokens: ochre stays for display, darker for inline text */
:root{--ochre-text:#a65d2e}
main.prose p a:not(.citelink):not(.archived-copy),
main.prose li a{color:var(--ochre-text)}


/* ==========================================================================
   FOOTER - Claude Design's dark footer, integrated.
   Reference: design/Archive Footer Dark.dc.html
   CD's column-header grey #6B6259 reads 2.91:1 on ink and is replaced with
   ochre-light (9.00). CD's ochre #B57B3F and hover #D69A5E are replaced with
   the live tokens, which also pass. Structure, spacing and hierarchy are CD's.
   ========================================================================== */
.sitefoot{max-width:none;margin:72px 0 0;padding:0;background:var(--ink);
  border-top:4px solid var(--ochre);color:var(--cream)}
.sitefoot .footinner{max-width:var(--wide);margin:0 auto;
  padding:56px 1.25rem 0;box-sizing:border-box}
.sitefoot .foottop{display:grid;
  grid-template-columns:1fr 170px 170px 220px;column-gap:48px}
.sitefoot .fwordmark{font-family:'Zilla Slab',serif;font-size:26px;
  font-weight:700;color:var(--cream);letter-spacing:-.01em}
.sitefoot .fwordmark span{color:var(--ochre)}
.sitefoot .desc{font-size:16px;line-height:1.6;color:var(--cream);
  max-width:360px;margin:14px 0 0;opacity:.9}
.sitefoot .footcol{display:flex;flex-direction:column;gap:14px}
.sitefoot .footcol h2{font-family:'Zilla Slab',serif;font-size:11px;
  font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ochre-light);margin:0}
.sitefoot .footcol a{font-size:15px;color:var(--cream);text-decoration:none;
  opacity:.92}
.sitefoot .footcol a:hover{color:var(--ochre-light);opacity:1;
  text-decoration:underline}
.sitefoot .footcol p{font-size:15px;line-height:1.6;margin:0;color:var(--cream);
  opacity:.9}
/* Column-header scale, not display scale: it is a link, not a headline. Same
   11px/.24em small-caps as the h2 above it, so the column reads as one voice
   and the ochre does the work of marking it clickable. */
/* .sitefoot .footcol a is 0,2,1 and was silently winning font-size over a
   0,2,0 .supportcta, so the CTA rendered at 15px however it was specified -
   it never matched CD's 12px on this element. The class needs the element in
   the selector to outrank it. */
.sitefoot .footcol a.supportcta{font-family:'Zilla Slab',serif;font-size:11px;
  font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ochre)!important;text-decoration:none;
  border-bottom:2px solid var(--ochre);padding-bottom:3px;align-self:flex-start;
  opacity:1}
.sitefoot .footcol a.supportcta:hover{color:var(--ochre-light)!important;
  border-bottom-color:var(--ochre-light);text-decoration:none}
.sitefoot .metarow{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid rgba(250,247,242,.16);margin-top:48px;padding:20px 0 28px;
  font-size:14px;color:var(--cream);opacity:.9;flex-wrap:wrap;gap:1rem}
.sitefoot .metarow .maint{font-style:italic}
/* The lost count is a link inside a running line, so it gets an underline -
   ochre alone is not an affordance at 14px in a colophon. */
.sitefoot .metarow a{color:var(--ochre);text-decoration:none;font-style:normal}
.sitefoot .metarow a[href$="losses.html"]{text-decoration:underline;
  text-underline-offset:3px}
.sitefoot .metarow a:hover{color:var(--ochre-light);text-decoration:underline}
.sitefoot .sep{color:var(--ochre)}

@media (max-width:44.9375rem){
  .sitefoot .footinner{padding:40px 20px 0}
  /* CD's mobile is not a four-row stack: the wordmark and the support block
     run full width, and THE ARCHIVE / SITE sit side by side between them.
     Two spans on the same grid do that without a second container. */
  .sitefoot .foottop{grid-template-columns:1fr 1fr;column-gap:24px;row-gap:30px}
  .sitefoot .footbrand{grid-column:1/-1}
  .sitefoot .footcol.fsupport{grid-column:1/-1}
  .sitefoot .fwordmark{font-size:22px}
  .sitefoot .desc{font-size:15px;margin-top:12px;max-width:none}
  /* 44px touch targets, but not stacked on top of CD's 12px gap - that made
     a 56px row pitch against CD's 30 and grew the band by a fifth. The gap
     moves onto the column heading, so the link rows sit flush and the pitch
     is the target itself. */
  .sitefoot .footcol{gap:12px}
  .sitefoot .footcol:not(.fsupport){gap:0}
  .sitefoot .footcol:not(.fsupport) h2{margin-bottom:10px}
  .sitefoot .footcol a{min-height:44px;display:inline-flex;align-items:center}
  .sitefoot .footcol a.supportcta{min-height:44px;display:inline-flex;align-items:center}
  .sitefoot .metarow{flex-direction:column;gap:6px;margin-top:34px;
    padding-top:18px;font-size:13px}
}

/* ------------------------------------------------------- contribute form
   The panes are driven by :has() on the radio, not by script, so the page
   works with JavaScript off. Where :has() is unsupported all three panes
   show, the form still submits, and the chosen purpose still travels with
   it - the correct direction to fail in. */
.contribform{margin:40px 0 0;max-width:var(--measure)}
.contribform fieldset{border:0;margin:0 0 28px;padding:0}
.contribform legend{font-family:'Zilla Slab',serif;font-size:11px;
  font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--warmgray);padding:0;margin:0 0 12px}
.contribform .purpose{border-top:3px solid var(--ink);padding-top:18px}
.contribform .purpose label{display:flex;align-items:center;gap:10px;
  font-size:18px;min-height:44px;cursor:pointer}
.contribform .checks label{display:flex;align-items:center;gap:10px;
  font-size:16px;min-height:40px;cursor:pointer}
.contribform input[type=radio],.contribform input[type=checkbox]{
  width:18px;height:18px;accent-color:var(--ochre);flex:none}
.contribform .fld{display:block;margin:0 0 22px}
.contribform .fld span{display:block;font-family:'Zilla Slab',serif;
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--warmgray);margin:0 0 7px}
.contribform .fld em{font-style:italic;text-transform:none;letter-spacing:0;
  font-weight:400}
.contribform input[type=text],.contribform input[type=email],
.contribform input[type=url],.contribform textarea{
  width:100%;box-sizing:border-box;font:inherit;font-size:17px;
  padding:11px 13px;background:var(--paper);color:var(--ink);
  border:1px solid var(--hairline);border-radius:0}
.contribform textarea{resize:vertical;line-height:1.55}
.contribform input:focus,.contribform textarea:focus{outline:3px solid
  var(--ochre-hover);outline-offset:1px;border-color:var(--ochre)}
.contribform .panenote{font-size:16px;line-height:1.6;color:var(--warmgray);
  background:var(--parchment);border-left:3px solid var(--ochre);
  padding:14px 18px;margin:0 0 24px}
.contribform .panenote b{color:var(--ink)}
.contribform button{font-family:'Zilla Slab',serif;font-size:13px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  background:var(--ink);color:var(--cream);border:0;padding:15px 34px;
  min-height:44px;cursor:pointer}
.contribform button:hover{background:var(--ochre-hover)}
.contribform .fallback{font-size:15px;color:var(--warmgray);margin:20px 0 0}
/* the honeypot: off-screen rather than display:none, which some bots skip */
.contribform .hp{position:absolute;left:-9999px;width:1px;height:1px;
  overflow:hidden}
.contribform:has(#p-materials:checked) .pane-error,
.contribform:has(#p-materials:checked) .pane-else,
.contribform:has(#p-error:checked) .pane-materials,
.contribform:has(#p-error:checked) .pane-else,
.contribform:has(#p-else:checked) .pane-materials,
.contribform:has(#p-else:checked) .pane-error{display:none}

/* corrections log */
.corrlist{list-style:none;margin:40px 0 0;padding:0}
.corrlist li{border-top:1px solid var(--hairline);padding:26px 0}
.corrlist li:first-child{border-top:3px solid var(--ink)}
main.prose .corrlist h2{font-family:'Zilla Slab',serif;font-size:24px;
  font-weight:700;line-height:1.2;margin:0}
.corrlist .corrdate{font-family:'Zilla Slab',serif;font-size:12px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ochre-text);margin:8px 0 12px}
.corrlist p:last-child{margin:0}

@media (max-width:44.9375rem){
  .contribform{margin-top:28px}
  .contribform button{width:100%}
}

/* The tombstone's thread note: the archive explaining why a thread is sitting
   under a page whose body has moved. It must not read as one of the comments,
   so it takes the metadata voice rather than the body voice. */
.comments .threadnote{font-size:15px;font-style:italic;color:var(--warmgray);
  margin:0 0 18px;max-width:var(--measure)}

/* colophon: "Built with (heart) in Santa Clarita" */
.sitefoot .metaright{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.sitefoot .metaright .colophon{font-style:normal}
@media (max-width:46rem){
  .sitefoot .metaright{align-items:flex-start}
}
.sitefoot .colophon{font-size:13px;color:var(--cream);opacity:.75;
  font-style:italic}
.sitefoot .heart{color:var(--ochre);font-style:normal;
  /* Belt and braces against emoji substitution: the glyph already carries
     U+FE0E, and this says the same thing to engines that read the property.
     A colour emoji heart in an ochre-and-ink colophon would be a bug people
     screenshot. */
  font-variant-emoji:text;
  /* the suit glyph sits high in most serif faces; a hair of lift puts its
     optical centre on the line's centre */
  display:inline-block;transform:translateY(1px);
  font-family:'Zilla Slab',serif}


/* ==========================================================================
   PROMOTED BAR  (editor's refinement, supersedes plain sticky)
   Nothing is pinned at the top of the page. The masthead, tagline, mosaic and
   in-page nav render normally and scroll away. Once the in-page nav row has
   left the viewport, this bar slides down and takes over the job.

   It is FIXED, not sticky, and that is the whole design. Sticky confines an
   element to its parent's box - an earlier attempt pinned nav.top inside a
   500px masthead, so it held for 500px and then left with its parent. Fixed
   also means the bar overlays rather than occupies: engaging it moves no
   content, so cumulative layout shift is zero by construction.
   ========================================================================== */
.promobar{position:fixed;top:0;left:0;right:0;z-index:90;
  background:var(--cream);border-bottom:1px solid var(--hairline);
  box-shadow:0 10px 18px -14px rgba(26,26,26,.55);
  transform:translateY(-100%);transition:transform .18s ease;
  will-change:transform}
.promobar.on{transform:none}
.promobar[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.promobar{transition:none}}

/* Promoted, this is a utility strip and not a masthead - but 6px read as
   cramped once it was on screen, so the trim is partly given back: 12px top
   and bottom. Wordmark and nav sizes untouched throughout; only the air has
   moved. */
.promobar .barrow{max-width:var(--wide);margin:0 auto;padding:12px 1.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  font-family:'Zilla Slab',serif}
.promobar .brand{font-size:19px;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.promobar .brand span{color:var(--ochre)}
/* The clone inherits nav.top's own rules, including a border-bottom hairline
   and 22px of page padding - both belong to the nav sitting in the page, not
   to a promoted strip. Reset here, and note what is NOT reset: the underline
   on nav a.on is the active-page marker, lives on the anchor, and stays. */
.promobar nav{display:flex;gap:28px;font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  border-bottom:0;padding:0;margin:0;max-width:none;text-align:left}
.promobar nav a{color:var(--warmgray);text-decoration:none;padding-bottom:2px;
  border-bottom:2px solid transparent}
.promobar nav a:hover{color:var(--ink)}
.promobar nav a.on{color:var(--ochre-text);border-bottom-color:var(--ochre)}
.promobar .menubtn{display:none}

/* the year rail rides INSIDE the bar, so "appears with it, never alone" is
   structural rather than two states kept in sync by hand */
/* The rail is its OWN fixed layer, not a row inside the bar. It has to be:
   the rail is persistent once engaged and the nav is not, so a rail nested
   inside the nav would be dragged off-screen every time the reader scrolled
   down. Separated, the rail tracks the nav's height instead - seated beneath
   it when the nav is showing, sliding up to the viewport top when the nav
   steps away, one transition and no gap in either state.

   Still one line for the pair: with a rail present the nav gives up its
   bottom hairline and shadow, and the rail carries them. */
html.hasrail .promobar{border-bottom:0;box-shadow:none}
.yearrail{position:fixed;left:0;right:0;top:var(--navh,0px);z-index:89;
  background:var(--parchment);
  border-bottom:1px solid var(--hairline);
  box-shadow:0 10px 18px -14px rgba(26,26,26,.55);
  transform:translateY(-100%);
  transition:transform .18s ease, top .18s ease;will-change:transform,top}
.yearrail.on{transform:none}
@media (prefers-reduced-motion:reduce){.yearrail{transition:none}}
.yearrail .inner{max-width:var(--wide);margin:0 auto;padding:8px 1.25rem;
  display:flex;align-items:center;gap:12px;font-family:'Zilla Slab',serif;
  font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.yearrail .yr{color:var(--ink);text-decoration:none;
  border-bottom:2px solid transparent}
.yearrail .yr:hover{border-bottom-color:var(--ochre);color:var(--ochre-text)}
.yearrail .n{color:var(--warmgray);letter-spacing:.16em}
.yearrail .sep{color:var(--ochre);letter-spacing:0}
.yearrail .step{margin-left:auto;display:flex;gap:6px}
.yearrail .step a{min-width:34px;height:30px;display:inline-flex;
  align-items:center;justify-content:center;color:var(--ochre-text);
  text-decoration:none;border:1px solid var(--hairline);background:var(--paper);
  font-size:13px;letter-spacing:0}
.yearrail .step a:hover{border-color:var(--ochre);color:var(--ochre)}
.yearrail .step a[aria-disabled="true"]{opacity:.35;pointer-events:none}

@media (max-width:44.9375rem){
  .promobar .barrow{padding:12px 16px}
  .promobar nav{position:absolute;left:0;right:0;top:100%;
    background:var(--cream);border-bottom:4px solid var(--ink);
    flex-direction:column;gap:0;padding:4px 16px 10px;display:none}
  .promobar.menu-open nav{display:flex}
  .promobar nav a{padding:13px 0;min-height:44px;display:flex;
    align-items:center;font-size:13px}
  .promobar .menubtn{display:flex;align-items:center;justify-content:center;
    min-width:44px;height:44px;margin-right:-10px;background:none;border:0;
    cursor:pointer;padding:0}
  .promobar .menubtn .lbl{font-family:'Zilla Slab',serif;font-size:13px;
    font-weight:600;letter-spacing:.2em;text-transform:uppercase;
    color:var(--ochre-text)}
  .promobar.menu-open{z-index:120}   /* the open menu outranks everything */
  .yearrail .inner{padding:7px 16px;gap:10px}
  .yearrail .step a{min-width:38px;height:34px}
}

/* Anchors must clear the bar when it is showing. --bar is the bar's live
   height, 0 while it is retired. */
:root{--bar:0px}
h2.year,[id]{scroll-margin-top:calc(var(--bar) + 20px)}
.skiplink:focus{top:calc(var(--bar) + 8px)}

/* The in-page year headings keep their own sticky behaviour unless the rail
   is doing that job. JS adds .hasrail; with JS off nothing changes. */
main.index.hasrail h2.year{position:static;box-shadow:none}

/* rail modes: corpus stats until the reader reaches 2006, then years */
.yearrail .corpus{display:none;color:var(--warmgray);letter-spacing:.16em}
.yearrail.corpusmode .yr,.yearrail.corpusmode .sep,
.yearrail.corpusmode .n,.yearrail.corpusmode .step{display:none}
.yearrail.corpusmode .corpus{display:inline}

/* Capture qualifier: the Wayback link reaches the best surviving copy,
   not a dated snapshot. Quiet, but present on every page it applies to. */
.prov-line .capnote{display:block;font-size:.78rem;line-height:1.35;
  color:var(--warmgray);font-style:italic;margin-top:.15rem}

/* Era thinness: the record proves these years are mostly absent, so the
   index section and every post inside it say so. Parchment, not alarm. */
.thinness{background:var(--parchment);border-left:4px solid var(--ochre);
  padding:12px 16px;margin:10px -.4rem 0;font-size:15px;line-height:1.55;
  color:var(--ink)}
.thinness a{color:var(--ochre-hover)}
.rail-thin{border-top:1px solid var(--hairline);padding-top:16px;
  margin-bottom:26px}
.rail-thin h2{font-family:'Zilla Slab',serif;font-weight:600;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--warmgray);
  margin:0 0 .5rem}
.rail-thin p{font-size:.86rem;line-height:1.5;color:var(--warmgray)}
.rail-thin a{color:var(--ochre-hover)}


/* Landing top nav — restored per the divergence ruling. CD's structure:
   wordmark left, links right, 1px hairline beneath, small-caps labels with the
   current item in ochre under a 2px rule. CD's values converted to tokens and
   rem; the +0.24em tracking is the site's .compact nav standard, which CD's
   own brand guide also documents. */
.inst-nav{max-width:var(--wide);margin:0 auto;padding:22px 1.25rem;
  display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:14px 28px;border-bottom:1px solid var(--hairline)}
.inst-nav-mark{font-family:'Zilla Slab',serif;font-weight:700;font-size:1.375rem;
  letter-spacing:-.01em;color:var(--ink);text-decoration:none;white-space:nowrap}
.inst-nav-mark span{color:var(--ochre)}
.inst-nav-links{display:flex;gap:clamp(1.125rem,3vw,2.25rem);flex-wrap:wrap;
  font-family:'Zilla Slab',serif;font-weight:600;font-size:.8125rem;
  letter-spacing:.24em;text-transform:uppercase}
.inst-nav-links a{color:var(--warmgray);text-decoration:none;padding-bottom:3px;
  border-bottom:2px solid transparent}
.inst-nav-links a:hover{color:var(--ink)}
.inst-nav-links a[aria-current]{color:var(--ochre);border-bottom-color:var(--ochre)}
@media (max-width:40rem){
  .inst-nav{flex-direction:column;align-items:flex-start;gap:.9rem}
}

/* ================= institutional landing =================================
   Structure and hierarchy are Claude Design's; every value here is a live
   token per DESIGN.md. Deliberate divergences from CD's file: the column is
   --wide (1080), not CD's 1200; colours are var(), not hex; sizing is rem-
   based; and the breakpoints are this stylesheet's, not CD's clamp-only
   layout. Fonts are the self-hosted faces - the landing makes no external
   request, like every other page here. */
.inst-head{max-width:var(--wide);margin:0 auto;padding:clamp(3.5rem,7vw,6.5rem) 1.25rem clamp(3rem,5vw,5rem);text-align:center;border-bottom:3px solid var(--ink)}
.inst-mark{width:72px;height:72px;background:var(--ink);margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}
.inst-a{font-family:'Zilla Slab',serif;font-weight:700;font-size:44px;line-height:1;color:var(--cream);transform:translateY(-1px)}
.inst-shelf{width:37px;height:4px;background:var(--ochre);margin-top:-4px}
.inst-wordmark{font-family:'Zilla Slab',serif;font-weight:700;font-size:clamp(3rem,7.5vw,5.25rem);line-height:1.02;letter-spacing:-.01em;margin:1.75rem 0 0;color:var(--ink)}
.inst-wordmark span{color:var(--ochre)}
.inst-label{font-family:'Zilla Slab',serif;font-weight:600;font-size:clamp(.8125rem,1.6vw,1.0625rem);letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:var(--warmgray);margin:1.1rem 0 0}
.inst-lede{max-width:38rem;margin:1.75rem auto 0;font-size:clamp(1.125rem,2vw,1.3125rem);line-height:1.55}
.inst-main{max-width:var(--wide);margin:0 auto;padding:0 1.25rem}
.inst-thesis{display:grid;grid-template-columns:16rem minmax(0,1fr);gap:2rem 4rem;padding:clamp(2.5rem,5vw,4rem) 0;border-bottom:1px solid var(--hairline)}
.inst-thesis h2{font-family:'Zilla Slab',serif;font-weight:600;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ochre-hover);margin:0}
.inst-rule{width:44px;height:3px;background:var(--ink);margin-top:.9rem}
.inst-thesis-body{max-width:var(--measure)}
.thesis-pending{border-left:4px solid var(--ochre);background:var(--parchment);padding:1rem 1.25rem}
.thesis-pending p{margin:0;color:var(--warmgray);font-style:italic}
.inst-sec{font-family:'Zilla Slab',serif;font-weight:700;font-size:clamp(1.75rem,3.5vw,2.375rem);letter-spacing:-.015em;margin:0;padding-bottom:.7rem;border-bottom:3px solid var(--ink);display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.5rem}
.inst-tally{font-family:'Zilla Slab',serif;font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--warmgray)}
.inst-collections{padding:clamp(2.5rem,5vw,4rem) 0}
.colgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1.75rem;margin-top:2.25rem}
.colcard{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);border:1px solid var(--edge);background:var(--paper);transition:border-color .12s ease}
a.colcard:hover{border-color:var(--ink)}
.colcard.is-recovering{background:var(--parchment);border-color:var(--hairline)}
.colcard-mast{position:relative;border-bottom:1px solid var(--hairline);background:var(--parchment)}
.colcard-mast img{display:block;width:100%;height:auto}
.colcard-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Zilla Slab',serif;font-weight:600;font-size:.7rem;letter-spacing:.22em;text-indent:.22em;text-transform:uppercase;color:var(--warmgray)}
.colcard-body{padding:1.25rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.colcard-kind{font-family:'Zilla Slab',serif;font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ochre-hover)}
.colcard-name{font-family:'Zilla Slab',serif;font-weight:700;font-size:1.7rem;letter-spacing:-.01em;line-height:1.1;margin:0}
.colcard-blurb{margin:0;font-size:.95rem;color:var(--warmgray);line-height:1.55;flex:1}
.colcard-counts{font-family:'Zilla Slab',serif;font-weight:500;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--warmgray);border-top:1px solid var(--hairline);padding-top:.75rem;display:flex;flex-wrap:wrap;gap:.35rem}
.colcard-counts .sep{color:var(--ochre)}
.is-recovering .colcard-name,.is-recovering .colcard-kind{color:var(--warmgray)}
.inst-quiet{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2.25rem;padding:clamp(2rem,4vw,3rem) 0 clamp(3rem,6vw,4.5rem);border-top:1px solid var(--hairline)}
.inst-quiet h2{font-family:'Zilla Slab',serif;font-weight:600;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;margin:0 0 .6rem}
.inst-quiet h2 a{color:var(--ink);text-decoration:none}
.inst-quiet h2 a:hover{color:var(--ochre-hover)}
.inst-quiet p{margin:0;font-size:.95rem;color:var(--warmgray);line-height:1.55}
@media (max-width:46rem){
  .inst-thesis{grid-template-columns:minmax(0,1fr);gap:1.25rem}
}

/* ================= institutional eyebrow ==================================
   CD's Header System, pattern (a). Frame furniture: cream/ink/ochre verbatim
   over any collection skin, per the collection identity law. Collection pages
   only - institutional pages keep the compact header, since an eyebrow there
   would be the building wearing its own signage twice.

   CD's exportable CSS is used as written except where the real DOM differs:
   the promoted bar is built by JS as .promobar > .barrow and carries no
   .promoted class of its own (that lives on <html>), so the crumb rules are
   rebound to the classes that exist. Editor ruling: 28px at mobile, not CD's
   30px - the strip is paid once at page top and nothing while reading. */
.eyebrow{background:var(--cream);border-bottom:1px solid var(--hairline)}
.eyebrow .in{max-width:var(--wide);margin:0 auto;padding:0 1.25rem;
  height:34px;display:flex;justify-content:space-between;align-items:center;
  font-family:'Zilla Slab',serif}
.eyebrow .mark{font-size:15px;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none}
.eyebrow .mark span{color:var(--ochre)}
.eyebrow .up{font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--warmgray);text-decoration:none}
.eyebrow .up:hover{color:var(--ink)}
/* WCAG 2.2 AA (2.5.8) wants 24px minimum even for pointer. The label is
   11px, so the target is grown the same way as the touch case: padding
   cancelled by negative margin, strip height untouched. */
.eyebrow .mark,.eyebrow .up{padding:6px 0;margin:-6px 0}
.eyebrow .up .arr{color:var(--ochre)}
@media (max-width:40rem){
  .eyebrow .in{height:28px}
  .eyebrow .mark{font-size:13px}
  .eyebrow .up{font-size:10px;letter-spacing:.16em}
  /* 44px touch targets inside a 28px strip. The hit area overflows the strip
     via padding cancelled by an equal negative margin, so the target grows and
     the ruled 28px of page-top cost does not. Category (a): CD specified the
     strip height, not the target size, and 17px targets fail WCAG 2.5.5. */
  .eyebrow .mark,.eyebrow .up{padding:14px 0;margin:-14px 0}
  .eyebrow .up{padding-left:12px;margin-left:0}
  .eyebrow .mark{padding-right:12px;margin-right:0}
}

/* The crumb: the eyebrow's content, re-entering inside the promoted bar. */
.promobar .brandbox{display:flex;align-items:baseline;gap:12px;min-width:0}
.promobar .crumb{font-family:'Zilla Slab',serif;font-size:13px;
  font-weight:600;letter-spacing:.02em;color:var(--warmgray);
  text-decoration:none;white-space:nowrap}
.promobar .crumb:hover{color:var(--ink)}
.promobar .crumb span{color:var(--ochre)}
@media (max-width:40rem){
  .promobar .brandbox{flex-direction:column;align-items:flex-start;gap:0}
  .promobar .crumb{font-size:10px;line-height:1.3}
}

/* ================= people templates — DORMANT ==============================
   Styled and committed, rendering nothing. No person page emits until
   registry-schema-draft.md is ratified and the never_link gate is built; see
   render_people(), which refuses rather than degrades.

   Per the ruling of 2026-08-17 there is no comment-excerpt module here and
   there is no CSS for one. An appearance of type "commented" gets a count and
   a search link (.appsearch) and nothing else. That is law, not a toggle. */
.peoplepage .peoplelist{margin-top:2rem}
.peoplepage .prow{display:flex;justify-content:space-between;align-items:baseline;
  gap:1.5rem;flex-wrap:wrap;padding:1rem 0;border-bottom:1px solid var(--hairline)}
.peoplepage .prow > a,.peoplepage .prow > span:first-child{
  font-family:'Zilla Slab',serif;font-weight:600;font-size:1.125rem;
  color:var(--ink);text-decoration:none}
.peoplepage .prow > a:hover{color:var(--ochre-hover)}
.peoplepage .prow .role{font-size:.94rem;color:var(--warmgray)}

.personpage .crumbs{font-family:'Zilla Slab',serif;font-weight:600;font-size:.75rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--warmgray)}
.personpage .crumbs .sep{color:var(--ochre)}
.personpage .crumbs a{color:var(--warmgray);text-decoration:none}
.personpage .personstats{font-family:'Zilla Slab',serif;font-weight:500;font-size:.8125rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--warmgray);margin-top:.875rem}
.personpage .personbio{max-width:var(--measure);margin-top:1.5rem}
.personpage .appline{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;flex-wrap:wrap;padding-top:1.125rem}
.personpage .appline .k{font-family:'Zilla Slab',serif;font-weight:600;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ochre-hover)}
.personpage .appline .k .handle{text-transform:none;letter-spacing:0}
.personpage .appline .n{font-family:'Zilla Slab',serif;font-weight:500;font-size:.78rem;
  letter-spacing:.1em;color:var(--warmgray)}
.personpage .applist{list-style:none;margin:.75rem 0 0;padding:0;
  display:flex;flex-direction:column;gap:.5rem}
.personpage .applist li{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.personpage .applist .d{font-family:'Zilla Slab',serif;font-weight:500;font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--warmgray);white-space:nowrap}
/* The only affordance a "commented" appearance gets: a search the reader runs. */
.personpage .appsearch{margin:.625rem 0 0;font-size:.9rem}