:root {
  --paper:#faf8f4; --ink:#1b1a17; --muted:#6b665c; --rule:#ddd7cc;
  --accent:#8f2d1e; --accent-2:#3f5d66; --accent-soft:#f4ebe7; --shadow:rgba(27,26,23,.09);
  --serif:"Newsreader",Iowan Old Style,Palatino,Georgia,serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --paper:#14130f; --ink:#ece7dc; --muted:#968f7f; --rule:#33302a;
         --accent:#e2795f; --accent-2:#7fa8b4; --accent-soft:#241d19; --shadow:rgba(0,0,0,.4); }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:19px;line-height:1.6;
  font-synthesis-weight:none;text-rendering:optimizeLegibility}
a{color:inherit}
.wrap{max-width:62rem;margin:0 auto;padding:0 1.5rem}

/* ---------- masthead ---------- */
.masthead{border-bottom:3px double var(--rule);margin-bottom:2rem}
.masthead-inner{padding:2.5rem 0 1.25rem;text-align:center}
.mast-title{font-size:clamp(2.4rem,7vw,4.2rem);font-weight:600;letter-spacing:-.02em;
  line-height:1;margin:0;font-style:italic}
.mast-title a{text-decoration:none}
.mast-sub{font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin:.9rem 0 0}
.mast-rule{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:flex;gap:1rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding:.5rem 0;margin-top:1.4rem}
.mast-rule a{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--muted)}
.mast-rule a:hover,.mast-rule a[aria-current]{color:var(--accent)}

/* ---------- search ---------- */
.search-box{position:relative;margin:0 auto 2.5rem;max-width:40rem}
.search-box input{width:100%;font-family:var(--serif);font-size:1.15rem;
  padding:.85rem 1rem .85rem 2.9rem;background:transparent;color:var(--ink);
  border:1px solid var(--rule);border-radius:2px}
.search-box input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.search-box svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);
  width:1.1rem;height:1.1rem;stroke:var(--muted);fill:none;stroke-width:2}
.search-note{font-family:var(--sans);font-size:.75rem;color:var(--muted);
  text-align:center;margin:.6rem 0 0}

/* ---------- listings ---------- */
.year{display:flex;align-items:baseline;gap:1rem;margin:2.5rem 0 .5rem}
.year h2{font-family:var(--sans);font-size:.75rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin:0;font-weight:600}
.year .hr{flex:1;border-top:1px solid var(--rule)}
.entry{display:block;text-decoration:none;padding:1rem 0;border-bottom:1px solid var(--rule)}
.entry:hover .entry-title{color:var(--accent)}
.entry-title{font-size:1.35rem;font-weight:600;line-height:1.25;margin:0 0 .3rem;display:block}
.entry-meta{font-family:var(--sans);font-size:.73rem;letter-spacing:.06em;
  color:var(--muted);text-transform:uppercase}
.entry-snip{color:var(--muted);font-size:.95rem;margin:.45rem 0 0;line-height:1.5}
.entry-snip mark{background:var(--accent-soft);color:var(--accent);padding:0 .12em;border-radius:2px}

/* ---------- article ---------- */
.article{max-width:36rem;margin:0 auto;padding-bottom:4rem}
.kicker{font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 .9rem}
.article h1{font-size:clamp(2rem,5.5vw,3rem);line-height:1.12;font-weight:600;
  letter-spacing:-.02em;margin:0 0 1rem}
.dateline{font-family:var(--sans);font-size:.78rem;color:var(--muted);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:.7rem 0;margin:0 0 2rem;display:flex;flex-wrap:wrap;gap:.4rem 1rem}
.article p{margin:0 0 1.15rem}
.article p:first-of-type::first-line{font-variant-caps:normal}
.cutoff{display:inline-block;font-family:var(--sans);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  background:var(--accent-soft);padding:.15rem .5rem;border-radius:2px;
  vertical-align:.08em}
.endmark{color:var(--accent);margin-top:2rem;font-size:1.2rem}

/* ---------- editorial note / figure ---------- */
.note{border-left:2px solid var(--accent);padding:.2rem 0 .2rem 1.1rem;
  margin:2.5rem 0;font-size:.9rem;color:var(--muted);line-height:1.55}
.note h3{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0 0 .5rem;font-weight:600}
.note ul{margin:.4rem 0 0;padding-left:1.1rem}
.note li{margin:.25rem 0}
figure{margin:2.5rem 0}
figure img{width:100%;border:1px solid var(--rule);box-shadow:0 2px 14px var(--shadow);
  background:#fff;display:block}
figcaption{font-family:var(--sans);font-size:.73rem;color:var(--muted);margin-top:.6rem;text-align:center}

/* ---------- tables / canon ---------- */
table{width:100%;border-collapse:collapse;font-size:.95rem}
th{font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-align:left;font-weight:600;padding:.6rem .5rem;
  border-bottom:1px solid var(--rule)}
td{padding:.6rem .5rem;border-bottom:1px solid var(--rule);vertical-align:top}
td a{color:var(--accent)}
.pending{color:var(--muted)}
.tag{font-family:var(--sans);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.15rem .45rem;border:1px solid var(--rule);border-radius:2px;color:var(--muted);white-space:nowrap}
.tag.done{color:var(--accent);border-color:var(--accent)}

/* ---------- names index ---------- */
.names{columns:3 13rem;column-gap:2.5rem;margin-top:1.5rem}
.name{break-inside:avoid;margin:0 0 .6rem;font-size:.95rem}
.name .n{font-weight:600}
.name .c{font-family:var(--sans);font-size:.7rem;color:var(--muted);margin-left:.35rem}

.lede{max-width:36rem;margin:0 auto 2rem;color:var(--muted);font-size:1.05rem}
.stats{font-family:var(--sans);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin:0 0 2.5rem}
h2.sec{font-size:1.6rem;font-weight:600;margin:0 0 1rem}
footer{border-top:3px double var(--rule);margin-top:4rem;padding:2rem 0 3rem;
  font-family:var(--sans);font-size:.75rem;color:var(--muted);text-align:center;line-height:1.7}
footer a{color:var(--accent)}
.empty{text-align:center;color:var(--muted);padding:3rem 0;font-style:italic}
@media (max-width:640px){ body{font-size:18px} .names{columns:1} }

/* ---------- nav ---------- */
.navlinks{display:flex;gap:1.6rem;flex-wrap:wrap}
.navsearch{margin-left:auto}
.navsearch input{font-family:var(--sans);font-size:.78rem;padding:.35rem .7rem;width:11rem;
  background:transparent;color:var(--ink);border:1px solid var(--rule);border-radius:2px}
.navsearch input:focus{outline:1px solid var(--accent);outline-offset:0;border-color:transparent}
@media (max-width:700px){ .mast-rule{justify-content:center} .navsearch{margin:0;width:100%}
  .navsearch input{width:100%} .navlinks{justify-content:center;gap:1.1rem} }

/* ---------- glossary card in search results ---------- */
.gloss-card{border:1px solid var(--rule);border-left:3px solid var(--accent);
  background:var(--accent-soft);padding:1rem 1.2rem;margin:0 0 1.75rem;border-radius:2px}
.gloss-card h3{margin:0 0 .35rem;font-size:1.15rem;font-weight:600}
.gloss-card h3 span{font-family:var(--sans);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);vertical-align:.32em;margin-left:.5rem}
.gloss-card p{margin:0;font-size:.95rem;color:var(--muted);line-height:1.55}

/* ---------- index pages ---------- */
.lede2{max-width:42rem;color:var(--muted);font-size:1rem;margin:0 0 2rem}
.idx{margin:0 0 1rem}
.idx-item{padding:.9rem 0;border-bottom:1px solid var(--rule);scroll-margin-top:1rem}
.idx-item:target{background:var(--accent-soft);box-shadow:-.8rem 0 0 var(--accent-soft),.8rem 0 0 var(--accent-soft)}
.idx-name{margin:0;font-size:1.08rem;font-weight:600;line-height:1.4}
.idx-name a{text-decoration:none}
.idx-name a:hover{color:var(--accent)}
.idx-name .cat{font-family:var(--sans);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--rule);padding:.1rem .4rem;border-radius:2px;
  vertical-align:.16em;font-weight:400;margin-left:.3rem}
.idx-name .c{font-family:var(--sans);font-size:.68rem;color:var(--muted);
  font-weight:400;margin-left:.5rem;white-space:nowrap}
.idx-name .c.dim{opacity:.65;font-style:italic}
.idx-def{margin:.3rem 0 0;font-size:.95rem;color:var(--muted);line-height:1.55;max-width:44rem}
.idx-cols{margin:.4rem 0 0;font-size:.82rem}
.idx-cols a{color:var(--accent);text-decoration:none}
.idx-cols a:hover{text-decoration:underline}
.idx-cols .sep,.lede2 .sep{color:var(--rule);margin:0 .45rem}

/* ---------- "in this column" ---------- */
.mentions{border-top:1px solid var(--rule);margin:3rem 0 0;padding-top:1.4rem}
.mentions h3{font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1rem;font-weight:600}
.mrow{display:flex;gap:1rem;margin:0 0 .7rem;align-items:baseline;flex-wrap:wrap}
.mrow h4{font-family:var(--sans);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0;font-weight:400;min-width:8rem;flex-shrink:0}
.mrow > div{display:flex;gap:.4rem;flex-wrap:wrap;flex:1}
.chip{font-family:var(--sans);font-size:.73rem;text-decoration:none;color:var(--ink);
  border:1px solid var(--rule);border-radius:99px;padding:.18rem .65rem;white-space:nowrap}
.chip:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- cartoon inset ---------- */
/* The drawing as it ran beside the text: floated into the column on wide
   screens, full width on narrow ones. Kept ragged and unboxed, because these are
   photocopies of line art, and a hard border makes them look like exhibits. */
figure.cartoon{margin:.4rem 0 1.3rem;width:100%}
figure.cartoon img{border:none;box-shadow:none;background:transparent;
  mix-blend-mode:multiply}
figure.cartoon figcaption{text-align:left;font-style:italic;line-height:1.45;
  max-width:30rem}
figure.cartoon figcaption .sig{font-style:normal;white-space:nowrap}
/* the signature is a signature first and a link second, as on the quotes page */
figure.cartoon figcaption a{color:var(--accent);text-decoration:none}
figure.cartoon figcaption a:hover{text-decoration:underline}

@media (min-width:56rem){
  figure.cartoon{float:right;width:17rem;margin:.2rem -7rem 1rem 1.8rem;shape-margin:1rem}
}
@media (max-width:56rem){
  figure.cartoon{max-width:22rem;margin-left:auto;margin-right:auto}
}

/* ---------- crossheads ---------- */
/* The bold sub-headings the paper set between sections of a long column. */
.article h2.crosshead{font-family:var(--sans);font-size:.82rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
  margin:2.1rem 0 .9rem;padding-top:.1rem}
.article h2.crosshead:first-child{margin-top:0}

/* ---------- contents pages in the canon ---------- */
tr.sheet td{background:var(--accent-soft);padding:.5rem;font-family:var(--sans);
  font-size:.72rem;color:var(--muted)}
tr.sheet .sheet-n{text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--ink)}
tr.sheet .sheet-span{margin-left:.85rem}
tr.sheet a{color:var(--accent);margin-left:.85rem}
tr.sheet .sheet-none{margin-left:.85rem;font-style:italic}

/* ---------- home: hero ---------- */
.hero{margin:.5rem 0 3rem}
.hero h2{font-size:clamp(2rem,5.5vw,3.1rem);line-height:1.05;letter-spacing:-.02em;
  font-weight:600;margin:0 0 1rem}
.hero-p{font-size:1.08rem;max-width:44rem;margin:0 0 .9rem;color:var(--ink)}
.kicker{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .7rem}

/* ---------- home: the provenance chain ---------- */
.chain{border-top:3px double var(--rule);border-bottom:1px solid var(--rule);
  padding:2.2rem 0 2.4rem;margin:0 0 3rem}
.chain h2{font-size:clamp(1.3rem,3.2vw,1.85rem);line-height:1.2;font-weight:600;
  margin:0 0 .7rem;max-width:46rem;font-style:italic;color:var(--muted)}
.chain-lede{font-size:1.15rem;max-width:46rem;margin:0 0 2.2rem}
.chain-steps{list-style:none;margin:0;padding:0;display:grid;gap:1.7rem;
  grid-template-columns:1fr}
@media (min-width:34em){.chain-steps{grid-template-columns:repeat(2,1fr);gap:1.7rem 1.6rem}}
@media (min-width:54em){.chain-steps{grid-template-columns:repeat(5,1fr);gap:1.3rem}}
.step{position:relative;padding-top:1.1rem;border-top:1px solid var(--rule)}
.step-k{font-family:var(--sans);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .35rem}
.step-n{font-size:2.6rem;line-height:1;font-weight:600;color:var(--accent);margin:0 0 .5rem;
  letter-spacing:-.03em}
.step-u{display:block;font-size:.72rem;font-family:var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:400;margin-top:.4rem}
.step-d{font-size:.86rem;line-height:1.5;color:var(--muted);margin:0}
.step-d em{color:var(--ink)}
/* the arrow between links in the chain, only where they sit in one row */
@media (min-width:54em){
  .step+.step::before{content:"";position:absolute;left:-.65rem;top:-1px;width:.5rem;height:.5rem;
    border-top:1px solid var(--accent);border-right:1px solid var(--accent);
    transform:translate(-50%,-50%) rotate(45deg)}
}
@media (min-width:54em){.step-n{font-size:2.3rem}.step-d{font-size:.82rem}}

/* ---------- home: year chart ---------- */
.chart{margin:0 0 3rem;padding:0}
/* below ~40rem the bars would shrink the year labels to nothing, so let it swipe */
.chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.chart svg{width:100%;min-width:38rem;height:auto;display:block}
.chart .kept{fill:var(--accent);opacity:.28}
.chart .vol2 .kept{fill:var(--accent-2)}
.chart .done{fill:var(--accent)}
.chart .vol2 .done{fill:var(--accent-2);opacity:.95}
.chart .bar:hover .kept{opacity:.5}
.chart .axis{stroke:var(--rule);stroke-width:1}
.chart .grid line{stroke:var(--rule);stroke-width:1;stroke-dasharray:3 4}
.chart .grid text,.chart .yr,.chart .vlabel{font-family:var(--sans);fill:var(--muted)}
.chart .grid text{font-size:11px}
.chart .yr{font-size:10.5px;text-anchor:middle}
.chart .split{stroke:var(--rule);stroke-width:1}
.chart .vlabel{font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.chart figcaption{font-size:.86rem;line-height:1.55;color:var(--muted);max-width:46rem;margin-top:1rem}
.chart figcaption em{font-style:italic;color:var(--ink)}

/* ---------- home: a taste of the voice ---------- */
.voice{margin:0 0 3rem;padding:1.8rem 0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.voice blockquote{margin:0;font-size:clamp(1.15rem,2.8vw,1.5rem);line-height:1.4;font-style:italic;
  max-width:44rem}
.voice .cite{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;color:var(--muted);
  margin:1rem 0 0}
.voice .cite a{color:var(--accent)}

/* ---------- home: bio + ways in ---------- */
.who{margin:0 0 3rem;max-width:44rem}
.who h3{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin:0 0 .8rem}
.who p{margin:0}
.ways{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin:0 0 3rem;
  grid-template-columns:1fr}
@media (min-width:30em){.ways{grid-template-columns:repeat(2,1fr)}}
@media (min-width:60em){.ways{grid-template-columns:repeat(4,1fr)}}
.way{background:var(--paper);padding:1.2rem 1.1rem;text-decoration:none;display:block;
  transition:background .12s}
.way:hover{background:var(--accent-soft)}
.way-lead{grid-column:1/-1}
@media (min-width:60em){.way-lead .way-d{max-width:44rem}}
.way-t{display:block;font-weight:600;color:var(--accent);margin-bottom:.3rem}
.way-d{display:block;font-size:.84rem;line-height:1.45;color:var(--muted)}

/* the two years the record nearly fails */
.chart .val{font-family:var(--sans);font-size:11px;fill:var(--accent);text-anchor:middle;font-weight:600}
.chart .mark .yr{fill:var(--accent);font-weight:600}
.who p+p{margin-top:.9rem}

/* ---------- Henry the Hog ---------- */
.hog-note{font-style:italic;opacity:.75}

/* ---------- the appeal ---------- */
.appeal{border-top:3px double var(--rule);padding:2rem 0 0;margin:0 0 1rem}
.appeal p{max-width:44rem;margin:0 0 .9rem}
.appeal p:last-child{margin-bottom:0;font-size:1.1rem}
.appeal strong{color:var(--accent)}

/* ---------- canon: the year navigator ---------- */
.ynav-lede{font-size:.86rem;line-height:1.5;color:var(--muted);max-width:44rem;margin:2rem 0 .8rem}
.ynav{display:flex;align-items:flex-end;gap:2px;margin:0 0 2rem;overflow-x:auto;padding-bottom:.2rem}
.ynav-y{flex:1 1 0;min-width:1.6rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;
  text-decoration:none;padding:.3rem .1rem .35rem;border-radius:2px;transition:background .12s}
.ynav-y:hover{background:var(--accent-soft)}
.ynav-n{font-family:var(--sans);font-size:.6rem;color:var(--muted);line-height:1}
.ynav-bar{width:100%;max-width:1.4rem;background:var(--accent);opacity:.3;border-radius:1px;
  display:flex;flex-direction:column;justify-content:flex-end}
.ynav-y.v2 .ynav-bar{background:var(--accent-2)}
.ynav-on{width:100%;background:var(--accent);opacity:1;border-radius:1px;display:block}
.ynav-y.v2 .ynav-on{background:var(--accent-2)}
.ynav-l{font-family:var(--sans);font-size:.62rem;letter-spacing:.04em;color:var(--muted);line-height:1}
.ynav-y:hover .ynav-l,.ynav-y:hover .ynav-n{color:var(--accent)}

/* ---------- canon: the filter ---------- */
.cfilter{margin:0 0 1.6rem}
.cfilter input{width:100%;max-width:26rem;font-family:var(--serif);font-size:1rem;
  padding:.55rem .8rem;border:1px solid var(--rule);border-radius:3px;background:var(--paper);
  color:var(--ink)}
.cfilter input:focus{outline:none;border-color:var(--accent)}
.cfilter-n{font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;color:var(--muted);
  margin:.5rem 0 0;min-height:1em}
tr.on td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tr.on td{background:var(--accent-soft)}

/* ---------- a row of headline figures ---------- */
.figures{display:grid;gap:1.3rem 1.6rem;grid-template-columns:repeat(2,1fr);
  margin:1.8rem 0 0;padding-top:1.5rem;border-top:1px solid var(--rule)}
@media (min-width:44em){.figures{grid-template-columns:repeat(4,1fr)}}
.fig{display:flex;flex-direction:column;gap:.35rem}
.fig-n{font-size:2.1rem;line-height:1;font-weight:600;color:var(--accent);letter-spacing:-.02em}
.fig-l{font-family:var(--sans);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);line-height:1.4}

/* a wide table scrolls inside its own box, never the page */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tscroll table{min-width:31rem}

/* ---------- quotes ---------- */
.quos{margin:1.5rem 0 0}
@media (min-width:46em){.quos{columns:2;column-gap:2.2rem}}
@media (min-width:72em){.quos{columns:3;column-gap:2rem}}
.quo{break-inside:avoid;margin:0 0 1.6rem;padding:1.2rem 1.3rem;background:var(--accent-soft);
  border-left:2px solid var(--accent);display:inline-block;width:100%}
.quo blockquote{margin:0 0 .8rem;font-size:1.06rem;line-height:1.45;font-style:italic}
.quo figcaption{font-family:var(--sans);font-size:.68rem;line-height:1.5;color:var(--muted);text-align:left}
.quo figcaption a{color:var(--accent);text-decoration:none}
.quo figcaption a:hover{text-decoration:underline}
.quo-said{display:block;font-style:italic;margin-bottom:.2rem}
.quo-d{white-space:nowrap}

/* ---------- index pages: the alphabet navigator ---------- */
.anav-lede{font-size:.86rem;line-height:1.5;color:var(--muted);max-width:44rem;margin:1.8rem 0 .8rem}
.anav-lede a{color:var(--accent)}
.anav{display:flex;align-items:flex-end;gap:2px;margin:0 0 1.6rem;overflow-x:auto;padding-bottom:.2rem}
.anav-l{flex:1 1 0;min-width:1.2rem;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  text-decoration:none;padding:.3rem .1rem .35rem;border-radius:2px;transition:background .12s}
a.anav-l:hover{background:var(--accent-soft)}
.anav-bar{width:100%;max-width:1.1rem;min-height:3px;background:var(--accent);opacity:.32;
  border-radius:1px}
.anav-l.empty .anav-bar{background:var(--rule);opacity:1;height:3px}
.anav-c{font-family:var(--sans);font-size:.64rem;letter-spacing:.04em;color:var(--muted);line-height:1}
.anav-l.empty .anav-c{opacity:.35}
a.anav-l:hover .anav-c{color:var(--accent)}
.lmark{display:block;height:0;scroll-margin-top:1rem}

/* ---------- the places map ---------- */
.map{margin:1.8rem 0 2rem}
#map{height:26rem;border:1px solid var(--rule);background:var(--accent-soft);border-radius:2px}
@media (max-width:37.4em){#map{height:20rem}}
/* the standard OSM sheet is far too loud next to this paper */
#map .leaflet-tile-pane{filter:grayscale(1) sepia(.25) contrast(.95) brightness(.96)}
@media (prefers-color-scheme:dark){
  #map .leaflet-tile-pane{filter:grayscale(1) invert(1) contrast(.75) brightness(.85)}
}
.map-btns{display:flex;gap:.4rem;margin:0 0 .7rem;flex-wrap:wrap}
.map-btns button{font-family:var(--sans);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.35rem .7rem;border:1px solid var(--rule);border-radius:2px;background:var(--paper);
  color:var(--muted);cursor:pointer}
.map-btns button:hover{border-color:var(--accent);color:var(--accent)}
.map-btns button.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.leaflet-popup-content{font-family:var(--serif);font-size:.9rem;line-height:1.45}
.leaflet-popup-content a{color:var(--accent)}
.leaflet-popup-content .pc,.leaflet-popup-content .pd{font-family:var(--sans);font-size:.68rem;
  color:var(--muted)}
.leaflet-container{font-family:var(--sans)}
.map figcaption{text-align:left;font-size:.86rem;line-height:1.5;color:var(--muted);max-width:46rem;
  margin-top:.9rem}

/* ---------- progress (admin) ---------- */
.pdial{display:flex;align-items:baseline;gap:.6rem;margin:.4rem 0 .2rem}
.pdial-n{font-size:clamp(3rem,11vw,5.2rem);font-weight:600;line-height:1;
  letter-spacing:-.03em;color:var(--accent)}
.pdial-of{font-size:clamp(1.3rem,4vw,2rem);color:var(--muted);letter-spacing:-.02em}
.pdial-l{font-family:var(--sans);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:.1rem 0 1.1rem}
.pbar{height:12px;background:var(--accent-soft);border:1px solid var(--rule);
  border-radius:2px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--accent)}
.ptab{width:100%;border-collapse:collapse;font-size:.95rem}
.ptab th{font-family:var(--sans);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);text-align:left;font-weight:400;padding:.45rem .6rem;
  border-bottom:1px solid var(--rule)}
.ptab td{padding:.32rem .6rem;border-bottom:1px solid var(--rule);vertical-align:middle}
.ptab td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ptab tr.none td{color:var(--muted)}
.ptab .yb{width:46%;min-width:6rem}
.ptab .yb i{display:block;height:9px;background:var(--accent);border-radius:1px}
.ptab .yb u{display:block;height:9px;background:var(--accent-soft);
  border:1px solid var(--rule);border-radius:1px}
.pnote{font-family:var(--sans);font-size:.8rem;line-height:1.6;color:var(--muted)}
details.variant summary{cursor:pointer;font-family:var(--sans);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:.6rem 0}
details.variant[open] summary{margin-bottom:1rem}
details.variant p{color:var(--ink);font-size:.95rem}

/* Compact chronological archive; search results retain their excerpts. */
.archive-years{display:flex;flex-wrap:wrap;gap:.2rem .75rem;align-items:center;
  font-family:var(--sans);font-size:.75rem;padding:.4rem 0 .7rem;border-bottom:1px solid var(--rule)}
.archive-years>span{color:var(--muted);margin-right:.25rem}
.archive-years a{padding:.25rem 0;text-underline-offset:3px}
#browse .year{margin:1.6rem 0 .35rem;scroll-margin-top:1rem}
.year-count{font-family:var(--sans);font-size:.7rem;color:var(--muted)}
.archive-entry{display:block;min-height:44px;padding:.5rem 0;border-bottom:1px solid var(--rule);
  text-decoration:none;font-size:1.05rem;line-height:1.4}
.archive-title{font-weight:600}
.archive-date{font-family:var(--sans);font-size:.75rem;color:var(--muted);white-space:nowrap;margin-left:.25rem}
.archive-entry:hover .archive-title{text-decoration:underline;text-underline-offset:3px;color:var(--accent)}
.archive-entry:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Sequential reading controls at the foot of each column. */
.column-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:2.5rem}
.column-nav-button{display:flex;flex-direction:column;gap:.35rem;padding:1rem;
  border:1px solid var(--rule);border-radius:3px;background:var(--accent-soft);text-decoration:none;min-height:44px}
.column-nav-label{font-family:var(--sans);font-size:.85rem;font-weight:600;color:var(--accent)}
.column-nav-title{font-size:.95rem;line-height:1.35;overflow-wrap:anywhere}
.column-nav-next{text-align:right}
.column-nav-button:hover{border-color:var(--accent)}
.column-nav-button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.column-nav-button.is-disabled{background:transparent;color:var(--muted)}
.column-nav-button.is-disabled .column-nav-label{color:var(--muted)}

/* ---------- family photographs (About) ---------- */
figure.photo{margin:2.8rem 0}
figure.photo img{height:auto}
figure.photo figcaption{font-size:.95rem;font-style:italic;line-height:1.5;max-width:34rem;margin:.75rem auto 0}
figure.photo .credit{display:block;font-style:normal;font-size:.8rem;margin-top:.3rem}

/* ---------- guestbook ---------- */
.gb-form{display:grid;gap:1.1rem;margin:2rem 0 3rem}
.gb-form label{display:grid;gap:.35rem;font-family:var(--sans);font-size:.8rem;color:var(--muted)}
.gb-form input,.gb-form textarea{font:inherit;font-family:var(--serif, inherit);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:3px;padding:.6rem .7rem;width:100%;box-sizing:border-box}
.gb-form input:focus,.gb-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.gb-hint{font-size:.72rem}
.gb-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gb button{font-family:var(--sans);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper);background:var(--accent);border:0;border-radius:3px;padding:.65rem 1.3rem;cursor:pointer;justify-self:start}
.gb button:disabled{opacity:.6;cursor:default}
.gb-status{font-family:var(--sans);font-size:.85rem;color:var(--accent);margin:0;min-height:1.2em}
.gb-head{font-size:1.2rem;margin-top:2.5rem}
.gb-entry{border-top:1px solid var(--rule);padding:1.2rem 0}
.gb-msg{white-space:pre-line;margin:0 0 .5rem}
.gb-by{font-family:var(--sans);font-size:.78rem;color:var(--muted);margin:0}
.gb-by a{color:var(--accent)}
.gb-empty{color:var(--muted);font-style:italic}
.gb-actions{display:flex;gap:.6rem;margin:.8rem 0 0}
.gb-actions .gb-del{background:transparent;color:var(--accent);border:1px solid var(--accent)}