:root{--sidebar:20rem}
*{box-sizing:border-box}
body{margin:0;background:#fafaf9;color:#1a1a1a;
     font:16px/1.6 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:#2b5570}
a:hover{color:#000}

aside{position:fixed;top:0;bottom:0;left:0;width:var(--sidebar);overflow-y:auto;
      padding:1.5rem 1rem 3rem;background:#f2f2f0;border-right:1px solid #e2e2de}
aside .home{display:block;font-weight:600;font-size:.9rem;margin-bottom:.75rem;text-decoration:none}
aside .section{display:block;font-weight:600;font-size:.95rem;margin-bottom:.5rem;
               text-decoration:none;color:#1a1a1a}
aside .section.here{color:#1a5fb4}
aside ul{list-style:none;margin:0;padding-left:.75rem}
aside>ul{padding-left:0}
aside li ul{border-left:1px solid #e0e0db;margin-left:.15rem}
aside li{margin:.1rem 0;font-size:.85rem;line-height:1.45}
aside a{text-decoration:none}
aside a.here{font-weight:600;color:#1a5fb4}
aside .count{color:#a8a8a2;font-size:.78rem}
aside summary{cursor:pointer;color:#55554f;list-style-position:outside}
aside summary:hover{color:#111}
aside summary::marker{color:#b4b4ae}
aside details>ul{padding-left:.75rem}

main{margin-left:var(--sidebar);padding:2rem 1.5rem 5rem}

/* Negative margins cancel main's padding, so the bar spans the whole column instead
   of sitting inset with photos sliding past on either side of it. */
nav{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;gap:.2rem .3rem;
    margin:-2rem -1.5rem 1.75rem;padding:.7rem 1.5rem;
    background:#fafaf9;border-bottom:1px solid #e2e2de}
nav a{padding:.25rem .7rem;border-radius:999px;text-decoration:none;font-size:.9rem;color:#55554f}
nav a:hover{background:#eaeae6;color:#111}
nav a.here{background:#2b5570;color:#fff}

h1{font-size:1.6rem;font-weight:600;margin:0 0 1rem;line-height:1.25}
.prose{max-width:62ch;margin-bottom:.5rem}
.prose p{margin:0 0 .75rem;color:#333}
.dated{font-size:.85rem;color:#6b6b64;margin:0 0 .9rem}
.dated .approx{color:#a5a5a0}
.source{font-size:.8rem;color:#a5a5a0;margin:0 0 2rem}
.source a{color:inherit}
ul.galleries{list-style:none;padding:0;margin:0;
             display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.35rem 1.5rem}
ul.galleries a{text-decoration:none}
ul.galleries.nested{display:block}
ul.galleries ul{display:block;padding-left:1.1rem;margin:.2rem 0 .6rem}
ul.galleries .count{color:#a5a5a0;font-size:.85rem}
.feed{max-width:70ch}
.news{display:flex;gap:1.25rem;padding:.9rem 0;border-top:1px solid #e8e8e4}
.news:first-child{border-top:0}
.news .when{flex:0 0 6rem;margin:0;font-size:.82rem;color:#a5a5a0;font-variant-numeric:tabular-nums}
.news .what{flex:1;min-width:0}
.news .what p{margin:0 0 .6rem}
.news .what p:last-child{margin-bottom:0}
.grid{display:flex;flex-wrap:wrap;gap:1.75rem;align-items:flex-start}
figure{margin:0;max-width:100%}
figure img{display:block;max-width:100%;height:auto;background:#ececea}
figcaption{margin-top:.45rem;font-size:.85rem;color:#555}
/* What the archive found, not what the author wrote — so it sits back from his caption. */
.flaw{color:#a5a5a0}

@media (max-width:900px){
  aside{position:static;width:auto;height:auto;border-right:0;border-bottom:1px solid #e2e2de}
  main{margin-left:0;padding:1.5rem 1rem 4rem}
  nav{margin:-1.5rem -1rem 1.25rem;padding:.6rem 1rem}
}