:root{
  --ground:#faf8f5;
  --ink:#1c1a17;
  --ink-soft:#5c574f;
  --rule:#e2ddd4;
  --tile:#f2eee8;
  --accent:#7a3f2d;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --measure:34rem;
  --gutter:clamp(1.25rem,5vw,4rem);
}
@media (prefers-color-scheme:dark){
  :root{--ground:#141312;--ink:#ece7df;--ink-soft:#9d968b;--rule:#2e2b27;--tile:#1d1b19;--accent:#c98c72;}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:.5rem;background:var(--ink);color:var(--ground);padding:.5rem .75rem;z-index:100}

.site-head{
  padding:clamp(2.5rem,7vw,5rem) var(--gutter) clamp(2rem,5vw,3.5rem);
}
.wordmark{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,4vw,2.1rem);letter-spacing:.02em;margin:0}
.tagline{margin:.6rem 0 0;color:var(--ink-soft);font-size:.9rem;letter-spacing:.01em}

main{padding-inline:var(--gutter)}
.muted{color:var(--ink-soft);font-size:.82rem}
.note{color:var(--ink-soft)}

.gallery{
  display:grid;gap:clamp(1rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));
  align-items:start;
}
.card{margin:0;cursor:zoom-in;background:none;border:0;padding:0;text-align:left;color:inherit;font:inherit}
.card-frame{
  display:block;overflow:hidden;background:var(--tile);
  aspect-ratio:3/4;display:grid;place-items:center;padding:clamp(.5rem,1.5vw,1rem);
}
.card img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  transition:transform .5s ease,opacity .4s ease;opacity:0;
}
.card img.loaded{opacity:1}
.card:hover img,.card:focus-visible img{transform:scale(1.025)}
.card figcaption{margin-top:.7rem;font-size:.85rem;line-height:1.45}
.card .t{font-family:var(--serif);font-size:1.05rem}
.card .m{color:var(--ink-soft)}

.lightbox{
  position:fixed;inset:0;z-index:50;background:rgba(12,11,10,.94);
  display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);
}
.lightbox[hidden]{display:none!important}
.lb-figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:.9rem}
#lb-img{max-height:78vh;width:auto;object-fit:contain}
#lb-cap{color:#cfc9c0;font-size:.85rem;text-align:center}
.lightbox button{
  position:absolute;background:none;border:0;color:#e8e2d9;cursor:pointer;
  font-size:2rem;line-height:1;padding:.6rem .9rem;
}
.lightbox button:hover{color:#fff}
.lb-close{top:.5rem;right:.5rem;font-size:2.4rem}
.lb-prev{left:.25rem;top:50%;transform:translateY(-50%);font-size:3rem}
.lb-next{right:.25rem;top:50%;transform:translateY(-50%);font-size:3rem}

.site-foot{
  margin-top:clamp(4rem,10vw,7rem);padding:1.75rem var(--gutter) 3.5rem;
  border-top:1px solid var(--rule);font-size:.9rem;
}
.site-foot p{margin:0}
.site-foot p+p{margin-top:.5rem}
.site-foot a{color:var(--ink);text-decoration-color:var(--rule);text-underline-offset:.2em}
.site-foot a:hover{text-decoration-color:var(--accent)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
