/* portfolio/portfolio.css — every painting on one quiet white page. Five layouts, no motion. */
html[data-portfolio], html[data-portfolio] body{ background:#fff }
.pf{ padding:clamp(18px,2.6vw,36px) clamp(14px,3vw,48px) clamp(56px,7vw,100px) }
.pf > .wrap{ max-width:1440px }
.pf-head{ text-align:center; margin-bottom:clamp(22px,3.2vw,44px) }
.pf-head h1{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:400; font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 96; font-size:clamp(2.2rem,5.2vw,4.4rem); line-height:1.04; letter-spacing:-.01em; margin:0 }
.pf-head .pr-switch{ justify-content:center; margin-top:14px }
.pf-head .pf-note{ margin:10px auto 0; max-width:56ch; font-size:var(--fs-sm); color:var(--ink-soft) }
.pf-item{ margin:0; break-inside:avoid }
.pf-shot{ display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; color:inherit }
.pf-shot img{ display:block; width:100%; height:auto; filter:drop-shadow(0 8px 14px rgba(51,43,66,.14)) }
.pf-cap{ display:flex; flex-direction:column; align-items:center; text-align:center; line-height:1.25; padding-top:10px }
.pf-name{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:400; font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 48; font-size:1.2rem; color:var(--ink) }
.pf-size{ font-family:'Fraunces',Georgia,serif; font-size:.8rem; color:var(--ink-soft); margin-top:2px }

/* 1 · Masonry: three columns, every painting the column's width, its own proportions */
.pf--masonry .pf-grid{ columns:3; column-gap:clamp(20px,2.6vw,36px) }
.pf--masonry .pf-item{ margin-bottom:clamp(26px,3.2vw,44px) }
@media (max-width:1000px){ .pf--masonry .pf-grid{ columns:2 } }
@media (max-width:560px){ .pf--masonry .pf-grid{ columns:1 } }

/* 2 · Salon rows: rows of two or three, scaled to one height, every row filling the width */
.pf--rows .pf-row{ display:flex; align-items:flex-start; gap:clamp(18px,2.4vw,32px); margin-bottom:clamp(26px,3.2vw,44px) }
.pf--rows .pf-item{ flex:var(--ar) 1 0%; min-width:0 }
@media (max-width:640px){ .pf--rows .pf-row{ flex-direction:column; gap:26px } .pf--rows .pf-item{ flex:none; width:100% } }

/* 3 · One at a time: one painting per row, large and centred */
.pf--one .pf-grid{ display:grid; gap:clamp(40px,6vw,88px); justify-items:center }
.pf--one .pf-item{ width:min(100%, 960px) }
.pf--one .pf-item--tall{ width:min(100%, 640px) }
.pf--one .pf-name{ font-size:1.5rem } .pf--one .pf-size{ font-size:.9rem }

/* 4 · True to size: each painting's width follows its real inches, so a 30-inch piece is twice a 15-inch one */
.pf--scale .pf-grid{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:clamp(28px,3.4vw,52px) clamp(22px,3vw,44px) }
.pf--scale .pf-item{ width:calc(var(--in) * 1.55%); min-width:150px; max-width:100% }
@media (max-width:760px){ .pf--scale .pf-item{ width:calc(var(--in) * 2.6%); min-width:130px } }

/* 5 · Tight collage: four columns, small gaps, no captions — the names are in the viewer */
.pf--tight .pf-grid{ columns:4; column-gap:12px }
.pf--tight .pf-item{ margin-bottom:12px }
.pf--tight .pf-cap{ display:none }
.pf--tight .pf-shot img{ filter:none; border:2px solid var(--ink); border-radius:6px; box-sizing:border-box }
@media (max-width:1000px){ .pf--tight .pf-grid{ columns:3 } }
@media (max-width:640px){ .pf--tight .pf-grid{ columns:2 } }