/* 28 Days of Black History — Archives stylesheet (shared across all archive pages) */
:root{
  --paper:#F2EDE9; --paper-2:#EAE2D8;
  --rust:#BF5315; --rust-dark:#9C4310;
  --pine:#1E4637; --pine-deep:#16352A;
  --ink:#1A1512; --sage:#DFE9C1; --wheat:#F2C791; --marigold:#D9922B;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --maxw:1180px;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
a{color:inherit;}
img{max-width:100%;display:block;}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;z-index:100;}
.skip:focus{left:0;}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--marigold);outline-offset:3px;border-radius:2px;}

.wordmark{font-family:var(--serif);line-height:.94;font-weight:600;letter-spacing:-.01em;text-decoration:none;display:inline-block;}
.wordmark .l1{display:block;font-size:.62em;}
.wordmark .l2{display:block;}
.wordmark .of{font-style:italic;font-weight:400;font-size:.7em;text-decoration:underline;text-underline-offset:.12em;text-decoration-thickness:.04em;}

header.site{padding:28px 0 14px;}
.header-grid{display:flex;align-items:center;justify-content:space-between;gap:28px;}
nav.primary ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:26px;font-size:16px;}
nav.primary a{color:var(--rust);text-decoration:none;font-weight:500;padding-bottom:3px;border-bottom:2px solid transparent;transition:border-color .15s,color .15s;}
nav.primary a:hover{border-color:var(--rust);color:var(--rust-dark);}
nav.primary a.active{border-color:var(--rust);}
nav.primary a.nav-subscribe{background:var(--rust);color:var(--paper);padding:11px 22px;border-radius:999px;border-bottom:0;transition:background .15s;}
nav.primary a.nav-subscribe:hover{background:var(--rust-dark);color:var(--paper);border-bottom:0;}
.brand{text-align:left;}
.brand .wordmark{color:var(--rust);font-size:30px;}

.arc-hero{padding:40px 0 20px;border-bottom:1px solid var(--paper-2);}
.arc-hero h1{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.0;margin:0 0 14px;color:var(--rust);}
.arc-hero p.lede{font-size:1.15rem;color:#33291f;max-width:60ch;margin:0 0 26px;}

.controls{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin:0 0 6px;}
.searchbox{position:relative;flex:1 1 320px;max-width:440px;}
.searchbox input{width:100%;font-family:var(--sans);font-size:16px;padding:13px 16px 13px 44px;border:1.5px solid #d8cfc3;border-radius:12px;background:#fff;color:var(--ink);}
.searchbox input::placeholder{color:#94897a;}
.searchbox svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#94897a;}
.tabs{display:flex;gap:6px;background:#fff;border:1px solid var(--paper-2);border-radius:999px;padding:5px;}
.tabs button{font-family:var(--sans);font-size:14.5px;font-weight:500;border:0;background:transparent;color:#6b6155;padding:9px 18px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s;}
.tabs button.active{background:var(--pine);color:#fff;}
.tabs button:hover:not(.active){color:var(--ink);}
.count{font-size:14px;color:#6b6155;margin:18px 0 0;}

.group{margin:34px 0 0;}
.group-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-bottom:2px solid var(--rust);padding-bottom:10px;margin-bottom:8px;}
.group-head .g-year{font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--ink);line-height:1;}
.group-head .g-theme{font-size:.98rem;color:var(--rust);font-weight:500;font-style:italic;font-family:var(--serif);}
.group-head .g-num{margin-left:auto;font-size:13px;color:#8a8073;}

ul.posts{list-style:none;margin:0;padding:0;}
li.post-row{border-bottom:1px solid var(--paper-2);padding:20px 0;display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:start;}
li.post-row .p-thumb{display:block;width:150px;height:112px;border-radius:12px;overflow:hidden;background:var(--paper-2);}
li.post-row .p-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
li.post-row .p-thumb:hover img{transform:scale(1.05);}
li.post-row .p-thumb.noimg{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--serif);color:var(--pine);line-height:1.1;background:var(--sage);}
li.post-row .p-thumb.noimg .yr{font-size:1.3rem;font-weight:600;}
li.post-row .p-thumb.noimg .d{font-size:.8rem;color:#5a6b52;}
li.post-row h3{margin:0 0 7px;font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1.16;letter-spacing:-.01em;}
li.post-row h3 a{text-decoration:none;color:var(--ink);transition:color .15s;}
li.post-row h3 a:hover{color:var(--rust);}
li.post-row .p-ex{margin:0 0 12px;color:#4a4034;font-size:1.02rem;}
.taglist{display:flex;flex-wrap:wrap;gap:8px;}
.tag{font-size:12.5px;color:var(--rust);background:#fff;border:1px solid #e6d9cc;border-radius:999px;padding:5px 12px;text-decoration:none;transition:background .15s,color .15s,border-color .15s;}
.tag:hover{background:var(--rust);color:#fff;border-color:var(--rust);}
.tag.big{font-size:14px;padding:8px 16px;}
.empty{padding:60px 0;text-align:center;color:#6b6155;}
.empty b{color:var(--ink);}
.cloud{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0;}

.post-view{padding:16px 0 20px;}
.backlink{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;color:var(--rust);text-decoration:none;font-weight:500;margin:8px 0 26px;}
.backlink:hover{color:var(--rust-dark);}
.post-wrap{max-width:720px;margin:0 auto;}
.post-meta{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font-size:14px;color:#8a8073;margin:0 0 16px;}
.post-meta .theme-pill{color:var(--pine);background:var(--sage);border-radius:999px;padding:4px 13px;font-weight:500;text-decoration:none;}
.post-view h1{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;font-size:clamp(2rem,5vw,3.1rem);line-height:1.06;margin:0 0 22px;color:var(--ink);}
.lead-img{border-radius:14px;margin:0 0 26px;width:100%;}
.article{font-size:1.15rem;line-height:1.75;color:#2c241c;}
.article p{margin:0 0 22px;}
.article p.first::first-letter{font-family:var(--serif);font-size:3.4rem;line-height:.8;float:left;padding:6px 12px 0 0;color:var(--rust);font-weight:600;}
.article a{color:var(--rust);font-weight:500;text-underline-offset:.16em;}
.article a:hover{color:var(--rust-dark);}
.article img{border-radius:12px;margin:8px 0 24px;}
.article h2,.article h3{font-family:var(--serif);font-weight:500;color:var(--ink);line-height:1.2;margin:34px 0 14px;}
.article blockquote{margin:24px 0;padding:6px 0 6px 22px;border-left:3px solid var(--rust);font-style:italic;color:#4a4034;}
.article figure{margin:26px 0;}
.article figure img{border-radius:12px;margin:0 0 8px;width:100%;}
.article p.caption,.article figcaption{font-size:.9rem;color:#8a8073;font-style:italic;line-height:1.5;margin:0 0 22px;}
.article figure p.caption{margin:0;}
.post-foot{margin:34px 0 0;padding:26px 0 0;border-top:1px solid var(--paper-2);}
.share-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 30px;}
.share-row .lab{font-size:14px;color:#6b6155;font-weight:500;}
.share-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:#fff;border:1px solid #e6d9cc;color:var(--ink);cursor:pointer;transition:background .15s,color .15s,border-color .15s;text-decoration:none;}
.share-btn:hover{background:var(--pine);color:#fff;border-color:var(--pine);}
.share-btn svg{width:17px;height:17px;}
.copied{font-size:13px;color:var(--pine);opacity:0;transition:opacity .2s;}
.copied.show{opacity:1;}

.sub-prompt{background:var(--pine);color:var(--paper);border-radius:18px;padding:34px 34px 36px;}
.sub-prompt h3{font-family:var(--serif);font-weight:500;font-size:1.7rem;margin:0 0 8px;color:#fff;}
.sub-prompt p{margin:0 0 20px;color:#cdd8ce;font-size:1.02rem;}
.sub-prompt form{display:flex;gap:10px;flex-wrap:wrap;}
.sub-prompt input[type=email]{flex:1 1 220px;font-family:var(--sans);font-size:16px;padding:14px 16px;border-radius:10px;border:0;background:#fff;color:var(--ink);}
.sub-prompt button{font-family:var(--sans);font-weight:600;font-size:15px;background:var(--rust);color:#fff;border:0;border-radius:10px;padding:14px 26px;cursor:pointer;transition:background .15s;white-space:nowrap;}
.sub-prompt button:hover{background:var(--wheat);color:var(--ink);}

.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px 0 0;}
.pn{display:block;border:1px solid var(--paper-2);border-radius:14px;padding:16px 18px;text-decoration:none;background:#fff;transition:border-color .15s;}
.pn:hover{border-color:var(--rust);}
.pn .k{display:block;font-size:12px;color:#8a8073;text-transform:uppercase;letter-spacing:.06em;}
.pn .t{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--ink);margin-top:4px;line-height:1.2;}
.pn.next{text-align:right;}

footer.site{background:var(--pine);color:var(--paper);padding:60px 0 46px;margin-top:70px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start;}
footer .wordmark{color:var(--paper);font-size:30px;}
.footer-meta{margin-top:26px;font-size:15px;color:#cdd8ce;line-height:1.7;}
.footer-meta a{color:var(--paper);}
.res-title{font-family:var(--serif);font-size:1.4rem;font-weight:500;margin:0 0 18px;color:var(--paper);}
ul.res{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;font-size:1.02rem;}
ul.res a{color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(242,237,233,.32);padding-bottom:3px;}
ul.res a:hover{border-color:var(--wheat);color:var(--wheat);}

@media (max-width:860px){
  .header-grid{flex-direction:column;align-items:center;gap:16px;text-align:center;}
  nav.primary ul{justify-content:center;}
  .footer-grid{grid-template-columns:1fr;gap:36px;}
  li.post-row{grid-template-columns:104px 1fr;gap:16px;}
  li.post-row .p-thumb{width:104px;height:78px;}
  .prevnext{grid-template-columns:1fr;}
}
@media (max-width:520px){ body{font-size:17px;} .brand .wordmark{font-size:26px;} .controls{gap:12px;} }

@media (max-width:600px){ nav.primary ul{gap:14px 18px;} nav.primary a{font-size:15px;} nav.primary a.nav-subscribe{padding:9px 18px;} }