/* Photography (and later Film / Land) – series overview + visual-essay pages */
.gallery{--gap:clamp(10px,1.2vw,16px);--rhythm:clamp(44px,6.5vw,100px)}
.g-loading{color:var(--muted);margin-left:14%}
.gallery figure{margin:0}
.gallery img{display:block;width:100%;height:auto;background:var(--grey)}
.gallery figcaption{font-size:var(--fs-small);color:var(--muted);margin-top:8px;line-height:1.45}

/* overview */
.g-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:end;margin:0 0 var(--rhythm) 14%}
.g-intro .lead{font:300 calc(var(--fs-body) * 1.45)/1.4 var(--display);margin:0}
.g-intro .lead p{margin:0 0 .6em}
.g-intro .mini{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.g-intro .mini img{aspect-ratio:1/1;object-fit:cover}
.gallery .g-hero{margin:0 0 var(--rhythm)}
.g-label{font:400 var(--fs-label)/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 22px 14%}
.g-mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(28px,3.5vw,54px) clamp(18px,2.5vw,36px);margin-bottom:var(--rhythm)}
.g-card{text-decoration:none;color:inherit;display:block}
.g-card .ph{overflow:hidden;background:var(--grey)}
.g-card img{aspect-ratio:4/3;object-fit:cover;transition:transform .9s cubic-bezier(.2,.6,.2,1),filter .5s}
.g-card.sq img{aspect-ratio:1/1}
.g-card.tall img{aspect-ratio:4/5}
.g-card:hover img{transform:scale(1.035);filter:brightness(.92)}
.g-card h2{font:400 var(--fs-heading)/1.25 var(--display);font-size:calc(var(--fs-heading) * 1.15);margin:14px 0 2px}
.g-card p{margin:0;font-size:var(--fs-small);color:var(--muted)}
.g-card .n{font-variant-numeric:tabular-nums;color:var(--faint)}
.span-7{grid-column:span 7}.span-5{grid-column:span 5}.span-4{grid-column:span 4}.span-6{grid-column:span 6}.span-8{grid-column:span 8}
.push-1{grid-column-start:2}
.g-card.low{margin-top:clamp(40px,7vw,120px)}

/* series essay */
.g-back{display:inline-block;margin:0 0 -10px 14%;font-size:var(--fs-small);color:var(--muted);text-decoration:none}
.g-back:hover{color:var(--ink)}
.g-sub{margin:-30px 0 var(--rhythm) 14%;font:300 calc(var(--fs-body) * 1.2)/1.4 var(--display);color:var(--muted)}
.gallery .b{margin:0 0 var(--rhythm)}
.gallery .b-hero.full{width:100vw;margin-left:calc(50% - 50vw)}
.b-hero.full figcaption{padding:0 var(--gutter);max-width:var(--wrap);margin-left:auto;margin-right:auto}
.gallery .b-hero.medium{width:72%;margin-left:auto;margin-right:auto}
.b-grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--gap);align-items:start}
.b-grid.crop img{aspect-ratio:1/1;object-fit:cover}
.b-grid figure{margin:0}
.b-text{max-width:36em;font-size:var(--fs-body);line-height:1.65}
.b-text p{margin:0 0 1em}.b-text p:last-child{margin-bottom:0}
.gallery .b-text.left{margin-left:14%}
.gallery .b-text.centre{margin-left:auto;margin-right:auto;text-align:center}
.gallery .b-text.right{margin-left:auto;margin-right:0}
.b-text.large{font:300 calc(var(--fs-body) * 1.45)/1.42 var(--display);max-width:24em}
.b-imagetext{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.b-imagetext.left{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
.b-imagetext.left figure{order:2}
.gallery .b-imagetext .b-text{margin:0;max-width:none}
.g-next{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:baseline;border-top:1px solid var(--rule);padding-top:26px;margin-bottom:20px}
.g-next a{text-decoration:none;font:400 var(--fs-heading)/1.3 var(--display)}
.g-next a small{display:block;font:400 var(--fs-label)/1.6 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.g-next .nx{text-align:right}
.g-next .all{font:400 var(--fs-small)/1 var(--text);color:var(--muted)}

@media (max-width:900px){
  .g-intro,.g-label,.g-back,.g-sub,.gallery .b-text.left,.g-loading{margin-left:0}
  .g-intro{grid-template-columns:1fr}
  .g-mosaic{grid-template-columns:repeat(6,1fr)}
  .span-7,.span-5,.span-4,.span-6,.span-8{grid-column:span 6}
  .g-mosaic .g-card.half{grid-column:span 3}
  .g-card.low{margin-top:0}
  .gallery .b-hero.medium{width:100%}
  .b-grid{grid-template-columns:repeat(min(var(--cols,3),3),minmax(0,1fr))}
  .b-imagetext,.b-imagetext.left{grid-template-columns:1fr}
  .b-imagetext.left figure{order:0}
  .g-sub{margin-top:-20px}
}
@media (max-width:520px){
  .b-grid.many{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-text.large{font-size:calc(var(--fs-body) * 1.2)}
  .g-mosaic .g-card.half{grid-column:span 6}
}