:root{
  --bg:#faf9f7; --ink:#1a1815; --muted:#6b6560; --rule:#e0dcd5;
  --accent:#0f6e63; --shadow:0 1px 3px rgba(0,0,0,.08),0 8px 28px rgba(0,0,0,.07);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#14130f;--ink:#ece8e0;--muted:#9a938a;--rule:#2e2b26;--accent:#5fd0bf;
        --shadow:0 1px 3px rgba(0,0,0,.5),0 8px 28px rgba(0,0,0,.45);}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);
     font-size:19px;line-height:1.65;}

/* ---------- masthead ---------- */
.masthead{max-width:44rem;margin:0 auto;padding:6rem 1.5rem 3rem;text-align:center;}
.kicker{font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
        color:var(--muted);margin:0 0 1.2rem;}
.masthead h1{font-size:clamp(3rem,11vw,5.5rem);line-height:1;margin:0;font-weight:600;letter-spacing:-.02em;}
.dateline{font-size:1.15rem;color:var(--muted);font-style:italic;margin:.9rem 0 0;}
.meta{font-family:var(--sans);font-size:.78rem;color:var(--muted);margin:2.5rem 0 0;}
kbd{font-family:var(--sans);font-size:.72rem;border:1px solid var(--rule);border-bottom-width:2px;
    border-radius:4px;padding:1px 5px;background:var(--bg);}

/* ---------- essay flow ---------- */
.essay{max-width:60rem;margin:0 auto;padding:0 1.5rem 5rem;}
.section-head{max-width:44rem;margin:5rem auto 3rem;text-align:center;
  font-family:var(--sans);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:1.2rem;}
.section-head::before,.section-head::after{content:"";flex:1;height:1px;background:var(--rule);}

figure.item{margin:0 0 4.5rem;}
figure.item .frame{margin:0;cursor:zoom-in;position:relative;display:block;width:100%;
  background:none;border:0;padding:0;border-radius:3px;overflow:hidden;box-shadow:var(--shadow);}
figure.item img{display:block;width:100%;height:auto;}
figure.item.video .frame{cursor:default;box-shadow:none;}
figure.item video{display:block;width:100%;max-width:640px;margin:0 auto;border-radius:3px;
  background:#000;box-shadow:var(--shadow);}
figcaption{max-width:54rem;margin:1.4rem auto 0;}
figcaption h2{font-size:1.28rem;font-weight:600;margin:0 0 .45rem;line-height:1.3;letter-spacing:-.01em;}
figcaption p{margin:0;color:var(--muted);font-size:1.02rem;white-space:pre-line;}
.badge{font-family:var(--sans);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);display:inline-block;margin-bottom:.4rem;}

.colophon{max-width:44rem;margin:0 auto;padding:3rem 1.5rem 6rem;border-top:1px solid var(--rule);
  text-align:center;font-family:var(--sans);font-size:.85rem;color:var(--muted);}
.colophon .small{font-size:.75rem;opacity:.8;}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:100;background:#0b0a08;
  display:grid;grid-template-rows:1fr auto auto;}
.lightbox[hidden]{display:none!important}
.lb-stage{display:flex;align-items:center;justify-content:center;overflow:hidden;padding:1rem;min-height:0;}
/* fill the frame even when the 2007 original is small (see cap in gallery.js) */
.lb-stage img{width:100%;height:100%;object-fit:contain;display:block;}
/* 2007 clips are only 320x240 - scale up so they aren't lost in the frame */
.lb-stage video{width:min(760px,92%);height:auto;max-height:100%;display:block;background:#000;}
.lb-panel{color:#e8e4dc;max-width:64rem;margin:0 auto;padding:.4rem 1.5rem 1rem;text-align:center;
  max-height:38vh;overflow-y:auto;}
.lb-header{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:#5fd0bf;margin:0 0 .3rem;}
.lb-title{font-size:1.1rem;margin:0 0 .35rem;font-weight:600;}
.lb-caption{font-size:.95rem;line-height:1.55;color:#a8a29a;margin:0;white-space:pre-line;}
.lb-caption strong,figcaption strong{color:inherit;font-weight:700;}
figcaption em,.lb-caption em{font-style:italic;}
.lb-counter{font-family:var(--sans);font-size:.7rem;color:#6b6560;margin:.6rem 0 0;}
.lb-close,.lb-nav{position:absolute;z-index:2;background:rgba(255,255,255,.07);color:#fff;border:0;
  cursor:pointer;border-radius:50%;line-height:1;transition:background .15s;}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.2);}
.lb-close{top:1rem;right:1rem;width:2.6rem;height:2.6rem;font-size:1.8rem;}
.lb-nav{top:calc(50% - 6rem);width:3.2rem;height:3.2rem;font-size:2.2rem;}
.lb-prev{left:1rem}.lb-next{right:1rem}
/* filmstrip — always keeps the current frame centred (after slider.js, 2009) */
.lb-strip{display:flex;gap:6px;overflow-x:auto;padding:.7rem 50%;scrollbar-width:none;
  background:#000;border-top:1px solid #24211c;scroll-behavior:smooth;}
.lb-strip::-webkit-scrollbar{display:none}
.lb-strip img{height:52px;width:auto;opacity:.4;cursor:pointer;border-radius:2px;flex:0 0 auto;
  border:2px solid transparent;transition:opacity .15s;}
.lb-strip img:hover{opacity:.8}
.lb-strip img.on{opacity:1;border-color:#5fd0bf;}
body.locked{overflow:hidden}
@media (max-width:640px){
  body{font-size:17px}
  .masthead{padding:3.5rem 1.25rem 2rem}
  .lb-nav{width:2.6rem;height:2.6rem;font-size:1.7rem}
  .lb-panel{max-height:30vh}
}
@media (prefers-reduced-motion:reduce){.lb-strip{scroll-behavior:auto}}