:root{
  --bg:#5A5955; --ink:#FFFFFF; --dim:#BEBDB8; --rule:#97938E;
  --btn:#EAE9E5; --btn-ink:#2D2D2D; --btn-hover:#232321;
  --head:"Archivo","Franklin Gothic Medium","Arial Narrow",sans-serif;
  --body:"Nunito Sans","Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* Photograph protection. This deters casual copying: no drag to desktop, no
   long-press save on a phone, and a transparent shield over every photograph
   so a right click lands on the shield rather than the image, which keeps
   "Save image as" and "Open image in new tab" off the menu. It is a deterrent,
   not a lock -- see the note in README.txt. The real protection is that only
   watermarked 1800px copies are ever uploaded; the originals stay on the
   laptop. */
img{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;
  user-drag:none;-webkit-touch-callout:none;user-select:none;
  -webkit-user-select:none;pointer-events:none}
.shielded{position:relative}
.shielded::after{content:"";position:absolute;inset:0;z-index:2}
body{background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}

header.site{padding:26px 0 10px}
header.site .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.brand{font-family:var(--head);font-weight:700;font-size:14px;
  letter-spacing:.22em;text-transform:uppercase}
nav.main{margin-left:auto;display:flex;gap:26px;flex-wrap:wrap}
nav.main a{font-family:var(--head);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);padding-bottom:3px;
  border-bottom:1px solid transparent}
nav.main a:hover,nav.main a[aria-current]{color:var(--ink);
  border-bottom-color:var(--ink)}

.banner{text-align:center;font-family:var(--head);font-weight:700;
  font-size:19px;letter-spacing:.02em;padding:26px 0 30px}

h2.sec{font-family:var(--head);font-weight:700;font-size:26px;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;
  margin:0;padding:34px 0 30px;border-top:1px solid var(--rule)}

/* gallery grid -- two across, title laid over the photograph */
.covers{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
  padding-bottom:46px}
.cover{position:relative;display:block;overflow:hidden;background:#111;
  aspect-ratio:4/3}
.cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.cover:hover img{transform:scale(1.03)}
.cover .lab{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;
  text-shadow:0 1px 14px rgba(0,0,0,.55)}
.cover .lab b{font-family:var(--head);font-weight:700;font-size:26px;
  letter-spacing:.16em;text-transform:uppercase}
.cover .lab span{font-size:13px;color:#fff;opacity:.95}

/* blog strip */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  padding-bottom:46px}
.post-card .shot{aspect-ratio:3/2;overflow:hidden;background:#111}
.post-card .shot img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease}
.post-card:hover .shot img{transform:scale(1.03)}
.post-card b{display:block;font-family:var(--head);font-weight:700;
  font-size:16px;letter-spacing:.04em;margin:14px 0 2px}
.post-card time{display:block;color:var(--dim);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase}
.post-card p{margin:8px 0 0;color:var(--dim);font-size:14px}

/* Sasha: her film on the left, her gallery beside it, her words to the right */
.memorial{border-top:1px solid var(--rule);padding:38px 0 48px;
  display:grid;grid-template-columns:400px 400px 1fr;gap:24px;align-items:start}
.memorial.novideo{grid-template-columns:400px 1fr}
/* The two tiles want more room than the 1120px column allows, so this one
   section reaches a little wider than the rest of the page. */
@media (min-width:1180px){
  .memorial{width:calc(100% + 110px);margin-left:-55px}
}
/* Film and gallery tile are the same box -- same width, same 16:9 height --
   so the pair reads as one row rather than two mismatched blocks. */
.memorial .film,.memorial .cover{aspect-ratio:16/9;width:100%}
.memorial .film{position:relative;background:#000}
.memorial .film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.memorial h2{font-family:var(--head);font-weight:700;font-size:20px;
  letter-spacing:.1em;margin:0 0 12px}
.memorial p{margin:0;color:var(--dim)}

footer.site{border-top:1px solid var(--rule);padding:26px 0 54px;
  font-size:13px;color:var(--dim)}
footer.site .wrap{display:flex;gap:22px;flex-wrap:wrap;
  justify-content:space-between}
footer.site a:hover{color:var(--ink)}
.views{font-variant-numeric:tabular-nums}

/* Gallery page. CSS multi-column was wrong here: it fills a column top to
   bottom before starting the next, so photograph 2 landed underneath
   photograph 1 instead of beside it. These are justified rows, laid out left
   to right, so the running order you set in arrange.py is the reading order.
   Each row is scaled to the exact width of the page, so nothing is cropped. */
.grid{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:50px}
.grid figure{margin:0;cursor:zoom-in;position:relative;overflow:hidden;
  background:#111;flex-grow:0;flex-shrink:0}
.grid figure img{width:100%;height:100%;object-fit:cover;display:block}
.grid figcaption{position:absolute;left:0;right:0;bottom:0;color:#fff;
  font-size:12px;padding:16px 8px 6px;opacity:0;transition:opacity .25s;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent)}
.grid figure:hover figcaption{opacity:1}
.grid.nojs figure{width:300px;height:200px}

/* blog post */
article.post{max-width:68ch;margin:0 auto;padding-bottom:54px}
article.post .hero{margin-bottom:28px}
article.post h1{font-family:var(--head);font-weight:700;
  font-size:clamp(24px,3.4vw,34px);letter-spacing:.03em;margin:0 0 4px}
article.post .when{color:var(--dim);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:26px}
article.post p{margin:0 0 18px}

.btn{display:inline-block;background:var(--btn);color:var(--btn-ink);
  font-family:var(--head);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;padding:11px 22px;margin-top:10px}
.btn:hover{background:var(--btn-hover);color:#fff}

#lb{position:fixed;inset:0;z-index:90;background:rgba(20,20,19,.97);
  display:none;align-items:center;justify-content:center}
#lb.on{display:flex}
#lb img{max-width:94vw;max-height:88vh;object-fit:contain}
#lb .shield{position:absolute;inset:0;z-index:3}
#lb button{z-index:4}
#lb .cap{position:absolute;bottom:18px;left:0;right:0;text-align:center;
  color:var(--dim);font-size:13px;padding:0 24px}
#lb button{position:absolute;background:none;border:0;color:#fff;font-size:34px;
  line-height:1;cursor:pointer;padding:14px;opacity:.7}
#lb button:hover{opacity:1}
#lb .x{top:10px;right:14px;font-size:26px}
#lb .prev{left:6px;top:50%;transform:translateY(-50%)}
#lb .next{right:6px;top:50%;transform:translateY(-50%)}

@media (max-width:820px){
  .posts{grid-template-columns:1fr}
  .memorial,.memorial.novideo{grid-template-columns:1fr}
}
@media (max-width:560px){
  .covers{grid-template-columns:1fr}
  .cover .lab b{font-size:20px}
  .wrap{padding:0 18px}
}