/* Matt Lockett — monochrome gallery. One family, neutral paper, no accent. */
:root{
  --paper:#f4f4f3;      /* neutral near-white, no warmth: keeps B&W reading neutral */
  --ink:#17171b;        /* near-black */
  --mid:#74747a;        /* metadata grey */
  --faint:#9a9aa0;
  --hair:#dededc;       /* hairline */
  --measure:34rem;      /* statement measure */
  --edge:clamp(1.5rem,7vw,9rem); /* the wide margin */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Newsreader","Newsreader Fallback",Georgia,"Times New Roman",serif;
  font-optical-sizing:auto; font-weight:380;
  line-height:1.5; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
img{display:block;width:100%;height:auto}

/* ---- masthead: name small, top-left. that is the only chrome. ---- */
.masthead{padding:var(--edge) var(--edge) 0;display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.wordmark{font-size:1.05rem;font-weight:500;letter-spacing:.02em}
.wordmark .disc{color:var(--mid);font-style:italic;font-weight:380}
.masthead nav{font-size:.82rem;letter-spacing:.04em;color:var(--mid)}
.masthead nav a{margin-left:1.4rem}

/* ---- index ---- */
.lede{padding:clamp(4rem,16vh,11rem) var(--edge) clamp(3rem,9vh,6rem);max-width:48rem}
.lede p{font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.32;font-weight:380;margin:0;text-wrap:balance}

.index{padding:0 var(--edge) var(--edge)}
.entry{display:block;padding:clamp(2.2rem,5vw,3.6rem) 0;border-top:1px solid var(--hair)}
.index .entry:last-child{border-bottom:1px solid var(--hair)}
.entry-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,3vw,2.4rem)}
@media(min-width:760px){.entry-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}}
.entry-meta{order:2}
@media(min-width:760px){.entry-meta{order:0}}
.entry h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:420;line-height:1.04;margin:0 0 .5rem;letter-spacing:-.012em}
.entry .yr{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:1.1rem}
.entry .count{font-size:.86rem;color:var(--mid);margin:.9rem 0 0}
.entry .read{font-size:.86rem;color:var(--mid);margin-top:1.1rem;border-bottom:1px solid var(--hair);display:inline-block;padding-bottom:2px}
.entry:hover .read{border-color:var(--ink);color:var(--ink)}
.entry-cover{overflow:hidden;background:#e9e9e7}
.entry-cover img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.entry:hover .entry-cover img{transform:scale(1.02)}

/* ---- project view ---- */
.proj-head{padding:clamp(4rem,14vh,9rem) var(--edge) clamp(2.4rem,7vh,4.5rem);max-width:var(--measure)}
.proj-head .yr{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:1.3rem}
.proj-head h1{font-size:clamp(2.4rem,6vw,4rem);font-weight:420;line-height:1.02;margin:0 0 1.6rem;letter-spacing:-.014em}
.proj-head .statement{font-style:italic;font-size:clamp(1.06rem,2.1vw,1.28rem);line-height:1.62;color:#2c2c30;margin:0}

.plates{padding:0 var(--edge) clamp(3rem,8vh,6rem)}
.plate{margin:0 auto clamp(3.5rem,9vh,7rem);max-width:74rem}
.plate:last-child{margin-bottom:0}
.plate figure{margin:0}
.plate .frame{background:#e9e9e7}
.plate figcaption{display:flex;gap:1.1rem;margin-top:.95rem;font-size:.84rem;color:var(--mid);line-height:1.45}
.plate .pl-no{font-variant-numeric:tabular-nums;color:var(--faint);flex:none;letter-spacing:.04em}
.plate .pl-cap{margin:0}

/* ---- footer ---- */
.foot{border-top:1px solid var(--hair);margin:0 var(--edge);padding:2.6rem 0 4rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.82rem;color:var(--mid)}
.foot a{border-bottom:1px solid var(--hair)}
.back{font-size:.84rem;color:var(--mid)}
.back:hover{color:var(--ink)}

/* ---- quiet reveal ---- */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
}