/* Photo layer (23/10/2026): Cameron is "a pictures person". Bigger, colour photos on every page, both options.
   Loaded after site.css (and after b-premium.css on option B). */

/* ---------- shared ---------- */
img{max-width:100%;height:auto}
.mmgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:1rem;margin:2rem 0}
.mmgal figure{margin:0}
.mmgal img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border:2px solid var(--ink)}
.mmgal figcaption{font:500 .78rem var(--mono);color:var(--muted);margin-top:.45rem}
.mmgal--wide img{aspect-ratio:3/2}
.prose .mmgal{margin:2.2rem 0}
.pfig img{filter:none;aspect-ratio:3/2}
.pfig--lead{margin:0 0 2rem}
.pfig--pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0}
.pfig--pair figure{margin:0}
.pfig--pair img{width:100%;aspect-ratio:3/4;object-fit:cover;border:2px solid var(--ink)}
.pfig--pair figcaption{font:500 .78rem var(--mono);color:var(--muted);margin-top:.45rem}
.pagehero{max-width:var(--max);margin:0 auto;padding:0 var(--gut) 2rem}
.pagehero img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block;border:2px solid var(--ink)}
@media (max-width:47.99rem){.pagehero img{aspect-ratio:4/3}}

/* ---------- option A: colour photos, still framed like prints on the job card ---------- */
.hero__photo img,.used__photo img,.nostart__photo img,.nct__photo img{filter:none}
.hero__photo img{aspect-ratio:4/3;object-position:50% 60%}
@media (min-width:62rem){.hero__photo img{aspect-ratio:4/5;object-position:50% 55%}.hero__photo{grid-row:1/3;margin-top:1rem}}
.display__kicker{display:block;font:500 clamp(.85rem,.7rem + .4vw,1.05rem)/1.2 var(--mono);font-stretch:100%;letter-spacing:.02em;text-transform:none;color:var(--muted);margin:0 0 1rem}
.used__photo img{aspect-ratio:3/2}
.nostart__photo img{aspect-ratio:4/3;object-position:50% 30%}
.nct__photo img{aspect-ratio:3/2}
.row__body--pic{display:grid;gap:1rem;align-items:start;max-width:none}
.row__img{width:100%;aspect-ratio:3/2;object-fit:cover;border:2px solid var(--ink);display:block}
@media (min-width:40rem){.row__body--pic{grid-template-columns:minmax(10rem,15rem) 1fr}}

.realjob{background:var(--ink);color:var(--paper);padding:clamp(4rem,8vw,7rem) var(--gut)}
.realjob>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.realjob__head{display:grid;gap:.6rem;margin-bottom:2.5rem}
.realjob__head .mono{color:#c9c5ba;margin:0}
.realjob__head p{max-width:42rem;font-size:1.12rem;margin:0}
.realjob__head .btn{margin-top:.8rem}
.realjob .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.beforeafter{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,2vw,2rem);margin-bottom:2rem}
.beforeafter figure{margin:0;position:relative}
.beforeafter img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border:2px solid var(--paper)}
.beforeafter figcaption{position:absolute;left:0;top:1rem;background:var(--red);color:#fff;font:800 clamp(.9rem,.7rem + .8vw,1.5rem)/1 var(--display);font-stretch:120%;padding:.5rem .9rem;text-transform:uppercase;letter-spacing:.04em}
.beforeafter__b figcaption{background:var(--paper);color:var(--ink)}
.beforeafter__a img{transform:rotate(-.8deg)}.beforeafter__b img{transform:rotate(.8deg)}
.realjob__strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (min-width:48rem){.realjob__strip{grid-template-columns:repeat(4,1fr);gap:1.4rem}}
.realjob__strip li{display:grid;gap:.3rem;background:var(--sheet);color:var(--ink);padding:.5rem .5rem .8rem;box-shadow:6px 6px 0 var(--red)}
.realjob__strip img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.realjob__strip .mono{font-size:.75rem;color:var(--red)}
.realjob__strip em{font-style:normal;font-size:.9rem;line-height:1.3}

.wall{max-width:var(--max);margin:0 auto;padding:clamp(4rem,8vw,7rem) var(--gut);border-top:2px solid var(--ink)}
.wall__head{display:grid;gap:.6rem;margin-bottom:2rem}
.wall__head p{max-width:40rem;font-size:1.1rem;margin:0}
.wall__grid{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:9.5rem;gap:1rem}
.wall__grid figure{margin:0;position:relative;border:2px solid var(--ink);overflow:hidden}
.wall__grid img{width:100%;height:100%;object-fit:cover;display:block}
body.v-b .wall__grid figure{border:0}
.wall__grid figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--paper);font:500 .74rem var(--mono);padding:.35rem .6rem;max-width:100%}
.wall__grid figure:nth-child(1){grid-column:span 2;grid-row:span 2}
@media (min-width:48rem){.wall__grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(9rem,13vw,13rem);gap:1.2rem}}

.guides__img{width:100%;aspect-ratio:16/9;object-fit:cover;border:2px solid var(--ink);margin-bottom:.6rem}
@media (min-width:48rem){.guides__list a{grid-template-columns:14rem 1fr;column-gap:1.6rem}.guides__img{grid-row:1/4;margin:0;aspect-ratio:4/3}}
.areas__photo{margin:0;grid-column:1/-1}
.areas__photo img{width:100%;aspect-ratio:21/8;object-fit:cover;display:block;border:2px solid var(--ink)}
@media (max-width:47.99rem){.areas__photo img{aspect-ratio:16/9}}

.postcard__pic{display:block}
.postcard__img{width:100%;aspect-ratio:21/9;object-fit:cover;border:2px solid var(--ink);display:block}
@media (min-width:48rem){.postcard{grid-template-columns:18rem 1fr;column-gap:2rem}.postcard__pic{grid-row:1/4}.postcard__img{aspect-ratio:4/3}}

/* ---------- option B ---------- */
body.v-b .mmgal img,body.v-b .pfig--pair img,body.v-b .pagehero img{border:0;border-radius:22px}
body.v-b .pfig img{border:0;border-radius:26px;box-shadow:0 30px 60px -30px rgba(20,22,28,.45)}
body.v-b .bhero__img{object-position:50% 60%}
body.v-b .blede{font-size:1.15rem;max-width:var(--max);margin:-1rem auto 2rem;color:var(--pm-ink-2)}
body.v-b .bsec--strip{padding-top:14px;padding-bottom:0}
body.v-b .bsec--strip>*{max-width:1360px}
body.v-b .bstrip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
body.v-b .bstrip img{flex:0 0 auto;width:clamp(150px,16vw,230px);aspect-ratio:3/4;object-fit:cover;border-radius:20px;scroll-snap-align:start}
body.v-b .bba{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
body.v-b .bba figure{position:relative;margin:0;border-radius:30px;overflow:hidden;box-shadow:var(--pm-shadow)}
body.v-b .bba img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
body.v-b .bba figcaption{position:absolute;left:16px;top:16px;padding:.55rem 1rem;border-radius:999px;background:var(--pm-red);color:#fff;font-weight:800;font-size:clamp(.8rem,.7rem + .4vw,1.05rem)}
body.v-b .bba figure:nth-child(2) figcaption{background:#fff;color:var(--pm-ink)}
body.v-b .bphotos{margin-bottom:2rem}
body.v-b .bphotos figure:nth-child(1){grid-column:span 4;grid-row:span 3}
body.v-b .bphotos figure{grid-column:span 4;grid-row:span 3}
@media(max-width:47.99rem){body.v-b .bphotos figure:nth-child(n){grid-column:span 1;grid-row:span 2}}
body.v-b .bwall{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(140px,14vw,220px);gap:14px}
body.v-b .bwall figure{position:relative;margin:0;border-radius:26px;overflow:hidden}
body.v-b .bwall figure:nth-child(1){grid-column:span 2;grid-row:span 2}
body.v-b .bwall img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--pm-ease)}
body.v-b .bwall figure:hover img{transform:scale(1.05)}
body.v-b .bwall figcaption{position:absolute;left:12px;bottom:12px;padding:.4rem .8rem;border-radius:999px;background:rgba(20,22,28,.72);color:#fff;font-size:.78rem;max-width:calc(100% - 24px)}
@media(max-width:47.99rem){body.v-b .bwall{grid-template-columns:1fr 1fr;grid-auto-rows:150px}body.v-b .bwall figure:nth-child(n){grid-column:span 1;grid-row:span 1}body.v-b .bwall figure:nth-child(1){grid-column:span 2;grid-row:span 2}body.v-b .bwall figcaption{display:none}}
body.v-b .bsplit{display:grid;gap:2rem;align-items:center;margin-bottom:2rem}
body.v-b .bsplit .bh2{margin-bottom:1rem}
body.v-b .bsplit .blede{margin:0}
body.v-b .bsplit__fig{margin:0;border-radius:30px;overflow:hidden;box-shadow:var(--pm-shadow)}
body.v-b .bsplit__fig img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
@media(min-width:62rem){body.v-b .bsplit{grid-template-columns:1.1fr 1fr;gap:3.5rem}}
body.v-b .bguides{grid-template-columns:1fr}
@media(min-width:48rem){body.v-b .bguides{grid-template-columns:repeat(2,1fr)}}
@media(min-width:75rem){body.v-b .bguides{grid-template-columns:repeat(4,1fr)}}
body.v-b .bguide--pic{display:grid;gap:.5rem;align-content:start}
body.v-b .bguide__img{width:calc(100% + 2.4rem);margin:-1.2rem -1.2rem .6rem;max-width:none;aspect-ratio:3/2;object-fit:cover;border-radius:20px}
body.v-b .bcta--pic{position:relative;overflow:hidden;background:#14161c}
body.v-b .bcta--pic>*{position:relative;z-index:1}
body.v-b .bcta--pic .bcta__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;z-index:0}
body.v-b .postcard__img{border:0;border-radius:22px}
body.v-b .guides__img,body.v-b .row__img{border:0;border-radius:18px}
body.v-b .ai-note{display:none!important}
.prose .mmgal{grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr))}
@media (max-width:61.99rem){.hero__photo figcaption{display:none}}