:root{
  --page:#111013; --ink:#e9e5dc; --dim:#8f897c; --faint:#57534a;
  --line:#2a2824; --accent:#c9a35b; --flag:#c77b52;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--page);color:var(--ink);
  font:400 17px/1.6 "Spectral","Iowan Old Style",Georgia,serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}

/* top matter */
header.site{padding:6rem 7vw 3rem;border-bottom:1px solid var(--line)}
.wordmark{font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;font-weight:600;color:var(--ink)}
nav.site{margin-top:1.2rem;display:flex;gap:1.8rem}
nav.site a{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.intro{max-width:46ch;margin-top:2.6rem;color:var(--dim);font-size:1rem;line-height:1.7}

/* the stream */
main{padding:2rem 0 10rem}
.entry{display:grid;grid-template-columns:6rem 1fr;gap:0;
  padding:0 7vw;max-width:1180px;margin:0 auto;align-items:start}
.year{grid-column:1;font-size:.74rem;letter-spacing:.1em;color:var(--faint);
  padding-top:.5rem;position:sticky;top:1rem}
.piece{grid-column:2;padding:3.2rem 0 3.4rem;border-bottom:1px solid var(--line)}
.piece img,.piece .vidbox{width:100%;display:block;background:#1a1916}
.piece img{border:1px solid var(--line)}
figure.noimg .frame{aspect-ratio:3/2;display:grid;place-items:center;border:1px dashed var(--faint);
  color:var(--flag);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:2rem}
.cap{margin-top:1.1rem;display:flex;flex-direction:column;gap:.25rem}
.title{font-size:1.12rem;font-style:italic;line-height:1.35}
.media{font-size:.82rem;color:var(--dim)}
.door{margin-top:.7rem;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:.5rem}
.hist{margin-top:.5rem;font-size:.76rem;color:var(--faint)}
.piece.doorway .frame{outline:1px solid var(--line);outline-offset:6px}

/* detail pages */
.detailwrap{max-width:1180px;margin:0 auto;padding:3rem 7vw 8rem}
.back{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  display:inline-block;margin-bottom:2.5rem}
.detailwrap h1{font-weight:400;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.01em;
  line-height:1.1;margin-bottom:1rem}
.detailwrap .lede{max-width:56ch;color:var(--dim);font-size:1.05rem;margin-bottom:2.5rem;line-height:1.7}
.detailgrid{display:grid;gap:3rem}
.detailgrid img{width:100%;border:1px solid var(--line)}
.eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  margin:3rem 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.row{padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.9rem;display:flex;gap:1.2rem}
.row b{font-weight:400;color:var(--dim);min-width:9rem;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;padding-top:.15rem}
.txt{margin:1rem 0 2rem;white-space:pre-wrap;font-size:.96rem;color:#d8d3c8;max-width:64ch}
.txtmeta{font-size:.76rem;color:var(--faint);letter-spacing:.04em;margin-bottom:.5rem}
ul.plain{list-style:none}
ul.plain li{padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.88rem;max-width:74ch}
.cite{color:var(--flag);font-size:.8rem}
footer{padding:3rem 7vw;border-top:1px solid var(--line);color:var(--faint);font-size:.76rem;
  max-width:1180px;margin:0 auto}
@media(max-width:640px){
  .entry{grid-template-columns:3.4rem 1fr;padding:0 6vw}
  header.site{padding:3.5rem 6vw 2rem}
}