/* Ben Matzry — minimal type-led layout. System of: cream paper, black ink, one display serif, one mono for captions. */
@font-face{font-family:"Cormorant";src:url(/assets/fonts/cormorant-latin.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Cormorant";src:url(/assets/fonts/cormorant-latin-ext.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF}
:root{--paper:#FCFBF6;--ink:#111;--mute:rgba(17,17,17,.55);--line:rgba(17,17,17,.35);
--serif:"Cormorant","Cormorant Garamond",Didot,"Bodoni 72",Georgia,serif;
--mono:"Letter Gothic","Courier Prime",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
--col:36rem;--gap:clamp(1.25rem,4vw,3rem)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.1875rem/1.6 var(--serif);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .2s}
a:hover,a:focus-visible{border-color:var(--ink)}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.5rem 1rem;border:0}
.skip:focus{left:1rem;top:1rem}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cap,.meta,.date,.top nav a,.homenav a,.foot,.mark,.ph{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.meta{color:var(--mute);text-transform:none;letter-spacing:.04em;font-size:.8rem}
/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem var(--gap)}
.top .mark{border:0}
.top nav{display:flex;gap:1.5rem}
.top nav a{border:0;color:var(--mute)}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
/* page title like a programme heading: centred caps + thin vertical rule */
.ptitle{font-weight:400;text-align:center;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(2.2rem,7vw,3.6rem);line-height:1;margin:clamp(2rem,6vw,4rem) 0 0}
.rule{width:1px;height:clamp(4rem,12vw,9rem);background:var(--ink);margin:1.25rem auto clamp(2rem,6vw,4rem)}
.lede{font-size:clamp(1.45rem,3.4vw,2.05rem);line-height:1.3;letter-spacing:.01em;max-width:var(--col);margin:0 auto 3rem;padding:0 var(--gap)}
.col .lede{padding:0}
.col{max-width:calc(var(--col) + 2*var(--gap));margin:0 auto clamp(3rem,8vw,5.5rem);padding:0 var(--gap)}
.col h2.cap{margin:0 0 1.25rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.prose p,.prose{margin:0 0 1.2em}
.list{list-style:none;margin:0 0 1rem;padding:0}
.list li{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;padding:.55rem 0;border-bottom:1px solid rgba(17,17,17,.1)}
.list .date{color:var(--mute);padding-top:.35rem}
.more{margin-top:1.5rem}
/* home: name set wide across the page, as a typographic image */
.home .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(1rem,3vw,2rem) var(--gap)}
.name{display:flex;justify-content:space-between;margin:0;font-size:clamp(2.6rem,9vw,6.2rem);line-height:1;font-weight:400}
.n1{padding:0 12%}
.mid{text-align:center}
.mid .cap{margin:0 0 1.5rem;letter-spacing:.3em}
.homenav{display:flex;justify-content:center;gap:2rem}
.homenav a{border:0;color:var(--mute)}
.homenav a:hover{color:var(--ink)}
.intro{padding-top:clamp(3rem,10vw,6rem)}
.intro .lede{padding:0;margin:0 auto}
/* photo slots */
.photo{margin:0 auto clamp(2.5rem,6vw,4rem);max-width:calc(var(--col) + 2*var(--gap));padding:0 var(--gap)}
.photo .ph{display:flex;align-items:center;justify-content:center;text-align:center;aspect-ratio:4/5;max-width:22rem;margin:0 auto;border:1px dashed var(--line);color:var(--mute);padding:1rem}
.photo.wide{max-width:64rem}.photo.wide .ph{aspect-ratio:3/2;max-width:none}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1.5rem}
.grid3 .photo{padding:0;margin:0}.photo.sq .ph{aspect-ratio:1;font-size:.6rem}
.ph{color:#8a5a00;background:rgba(200,140,0,.06);border:1px dashed rgba(200,140,0,.5);padding:.05rem .35rem;text-transform:none;letter-spacing:.02em}
/* contact */
.contact .big{font-size:clamp(1.4rem,4vw,2rem);margin:.25rem 0}
.social{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:2rem}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:2rem var(--gap);color:var(--mute);border-top:1px solid rgba(17,17,17,.1)}
.foot p{margin:0}.foot .social{margin:0}.foot a{border:0}
@media (max-width:560px){
 body{font-size:1.0625rem}
 .top{flex-direction:column;align-items:flex-start;gap:.6rem}
 .list li{grid-template-columns:1fr;gap:.1rem}
 .n1{padding:0 6%}
 .homenav{gap:1.25rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* photograph: square, black-and-white, no frame */
.portrait{margin:0 auto clamp(3rem,8vw,5.5rem);padding:0 var(--gap);max-width:calc(28rem + 2*var(--gap))}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:1;background:#e9e7e0}
.home-photo{margin-top:clamp(3rem,8vw,5rem)}
.workshop-photo{margin:1.75rem auto 0;max-width:28rem}
.workshop-photo img{display:block;width:100%;height:auto;background:#e9e7e0}
.mid .sub{margin:-.75rem 0 1.5rem;letter-spacing:.12em;text-transform:uppercase;font-size:.68rem}
.big-line{font-size:clamp(1.5rem,3.6vw,2.2rem);line-height:1.2;margin:0 0 .5rem}
section.col.prose{margin:0 auto clamp(3rem,8vw,5.5rem)}