:root{
  --bg:    #ffffff;
  --ink:   #111111;
  --muted: #777777;
  --rule:  #e5e5e5;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --pad-x: clamp(28px, 8vw, 120px);
  --topbar-h: 60px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);
  font-size:14px;font-weight:300;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--topbar-h);
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- fixed top bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.topbar-inner{
  padding:10px var(--pad-x) 8px;
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:24px;
}
.wordmark{
  font-family:var(--serif);
  font-style:italic;font-weight:300;
  font-size:26px;letter-spacing:-.01em;line-height:1;
  text-transform:lowercase;
}
nav.primary{
  justify-self:end;
  display:flex;flex-wrap:wrap;gap:22px;
  font-size:13px;font-weight:300;text-transform:lowercase;
}
nav.primary a{
  color:var(--ink);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:.2s;
}
nav.primary a:hover{color:var(--muted)}
nav.primary a.active{border-bottom-color:var(--ink)}

@media (max-width:780px){
  :root{--topbar-h:88px}
  .topbar-inner{grid-template-columns:1fr;gap:6px}
  nav.primary{justify-self:start;gap:14px;font-size:12px}
}

/* ---------- page header ---------- */
.page{
  padding:16px var(--pad-x) 40px;
}
.page-hd{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:18px;
}
.page-hd .name{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:38px;line-height:1;text-transform:lowercase;letter-spacing:-.01em;
}
.page-hd .count{
  font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:lowercase;
}
.page-intro{
  max-width:none;width:100%;margin:0 0 34px;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:18px;line-height:1.45;color:var(--ink);
}

/* ---------- portrait grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:36px;
  row-gap:64px;
}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr);column-gap:22px;row-gap:48px}}
@media (max-width:520px){.grid{grid-template-columns:1fr;row-gap:40px}}

.card{
  text-align:left;width:100%;cursor:pointer;
  display:flex;flex-direction:column;
}
.card .frame{
  position:relative;
  aspect-ratio:4/5;overflow:hidden;background:#f3f3f3;
}
.card .frame img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(100%);
  transition:filter .6s ease, transform 1.2s ease;
}
.card .bio-overlay{
  position:absolute;inset:0;
  background:rgba(255,255,255,.96);
  padding:clamp(18px, 2.2vw, 28px);
  font-family:var(--sans);
  font-size:13px;line-height:1.65;color:var(--ink);
  overflow:auto;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
  display:flex;align-items:center;
}
.card:hover .bio-overlay,
.card:focus-visible .bio-overlay,
.card.show .bio-overlay{
  opacity:1;transform:translateY(0);
}
.card:hover .frame img{transform:scale(1.02)}
.card .caption{
  margin-top:14px;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:18px;line-height:1.25;color:var(--ink);
  text-transform:lowercase;
}
.card .yrs{
  margin-top:4px;
  font-size:11px;letter-spacing:.06em;color:var(--muted);
  text-transform:lowercase;
}
.card .blurb{
  margin-top:8px;
  font-size:13px;line-height:1.5;color:var(--muted);
}

/* ---------- contact-sheet (home) ---------- */
.sheet{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:36px;row-gap:64px;
}
@media (max-width:900px){.sheet{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.sheet{grid-template-columns:1fr}}
.sheet a{
  display:flex;flex-direction:column;
}
.sheet .frame{
  aspect-ratio:4/5;overflow:hidden;background:#f3f3f3;position:relative;
}
.sheet .frame img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(100%);
  transition:filter .6s ease, transform 1.2s ease;
}
.sheet .bio-overlay{
  position:absolute;inset:0;
  background:rgba(255,255,255,.96);
  padding:clamp(18px, 2.2vw, 28px);
  font-family:var(--sans);
  font-size:13px;line-height:1.65;color:var(--ink);
  overflow:auto;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
  display:flex;align-items:center;
}
.sheet a:hover .bio-overlay,
.sheet a:focus .bio-overlay,
.sheet a:focus-visible .bio-overlay{
  opacity:1;transform:translateY(0);
}
.sheet a:hover .frame img{filter:grayscale(0%);transform:scale(1.02)}
.sheet .label{
  margin-top:14px;display:flex;align-items:baseline;justify-content:space-between;
}
.sheet .label .cat{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:18px;line-height:1.25;text-transform:lowercase;
}
.sheet .label .meta{
  font-size:11px;letter-spacing:.08em;color:var(--muted);text-transform:lowercase;
}

/* ---------- share / form ---------- */
.share{
  padding:120px var(--pad-x) 60px;
  display:grid;grid-template-columns:1fr 1fr;gap:80px;
}
@media (max-width:780px){.share{grid-template-columns:1fr;gap:36px;padding-top:80px}}
.share h2{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:38px;line-height:1.1;letter-spacing:-.01em;text-transform:lowercase;
}
.share p{margin-top:18px;color:var(--muted);max-width:42ch}
.share form{display:flex;flex-direction:column;gap:14px}
.share input,.share textarea{
  background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:12px 0;font:inherit;color:var(--ink);outline:none;font-size:14px;
}
.share input::placeholder,.share textarea::placeholder{color:var(--muted);font-style:italic}
.share textarea{min-height:80px;resize:vertical;font-family:inherit}
.share button{
  align-self:flex-start;margin-top:10px;
  font-size:12px;letter-spacing:.12em;text-transform:lowercase;
  border-bottom:1px solid var(--ink);padding:0 0 4px;
}

/* ---------- footer ---------- */
footer{
  padding:80px var(--pad-x) 80px;
  border-top:1px solid var(--rule);
  margin-top:120px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  font-size:11px;color:var(--muted);text-transform:lowercase;letter-spacing:.06em;
}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}