:root{
  --paper:#f2e9d8; --paper-2:#e8dcc4; --card:#fbf5e7; --card-edge:#d9caa8;
  --ink:#241f1a; --ink-2:#5d5145; --ink-3:#8a7c68;
  --red:#a6392a; --red-2:#c0503c; --rule:#c9b892; --green:#3f5d4a;
  --shadow:0 18px 38px -18px rgba(50,36,20,.45), 0 2px 0 rgba(255,255,255,.6) inset;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
/* a display rule on a component must never beat the hidden attribute */
[hidden]{display:none!important}
html,body{margin:0}
body{
  font-family:var(--serif); color:var(--ink); min-height:100vh;
  background:
    radial-gradient(1200px 600px at 12% -10%, #fbf3e2 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #e9dcc2 0%, transparent 55%),
    linear-gradient(180deg,#efe5d0 0%,#e6d9bf 100%);
}
body::before{ /* paper grain */
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.35; z-index:0;
  background-image:
    repeating-linear-gradient(0deg,rgba(120,90,50,.035) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(120,90,50,.03) 0 1px,transparent 1px 4px);
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:99}
.skip:focus{left:1rem;top:1rem}

/* ---------- masthead ---------- */
.masthead{
  position:relative; z-index:2; display:grid; grid-template-columns:1fr auto auto auto;
  gap:1.2rem; align-items:center; padding:1.1rem clamp(1rem,3vw,2.2rem) .9rem;
  border-bottom:1px solid rgba(90,70,40,.25);
}
.brand{display:flex; align-items:center; gap:.85rem}
.brand-mark{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--red); color:#fdf6e7; font-family:var(--mono); font-size:.85rem;
  letter-spacing:.06em; box-shadow:0 2px 0 rgba(0,0,0,.18) inset, 0 6px 14px -6px rgba(120,40,30,.9);
  text-decoration:none; flex:0 0 auto;
}
/* the mark: a cream index card, tilted, carrying the initials — a Rolodex leaf
   inside the disc. Drawn as SVG so it stays crisp at any size. */
.brand-mark svg{width:44px; height:44px; display:block}
.lm-card{fill:#fdf6e7; stroke:rgba(90,20,16,.16); stroke-width:.8}
.lm-words{fill:var(--red); font-family:var(--mono); font-size:11.5px; font-weight:700;
  letter-spacing:.04em}
/* the mark is the staff door: same disc, but it should feel clickable */
a.brand-mark{transition:transform .15s ease, box-shadow .15s ease}
a.brand-mark:hover{transform:translateY(-1px);
  box-shadow:0 2px 0 rgba(0,0,0,.18) inset, 0 9px 18px -7px rgba(120,40,30,.95)}
a.brand-mark:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
@media(prefers-reduced-motion:reduce){a.brand-mark{transition:none}
a.brand-mark:hover{transform:none}}
h1{font-size:1.35rem; margin:0; letter-spacing:.14em; text-transform:uppercase; font-weight:600}
.tagline{margin:.1rem 0 0; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3)}
.searchwrap{position:relative}
#q{
  font-family:var(--mono); font-size:.82rem; width:min(38vw,340px); padding:.62rem .9rem .62rem 2.2rem;
  border:1px solid var(--rule); border-radius:2px; background:#fffdf6; color:var(--ink);
  box-shadow:0 1px 0 #fff inset;
}
#q:focus{outline:2px solid var(--red-2); outline-offset:1px}
.searchwrap::before{
  content:""; position:absolute; left:.8rem; top:50%; width:9px; height:9px; margin-top:-6px;
  border:1.5px solid var(--ink-3); border-radius:50%;
}
.searchwrap::after{
  content:""; position:absolute; left:1.42rem; top:50%; width:5px; height:1.5px; margin-top:2px;
  background:var(--ink-3); transform:rotate(45deg);
}
kbd{position:absolute; right:.5rem; top:50%; transform:translateY(-50%); font-family:var(--mono);
  font-size:.62rem; color:var(--ink-3); border:1px solid var(--rule); border-radius:3px; padding:.05rem .3rem}
.stats{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); text-align:right; line-height:1.6}

/* ---------- letter tabs ---------- */
.tabs{
  position:relative; z-index:3; display:flex; flex-wrap:wrap; gap:2px;
  padding:.55rem clamp(1rem,3vw,2.2rem) 0; border-bottom:2px solid rgba(90,70,40,.28);
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);
}
.tab{
  position:relative; font-family:var(--mono); font-size:.72rem; letter-spacing:.04em;
  border:1px solid var(--rule); border-bottom:none; background:linear-gradient(180deg,#f6efdd,#e4d7bb);
  color:var(--ink-2); padding:.35rem .5rem .3rem; cursor:pointer; min-width:34px;
  /* tabs stand taller than the cards: each is a raised divider */
  height:46px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:3px 3px 0 0; transition:transform .16s ease, background .16s ease;
}
.tab b{font-size:.8rem; font-weight:600; letter-spacing:.06em}
.tab i{font-style:normal; font-size:.55rem; color:var(--ink-3)}
.tab:hover{transform:translateY(-3px)}
.tab[aria-pressed="true"]{
  background:linear-gradient(180deg,#fffdf4,#efe4cb); color:var(--red);
  box-shadow:0 -3px 0 var(--red) inset; transform:translateY(-3px);
}
.tab:active{transform:translateY(0)}

/* ---------- tray ---------- */
main{position:relative; z-index:1; padding:1rem clamp(1rem,3vw,2.2rem) 3rem}
.tray-head{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin:.2rem 0 .9rem}
.count{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0}
.sortwrap{display:flex; align-items:center; gap:.45rem; font-family:var(--mono); font-size:.66rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3)}
#sort{font-family:var(--mono); font-size:.7rem; padding:.25rem .4rem; border:1px solid var(--rule);
  background:#fffdf6; color:var(--ink)}

/* ---------- cards ---------- */
.cards{
  display:grid; gap:1.15rem 1rem;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  perspective:1400px;
}
.card{
  position:relative; text-align:left; cursor:pointer; border:1px solid var(--card-edge);
  background:
    linear-gradient(180deg,#fffdf4 0%, var(--card) 40%, #f3e9d3 100%);
  border-radius:4px; padding:1rem 1rem 1.4rem; min-height:310px;
  display:flex; flex-direction:column; gap:.55rem;
  box-shadow:var(--shadow); color:inherit; font:inherit;
  transition:transform .18s ease, box-shadow .18s ease;
  /* rolodex rod notch */
}
.card::after{
  content:""; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%);
  width:34px; height:14px; border-radius:0 0 20px 20px; background:var(--paper-2);
  box-shadow:inset 0 2px 3px rgba(90,70,40,.22);
}
.card .head{display:flex; gap:.7rem; align-items:flex-start}
.card .idblock{flex:1; min-width:0}
.card:hover{transform:translateY(-4px) rotate(-.25deg); box-shadow:0 24px 44px -20px rgba(50,36,20,.55)}
.card:focus-visible{outline:2px solid var(--red-2); outline-offset:3px}
.card .roll{font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; color:var(--ink-3);
  text-transform:uppercase; display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--rule); padding-bottom:.45rem}
.card .nm{font-size:1.06rem; line-height:1.2; margin:.15rem 0 0; letter-spacing:.01em}
.card .kind{font-family:var(--mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--red)}
.card .quote{
  font-size:.79rem; line-height:1.42; color:var(--ink-2); font-style:italic;
  border-left:2px solid var(--rule); padding-left:.5rem; margin:.55rem 0 0; flex:1 1 auto;
  min-height:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.card .meta{margin-top:.5rem; display:flex; gap:.7rem; font-family:var(--mono); font-size:.62rem;
  color:var(--ink-3); letter-spacing:.04em}
.card .meta b{color:var(--ink); font-weight:600}

.card .portrait{
  flex:0 0 auto; width:46px; height:46px; border-radius:2px; border:1px solid var(--card-edge);
  object-fit:cover; filter:sepia(.18) contrast(1.02);
}
.card .mono-plate{
  flex:0 0 auto; width:46px; height:46px;
  display:grid; place-items:center; border:1px dashed var(--rule); color:var(--ink-3);
  font-family:var(--mono); font-size:.75rem; letter-spacing:.05em;
}
.card .cat{font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green)}
.card .deep-link{
  align-self:flex-start; font-family:var(--mono); font-size:.58rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--red); text-decoration:none; border-bottom:1px dotted var(--red);
  padding-bottom:1px; margin-top:.5rem;
}
.card .deep-link:hover{color:var(--red-2)}
.empty{font-family:var(--mono); font-size:.8rem; color:var(--ink-3); padding:2rem 0}
.colophon{max-width:66ch; margin:2.6rem 0 0; font-size:.8rem; line-height:1.55; color:var(--ink-2);
  border-top:1px solid rgba(90,70,40,.2); padding-top:1rem}
.colophon a{color:var(--red)}
.colophon strong{color:var(--ink)}

/* ---------- advertising ---------- */
.adslot{margin:0 0 1.1rem}
.adslot-foot{margin:1.7rem 0 0}
/* in-feed unit: a full grid row, centred, so it reads as a break between cards */
.adslot-in{grid-column:1/-1; margin:.2rem 0 .45rem}
.adslot-in .ad{max-width:640px; margin:0 auto}
.ad{
  display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:start;
  border:1px solid var(--card-edge); border-left:3px solid var(--rule);
  background:linear-gradient(180deg,#fdfaf0,#f7f0df); border-radius:3px;
  padding:.7rem .85rem .65rem; max-width:640px;
}
.ad-mark{width:40px; height:40px; display:grid; place-items:center; border-radius:2px;
  border:1px solid var(--rule); background:#fffdf6; font-family:var(--mono);
  font-size:.6rem; letter-spacing:.04em; color:var(--ink-2)}
.ad-brand{font-family:var(--mono); font-size:.5rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 .14rem}
.ad-head{font-size:.93rem; line-height:1.25; margin:0; letter-spacing:.005em}
.ad-blurb{font-size:.78rem; line-height:1.45; color:var(--ink-2); margin:.18rem 0 .35rem}
.ad-foot{display:flex; align-items:baseline; gap:.6rem; margin:0;
  font-family:var(--mono); font-size:.56rem; letter-spacing:.08em; text-transform:uppercase}
.ad-cta{color:var(--red); text-decoration:none; border:0; border-bottom:1px dotted var(--red);
  background:none; padding:0 0 1px; cursor:pointer; font:inherit; letter-spacing:inherit;
  text-transform:inherit}
.ad-cta:hover{color:var(--red-2); border-bottom-color:var(--red-2)}
.ad-label{margin-left:auto; color:var(--ink-3); white-space:nowrap}
.ad-net{min-height:90px}
/* the sales line: an offer to buy the slot, kept quieter than the unit itself */
.ad-book{display:flex; gap:.6rem; flex-wrap:wrap; align-items:baseline; max-width:640px;
  margin:.3rem auto 0; padding:0 .2rem; font-family:var(--mono); font-size:.56rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.adslot-in .ad-book{justify-content:center}
.ad-book a{color:var(--ink-2); text-decoration:none; border-bottom:1px dotted var(--rule)}
.ad-book a:hover{color:var(--red); border-bottom-color:var(--red)}
.ad-book-note{margin-left:auto; color:var(--ink-3); white-space:nowrap}
@media(max-width:520px){.ad-book-note{margin-left:0}}

/* ---------- dossier ---------- */
.scrim{position:fixed; inset:0; background:rgba(36,28,18,.55); backdrop-filter:blur(2px); z-index:10}
.dossier{
  position:fixed; z-index:11; top:2.5vh; bottom:2.5vh; right:clamp(.5rem,2vw,2.5rem);
  width:min(880px,94vw); background:linear-gradient(180deg,#fffdf5,#f6edda 60%,#f0e5cd);
  border:1px solid var(--card-edge); border-radius:6px; box-shadow:0 40px 80px -30px rgba(20,12,4,.7);
  animation:slide .22s ease-out;
}
@keyframes slide{from{transform:translateX(24px); opacity:0}to{transform:none; opacity:1}}
.dossier-scroll{overflow-y:auto; overflow-x:hidden; height:100%; padding:1.6rem clamp(1.1rem,2.4vw,2rem) 2.4rem; scrollbar-width:thin}
.close{
  position:absolute; top:.7rem; right:.8rem; z-index:2; border:1px solid var(--rule);
  background:#fffdf6; color:var(--ink-2); width:32px; height:32px; border-radius:50%;
  font-family:var(--mono); cursor:pointer;
}
.close:hover{color:var(--red); border-color:var(--red)}
.dossier h2{margin:0; font-size:1.7rem; line-height:1.1; letter-spacing:-.01em; padding-right:2.5rem}
.dossier h3{font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin:1.9rem 0 .7rem; border-bottom:1px solid var(--rule); padding-bottom:.3rem}
.d-top{display:grid; grid-template-columns:132px 1fr; gap:1.1rem; align-items:start}
.photo{width:132px; height:160px; object-fit:cover; border:1px solid var(--card-edge); border-radius:2px;
  filter:sepia(.12); background:#e9dfc7}
.photo-credit{font-family:var(--mono); font-size:.55rem; color:var(--ink-3); line-height:1.45; margin-top:.35rem}
.photo-credit a{color:var(--ink-3)}
.d-sub{font-family:var(--mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--red); margin:.35rem 0 .6rem}
.d-nums{display:flex; flex-wrap:wrap; gap:.4rem; margin:.2rem 0 .1rem}
.pill{font-family:var(--mono); font-size:.62rem; letter-spacing:.05em; border:1px solid var(--rule);
  border-radius:999px; padding:.18rem .55rem; color:var(--ink-2); background:#fffdf6}
.pill b{color:var(--ink)}
/* correspondence: who wrote to whom */
.corrsum{display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.6rem}
.corrsum b{color:var(--ink); font-size:.72rem}
/* correspondence timeline: sent above, received beside, by year */
.tl{display:flex; align-items:flex-end; gap:2px; height:74px; margin:.5rem 0 .1rem;
  padding-bottom:1.05rem; border-bottom:1px solid var(--rule); position:relative}
.tlcol{position:relative; flex:1 1 0; height:100%; display:flex; align-items:flex-end; gap:1px}
.tlb{flex:1 1 0; border-radius:1px 1px 0 0}
.tlb.f{background:var(--red); opacity:.92}
.tlb.t{background:#4a6b52; opacity:.92}
.tlcol i{position:absolute; left:-3px; right:-3px; bottom:-1rem; text-align:center; font-style:normal;
  font-family:var(--mono); font-size:.5rem; color:var(--ink-3); letter-spacing:-.02em}
/* set when the panel is too narrow to label every year: keeps the slot, drops the glyph */
.tlcol i.hide{visibility:hidden}
.tlcol{cursor:pointer; outline:none; border-radius:1px}
.tlcol.on .tlb{filter:brightness(1.15) saturate(1.15)}
.tlcol.on{background:rgba(160,40,34,.06)}
.tlcol:focus-visible{outline:2px solid var(--ink-2); outline-offset:1px}
.tlread{border:1px solid var(--card-edge); background:#fffdf6; border-radius:3px;
  padding:.5rem .6rem .55rem; margin:.2rem 0 .45rem; min-height:3.1rem}
.tlhead{display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3)}
.tlhead b{font-size:.86rem; letter-spacing:0; color:var(--ink)}
.tlmsg{display:flex; align-items:baseline; flex-wrap:wrap; gap:.3rem .5rem; margin-top:.3rem;
  font-size:.82rem; line-height:1.35}
.tlmsg a{color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(160,40,34,.35);
  overflow-wrap:anywhere}
.tlmsg a:hover{color:var(--red); border-bottom-color:var(--red)}
.tlmsg .tlnone{color:var(--ink-3)}
.tlmsg .mmeta{font-family:var(--mono); font-size:.56rem; color:var(--ink-3); letter-spacing:.03em}
.tlkey{display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; font-family:var(--mono);
  font-size:.56rem; color:var(--ink-3); line-height:1.5; margin:.1rem 0 .6rem}
.tlkey .k{width:8px; height:8px; border-radius:2px; display:inline-block; margin-left:.5rem}
.tlkey .k.f{background:var(--red)}
.tlkey .k.t{background:#4a6b52}
.tlkey .k:first-child{margin-left:0}
.mail{list-style:none; margin:0 0 .5rem; padding:0; display:grid; gap:.35rem}
.mail li{display:grid; grid-template-columns:5.2rem 1fr; gap:.15rem .6rem; align-items:baseline;
  border:1px solid var(--card-edge); background:#fffdf6; border-radius:3px; padding:.45rem .55rem;
  font-size:.82rem}
.mail a{color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(160,40,34,.35);
  overflow-wrap:anywhere; line-height:1.35}
.mail a:hover{color:var(--red); border-bottom-color:var(--red)}
.mail .mmeta{grid-column:2; font-family:var(--mono); font-size:.56rem; color:var(--ink-3); letter-spacing:.04em}
.mrole{font-family:var(--mono); font-size:.54rem; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--ink-3); border-radius:2px; padding:.16rem .35rem; text-align:center}
.mrole.f{background:var(--red)}
.mrole.t{background:#4a6b52}
.mrole.cc{background:#7d6a4b}
.q{border:1px solid var(--card-edge); background:#fffdf6; border-radius:3px; padding:.8rem .9rem .7rem;
  margin-bottom:.7rem; box-shadow:0 1px 0 rgba(255,255,255,.7) inset}
.q blockquote{margin:0 0 .55rem; font-size:.94rem; line-height:1.5; overflow-wrap:anywhere}
.q blockquote::before{content:"“"; color:var(--red); font-size:1.4rem; line-height:0; vertical-align:-.25rem; margin-right:.1rem}
.q blockquote::after{content:"”"; color:var(--red); font-size:1.4rem; line-height:0; vertical-align:-.35rem; margin-left:.05rem}
.q .src{display:flex; flex-wrap:wrap; gap:.3rem .8rem; align-items:center;
  font-family:var(--mono); font-size:.6rem; color:var(--ink-3); border-top:1px dotted var(--rule); padding-top:.5rem}
.q .src .file{color:var(--ink-2)}
.q a.deep{
  margin-left:auto; font-family:var(--mono); font-size:.63rem; letter-spacing:.04em;
  text-decoration:none; color:#fff; background:var(--red); border-radius:2px; padding:.3rem .55rem;
  box-shadow:0 1px 0 rgba(0,0,0,.18);
}
.q a.deep:hover{background:var(--red-2)}
.est{font-family:var(--mono); font-size:.52rem; border:1px solid var(--rule); border-radius:2px;
  padding:0 .22rem; color:var(--ink-3); margin-left:.25rem}
.chips{display:flex; flex-wrap:wrap; gap:.4rem}
.chip{
  font-family:var(--mono); font-size:.66rem; border:1px solid var(--rule); background:#fffdf6;
  border-radius:999px; padding:.22rem .6rem; cursor:pointer; color:var(--ink-2);
}
.chip:hover{border-color:var(--red); color:var(--red)}
.chip span{color:var(--ink-3); margin-left:.3rem}
.roles{display:grid; gap:.55rem}
.rrow{border:1px solid var(--card-edge); background:#fffdf6; border-radius:3px; padding:.6rem .7rem .55rem}
.rhead{display:flex; flex-wrap:wrap; gap:.3rem .6rem; align-items:baseline; margin-bottom:.35rem}
.rhead b{font-size:.9rem}
.rhead .rr{display:flex; gap:.25rem}
.rhead .rr i{font-family:var(--mono); font-size:.55rem; font-style:normal; letter-spacing:.06em;
  text-transform:uppercase; border:1px solid var(--rule); border-radius:999px; padding:0 .35rem;
  color:var(--red); background:#fff}
.rhead .rc{margin-left:auto; font-family:var(--mono); font-size:.56rem; color:var(--ink-3)}
.rrow blockquote{margin:0 0 .3rem; font-size:.84rem; line-height:1.45; color:var(--ink-2); overflow-wrap:anywhere}
.rrow blockquote::before{content:"“"; color:var(--red); margin-right:.05rem}
.rrow blockquote::after{content:"”"; color:var(--red); margin-left:.05rem}
.rlink{font-family:var(--mono); font-size:.56rem; color:var(--red); text-decoration:none}
.rlink:hover{text-decoration:underline}
.nourl{font-family:var(--mono); font-size:.56rem; color:var(--ink-3)}
.pchip{font-family:var(--serif); font-size:.92rem; background:none; border:0; padding:0; cursor:pointer;
  color:var(--ink); border-bottom:1px solid var(--rule)}
.pchip:hover{color:var(--red); border-color:var(--red)}
.sharedrow{display:flex; flex-wrap:wrap; gap:.35rem}
.shared{font-family:var(--mono); font-size:.62rem; border:1px solid var(--rule); background:#fffdf6;
  border-radius:999px; padding:.2rem .55rem; color:var(--ink-2)}
.shared b{color:var(--ink-3); margin-left:.35rem; font-weight:400}
.tagrow{display:flex; gap:.3rem; margin:.1rem 0}
.tag{font-family:var(--mono); font-size:.5rem; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--red); border-radius:2px; padding:.12rem .35rem}
.tag-alt{background:#efe6d2; color:var(--ink-2)}
.nvc{font-weight:400; color:var(--ink-3)}
.rel{flex:0 0 auto; margin:.45rem 0 .1rem; font-family:var(--mono); font-size:.58rem; color:var(--ink-2);
  display:grid; gap:.12rem}
.relrow{display:flex; gap:.35rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.relrow em{font-style:normal; color:var(--red); letter-spacing:.06em; text-transform:uppercase; font-size:.5rem;
  padding-top:.12rem}
.relrow span{overflow:hidden; text-overflow:ellipsis}
.flist{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:.3rem; margin-bottom:.5rem}
.frow{
  display:grid; grid-template-columns:1fr auto; gap:0 .4rem; align-items:baseline;
  border:1px solid var(--card-edge); background:#fffdf6; border-radius:2px;
  padding:.34rem .5rem; text-decoration:none; color:var(--ink-2);
  font-family:var(--mono); font-size:.63rem; line-height:1.3;
}
.frow .fk{color:var(--ink); overflow-wrap:anywhere}
.frow .fds{grid-column:1; color:var(--ink-3); font-size:.55rem; letter-spacing:.06em; text-transform:uppercase}
.frow .fgo{grid-column:2; grid-row:1/3; align-self:center; color:var(--red); font-size:.58rem; white-space:nowrap}
.frow:hover{border-color:var(--red); background:#fff}
.frow.nolink .fgo{color:var(--ink-3)}
.fnote{font-family:var(--mono); font-size:.56rem; color:var(--ink-3); line-height:1.6; margin:.1rem 0 .4rem}
.aliases{font-family:var(--mono); font-size:.6rem; color:var(--ink-3); margin:.1rem 0 .6rem; line-height:1.9}
.alias{font-family:var(--mono); font-size:.6rem; border:1px dotted var(--rule); background:#fffdf6;
  border-radius:2px; padding:.1rem .4rem; margin-left:.3rem; color:var(--ink-2)}
.varcount{font-family:var(--mono); font-size:.58rem; letter-spacing:.04em; color:var(--ink-3);
  margin:.35rem 0 0}
.bars{display:grid; gap:.3rem; font-family:var(--mono); font-size:.62rem; color:var(--ink-2)}
.bars div{display:grid; grid-template-columns:180px 1fr 60px; gap:.5rem; align-items:center}
.bars i{display:block; height:8px; background:var(--red); opacity:.5; border-radius:1px}
.dossier.about{width:min(680px,94vw)}
.dossier.about p,.dossier.about li{font-size:.88rem; line-height:1.6; color:var(--ink-2)}
.dossier.about code{font-family:var(--mono); font-size:.78rem; background:#fffdf6; padding:0 .2rem}
.loading{font-family:var(--mono); font-size:.72rem; color:var(--ink-3); padding:2rem 0}

/* ---------- donation portal ---------- */
.head-actions{display:flex; gap:.4rem; align-items:center}
.ghostbtn{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--rule); background:#fffdf6; color:var(--ink-2);
  padding:.42rem .7rem; border-radius:2px; cursor:pointer; white-space:nowrap;
}
.ghostbtn:hover{color:var(--red); border-color:var(--red)}
.ghostbtn:focus-visible{outline:2px solid var(--red-2); outline-offset:1px}
.dossier.give-panel{
  right:auto; left:50%; transform:translateX(-50%); width:min(620px,94vw);
  top:8vh; bottom:auto; animation:pop .18s ease-out;
}
/* the panel is only as tall as its content, so the scroll area needs the cap */
.give-panel .dossier-scroll{height:auto; max-height:calc(80vh - 2rem)}
@keyframes pop{from{opacity:0; transform:translateX(-50%) translateY(10px)}to{opacity:1; transform:translateX(-50%)}}
.give-lede{font-size:.92rem; line-height:1.6; color:var(--ink-2); margin:.8rem 0 0}
.give-quiet{color:var(--ink-3); font-size:.84rem}
.give-thanks{border-left:3px solid var(--green); background:#f2f7f1; padding:.6rem .8rem;
  font-size:.85rem; line-height:1.5; color:var(--ink-2); margin:1rem 0 0}
.give-h3{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:1.4rem 0 .6rem; border:0; padding:0}
.amtgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); gap:.45rem}
.amtbtn{
  display:block; text-align:center; text-decoration:none; cursor:pointer;
  font-family:var(--mono); font-size:1rem; letter-spacing:.03em; color:var(--ink);
  background:linear-gradient(180deg,#fffdf6,#f4ead4); border:1px solid var(--rule);
  border-radius:3px; padding:.72rem .4rem; box-shadow:0 1px 0 #fff inset;
}
.amtbtn:hover{border-color:var(--red); color:var(--red); background:linear-gradient(180deg,#fffdf6,#fbeee0)}
.amtbtn:focus-visible{outline:2px solid var(--red-2); outline-offset:2px}
.amtbtn[aria-disabled="true"]{opacity:.45; cursor:not-allowed; color:var(--ink-3)}
.amtbtn[aria-disabled="true"]:hover{border-color:var(--rule); color:var(--ink-3); background:linear-gradient(180deg,#fffdf6,#f4ead4)}
.nudge .amtgrid{margin:0 0 .9rem}
.nudge .amtbtn{font-size:.86rem; padding:.5rem .3rem}
.give-options{display:grid; gap:.7rem; margin:1.2rem 0 0}
.give-card{border:1px solid var(--card-edge); background:#fffdf6; border-radius:3px;
  padding:.9rem 1rem 1rem; box-shadow:0 1px 0 rgba(255,255,255,.7) inset}
.give-card h3{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 .45rem; border:0; padding:0}
.give-card p{font-size:.88rem; line-height:1.55; color:var(--ink-2); margin:0 0 .8rem}
.givebtn{
  display:inline-block; font-family:var(--mono); font-size:.7rem; letter-spacing:.09em;
  text-transform:uppercase; border:1px solid #7d2b1e; border-radius:2px; cursor:pointer;
  background:linear-gradient(180deg,var(--red-2),var(--red)); color:#fdf6e7;
  padding:.6rem .95rem; text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 6px 14px -8px rgba(120,40,30,.9);
}
.givebtn:hover{filter:brightness(1.06)}
.givebtn:disabled{opacity:.55; cursor:progress}
.givebtn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.give-fine{font-family:var(--mono); font-size:.6rem; line-height:1.65; color:var(--ink-3); margin:.9rem 0 0}
.linkbtn{font:inherit; font-size:.6rem; letter-spacing:inherit; background:none; border:0;
  padding:0; color:var(--red); text-decoration:underline; cursor:pointer}
.linkbtn:hover{color:var(--ink)}

/* suggestion box */
.fbform{margin:1.1rem 0 0}
.fblabel{display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.3rem}
.fblabel span{text-transform:none; letter-spacing:.02em; color:var(--ink-3); opacity:.8}
.fbform textarea,.fbform input{
  width:100%; font-family:var(--serif); font-size:.9rem; color:var(--ink);
  background:#fffdf6; border:1px solid var(--rule); border-radius:2px; padding:.55rem .65rem;
}
.fbform textarea{resize:vertical; min-height:110px; line-height:1.5}
.fbform textarea:focus,.fbform input:focus{outline:2px solid var(--red-2); outline-offset:1px}
.fbrow{display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:.8rem}
.fbhoney{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.fbstatus{font-family:var(--mono); font-size:.66rem; line-height:1.5; margin:.8rem 0 0; min-height:1em}
.fbstatus.good{color:var(--green)}
.fbstatus.bad{color:var(--red)}
.fbok{border-left:3px solid var(--green); background:#f2f7f1; padding:.7rem .85rem;
  font-size:.9rem; line-height:1.6; color:var(--ink-2)}
.fbform .givebtn{margin-top:.9rem}

/* in-page card form (pay.js) — Stripe's fields are iframes, so this styles the
   frame around them, never their contents */
.paybox{border:1px solid var(--card-edge); background:#fffdf6; border-radius:3px;
  padding:.9rem .9rem 1rem}
.payamounts{display:grid; grid-template-columns:repeat(auto-fit,minmax(74px,1fr)); gap:.4rem}
.payamt{
  font-family:var(--mono); font-size:.92rem; letter-spacing:.03em; color:var(--ink); cursor:pointer;
  background:linear-gradient(180deg,#fffdf6,#f4ead4); border:1px solid var(--rule);
  border-radius:3px; padding:.55rem .3rem; box-shadow:0 1px 0 #fff inset;
}
.payamt:hover{border-color:var(--red); color:var(--red)}
.payamt:focus-visible{outline:2px solid var(--red-2); outline-offset:2px}
.payamt[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fbf5e7}
.paywait{margin:.75rem 0 0; font-size:.85rem; line-height:1.5; color:var(--ink-3, #5a5a5a)}
.paycustom{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin:.75rem 0 0;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3)}
.paycustom input{width:6.5rem; font-family:var(--mono); font-size:.85rem; color:var(--ink);
  background:#fffdf6; border:1px solid var(--rule); border-radius:2px; padding:.32rem .45rem}
.paycustom input:focus{outline:2px solid var(--red-2); outline-offset:1px}
.payrange{text-transform:none; letter-spacing:0; font-size:.6rem}
.payemail{display:flex; flex-direction:column; gap:.2rem; margin:.8rem 0 0;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3)}
.payemail input{font-family:var(--mono); font-size:.82rem; letter-spacing:0; text-transform:none;
  color:var(--ink); background:#fffdf6; border:1px solid var(--rule); border-radius:2px;
  padding:.36rem .45rem}
.payemail input:focus{outline:2px solid var(--red-2); outline-offset:1px}
.payoptional{text-transform:none; letter-spacing:0; font-size:.6rem; color:var(--ink-4, var(--ink-3));
  font-weight:400; margin-left:.15rem}
.payfine{text-transform:none; letter-spacing:0; font-size:.6rem; line-height:1.5; color:var(--ink-3)}
.payreceipt{font-family:var(--mono); font-size:.68rem; letter-spacing:.02em; color:var(--ink-2)}
.payreceipt a{color:var(--red); text-decoration:underline; text-underline-offset:2px}
.payslot{margin:.9rem 0 0}
.payslot:empty{margin:0}
.payactions{margin:.85rem 0 0}
.payactions .givebtn{width:100%}
.paystatus{font-family:var(--mono); font-size:.64rem; line-height:1.55; letter-spacing:.01em;
  color:var(--ink-3); margin:.6rem 0 0; min-height:1em}
.paystatus.bad{color:var(--red)}
.paydone{border-left:3px solid var(--green); background:#f2f7f1; padding:.7rem .85rem}
.paydone h3{margin:0 0 .3rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green)}
.paydone p{margin:0 0 .6rem; font-size:.88rem; line-height:1.55; color:var(--ink-2)}

/* the reminder */
.nudge{
  position:fixed; z-index:12; left:50%; bottom:clamp(1rem,4vh,3rem); transform:translateX(-50%);
  width:min(520px,92vw); background:linear-gradient(180deg,#fffdf5,#f6edda);
  border:1px solid var(--card-edge); border-radius:6px; padding:1.2rem clamp(1rem,3vw,1.5rem) 1.1rem;
  box-shadow:0 30px 60px -24px rgba(20,12,4,.6); animation:rise .24s ease-out;
}
@keyframes rise{from{opacity:0; transform:translateX(-50%) translateY(14px)}to{opacity:1; transform:translateX(-50%)}}
.nudge .close{position:absolute; top:.5rem; right:.55rem; width:28px; height:28px}
.nudge h2{margin:0 2rem .5rem 0; font-size:1.15rem; line-height:1.25}
.nudge p{font-size:.86rem; line-height:1.55; color:var(--ink-2); margin:0 0 .9rem}
.nudge-actions{display:flex; gap:.55rem; align-items:center; flex-wrap:wrap}
.thanks-strip{
  position:fixed; z-index:13; left:50%; bottom:1.2rem; transform:translateX(-50%);
  display:flex; gap:.9rem; align-items:center; max-width:92vw;
  font-family:var(--mono); font-size:.68rem; line-height:1.5; letter-spacing:.02em;
  background:var(--ink); color:var(--paper); border-radius:3px; padding:.7rem 1rem;
  box-shadow:0 18px 30px -18px rgba(0,0,0,.7);
}
.thanks-strip .linkbtn{color:#f3e2b8}

@media (max-width:720px){
  /* donate sits on the title row, top-right, above the search field */
  .masthead{grid-template-columns:1fr auto; gap:.7rem; align-items:start}
  .brand{grid-column:1; grid-row:1}
  .head-actions{grid-column:2; grid-row:1; justify-content:flex-end; align-self:start;
    flex-direction:column; align-items:stretch; gap:.35rem}
  .head-actions .ghostbtn{font-size:.55rem; padding:.42rem .55rem; text-align:center}
  .brand h1{font-size:1.15rem}
  .searchwrap{grid-column:1/-1; grid-row:2}
  .stats{grid-column:1/-1; grid-row:3}
  #q{width:100%}
  .dossier.give-panel{top:auto; bottom:0; width:100vw; border-radius:6px 6px 0 0}
  .give-panel .dossier-scroll{max-height:80vh}
  .fbrow{grid-template-columns:1fr}
  .nudge{bottom:0; width:100vw; border-radius:6px 6px 0 0}
  .thanks-strip{bottom:0; width:100vw; max-width:100vw; border-radius:0; justify-content:space-between}
  .stats{text-align:left}
  .cards{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.8rem}
  .card{min-height:270px; padding:.8rem .8rem 1.3rem}
  .d-top{grid-template-columns:1fr}
  .photo{width:100%; height:190px}
  .bars div{grid-template-columns:110px 1fr 46px}
  /* labels are thinned to every second or third year here, so they can grow */
  .tlcol i{font-size:.58rem; letter-spacing:0}
  .ad{max-width:none}
  .ad-mark{width:34px; height:34px; font-size:.55rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}