/* ---- pages with a side subject listing (HBCU, Civil Rights, Boarding House) ---- */
.page--with-list{
  display:grid;grid-template-columns:minmax(0,68ch) minmax(220px,300px);
  justify-content:space-between;gap:clamp(28px,5vw,72px);align-items:start;
}
.page--with-list.list-left{grid-template-columns:minmax(220px,300px) minmax(0,68ch);justify-content:start;}
.page--with-list.list-left .subject-panel{order:-1;}
.subject-panel{
  position:sticky;top:clamp(80px,10vw,110px);
  margin-top:clamp(28px,4vw,44px);
  border-left:1px solid var(--panel-line);padding-left:clamp(16px,2vw,24px);
  /* self-scrolling: never taller than the window, so a long listing scrolls
     inside the panel and the page (and footer) stay put */
  display:flex;flex-direction:column;
  max-height:calc(100vh - clamp(80px,10vw,110px) - 24px);
}
.subject-panel .subject-list{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding-right:8px;
  scrollbar-width:thin;scrollbar-color:var(--panel-line) transparent;
  /* soft fade at the bottom edge hints there's more below */
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);
  padding-bottom:20px;
}
.subject-panel .subject-label,.subject-panel .subject-search,.subject-panel .subject-empty{flex:none;}
.subject-more{
  display:inline-block;margin-top:16px;padding:.55em 1.1em;border-radius:999px;cursor:pointer;
  font:600 .82rem 'Inter',system-ui,sans-serif;color:var(--ink);
  background:transparent;border:1.5px solid var(--panel-line);
}
.subject-more:hover{border-color:var(--accent);}
.subject-more[hidden]{display:none;}
.list-left .subject-panel{border-left:none;border-right:1px solid var(--panel-line);padding-left:0;padding-right:clamp(16px,2vw,24px);}
.subject-label{
  font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;color:var(--accent);margin:0 0 10px;
}
.subject-search{
  width:100%;font:inherit;font-size:.88rem;padding:8px 10px;border-radius:4px;
  border:1px solid var(--panel-line);background:#fff;color:var(--ink);margin:0 0 14px;
}
.subject-search:focus{outline:2px solid var(--accent);outline-offset:1px;}
.subject-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.subject-list li{line-height:1.35;}
.subject-list li[hidden]{display:none;}
.subject-name{display:block;font-family:'Fraunces',Georgia,serif;font-size:1rem;color:var(--ink);}
a.subject-name{text-decoration:none;border-bottom:1px solid transparent;}
a.subject-name:hover{border-bottom-color:var(--accent);}
.subject-note{display:block;font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--ink-muted);margin-top:2px;}
.subject-empty{font-size:.82rem;color:var(--ink-muted);margin:10px 0 0;}
@media (max-width:860px){
  .page--with-list,.page--with-list.list-left{grid-template-columns:1fr;}
  .subject-panel,.page--with-list.list-left .subject-panel{position:static;order:0;border:none;padding:0;border-top:1px solid var(--panel-line);padding-top:20px;margin-top:8px;}
  .subject-panel{display:block;max-height:none;}
  .subject-panel .subject-list{overflow:visible;-webkit-mask-image:none;mask-image:none;padding:0;}
}

/* ---- listing entries whose article isn't written yet ---- */
.subject-list li.coming-soon .subject-name{color:var(--ink-muted);}

/* ---- article pop-up: about 75% of the window, scrolls inside ---- */
html.modal-open{overflow:hidden;}
.article-modal{
  width:75vw;height:75vh;max-width:1100px;
  padding:0;border:none;border-radius:8px;
  background:#fbf7f6;color:var(--ink);
  box-shadow:0 24px 80px rgba(28,16,11,.45);
  overflow:hidden;
}
.article-modal::backdrop{background:rgba(34,20,14,.72);backdrop-filter:blur(2px);}
.article-modal[open]{animation:articleIn .28s ease-out;}
@keyframes articleIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.article-scroll{height:100%;overflow-y:auto;padding:clamp(28px,5vw,64px) clamp(20px,6vw,80px);}
.article-scroll article{max-width:66ch;margin:0 auto;}
.article-note{
  font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.12em;
  font-size:.75rem;color:var(--accent);margin:0 0 10px;
}
.article-title{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.15;margin:0 0 .8em;}
.article-body p{color:#3d2a20;font-size:1.02rem;line-height:1.75;margin:0 0 1.1em;}
.article-close{
  position:absolute;top:12px;right:14px;z-index:1;
  width:40px;height:40px;border-radius:50%;border:none;
  background:#22140e;color:#fbf7f6;font-size:1.5rem;line-height:1;cursor:pointer;
}
.article-close:hover{background:var(--accent);}
.article-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media (max-width:760px){ .article-modal{width:94vw;height:88vh;} }
@media (prefers-reduced-motion:reduce){ .article-modal[open]{animation:none;} }

.article-copy{margin:2.5em 0 0;padding-top:14px;border-top:1px solid var(--panel-line);font-size:.75rem;color:var(--ink-muted);}

/* ---- long articles: footnotes, quotes, references ---- */
.article-body sup{line-height:0;font-size:.7em;}
.fn-ref{color:var(--accent);text-decoration:none;font-weight:600;padding:0 1px;}
.fn-ref:hover{text-decoration:underline;}
.article-body blockquote{
  margin:0 0 1.2em;padding:.2em 0 .2em 1.1em;border-left:3px solid var(--accent);
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:1.05rem;line-height:1.6;color:#3d2a20;
}
.article-notes-title{
  font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.12em;
  font-size:.75rem;font-weight:500;color:var(--accent);margin:2.2em 0 .8em;padding-top:1.2em;border-top:1px solid var(--panel-line);
}
.article-notes{margin:0;padding-left:1.6em;font-size:.8rem;line-height:1.55;color:var(--ink-muted);}
.article-notes li{margin:0 0 .6em;overflow-wrap:anywhere;}
.article-notes a{color:var(--accent);}
.fn-back{text-decoration:none;}
.article-sources{list-style:disc;}

/* images inside articles */
.article-figure{margin:0 0 1.4em;}
.article-figure img{display:block;width:100%;height:auto;border-radius:4px;}
.article-figure figcaption{margin-top:.5em;font-size:.82rem;line-height:1.45;color:var(--ink-muted);font-style:italic;}