: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}
/* contain, not cover: the Eiffel photograph is portrait (1153x1295) and a
   3:2 card cropped the top off the tower. The card keeps its shape so the
   three line up; a portrait image just sits narrower inside it, and the
   backdrop matches the page so there are no letterbox bars to see. */
.post-card .shot{aspect-ratio:3/2;overflow:hidden;background:var(--bg);
  display:flex;align-items:center;justify-content:center}
.post-card .shot img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;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: the photograph on the left, the story beside it rather than
   underneath. A post with no photograph falls back to a single centred
   column, and both stack on a narrow screen. */
article.post{padding-bottom:54px;display:grid;gap:40px;align-items:start;
  grid-template-columns:minmax(280px,440px) 1fr}
article.post.nohero{grid-template-columns:1fr;max-width:68ch;margin:0 auto}
article.post .words{max-width:66ch}
article.post .hero{margin:0}
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}

/* contact form, on a page of its own */
.contact{padding:48px 0 72px;
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact h2{font-family:var(--head);font-weight:700;font-size:34px;
  letter-spacing:.12em;text-transform:uppercase;margin:0 0 18px;line-height:1.1}
.contact p{margin:0 0 14px;color:var(--dim);max-width:46ch}
.contact .lead{color:var(--ink);font-size:17px;line-height:1.6}

/* terms: numbered clauses as headings, not another grey paragraph */
.terms{max-width:76ch;margin:0 auto;padding:46px 0 64px}
.terms h1{font-family:var(--head);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;font-size:22px;margin:0 0 6px}
.terms .sub{color:var(--dim);font-size:13px;margin:0 0 26px}
.terms h3{font-family:var(--head);font-weight:700;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  margin:32px 0 10px;padding-top:14px;border-top:1px solid var(--rule)}
.terms h3:first-of-type{margin-top:6px}
.terms p{margin:0 0 13px;color:var(--dim)}
.contact form{display:grid;gap:14px}
.contact label{display:block;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.contact label .req{color:var(--btn)}
.contact input,.contact textarea{width:100%;font:inherit;color:var(--ink);
  background:rgba(0,0,0,.16);border:1px solid var(--rule);padding:11px 12px}
.contact input:focus,.contact textarea:focus{outline:none;border-color:var(--btn)}
.contact textarea{min-height:150px;resize:vertical}
.contact .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact button{justify-self:start;background:var(--btn);color:var(--btn-ink);
  border:0;font-family:var(--head);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;padding:13px 26px;cursor:pointer}
.contact button:hover{background:var(--btn-hover);color:#fff}
.note{padding:12px 14px;margin-bottom:18px;border:1px solid var(--rule)}
.note.ok{border-color:#9ec49a;color:#dff0dd}
.note.bad{border-color:#d49a8e;color:#f6ded8}
@media (max-width:820px){.contact{grid-template-columns:1fr;gap:26px}}

.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}
}