/* PHOTO SHOOTS (2026-10-10): the one gallery of our shoots, on photo.html and the 11 photography sub-pages (old URLs kept for SEO).
   Data: design/shoots.json → tools/shoots_build.py writes the static cards/gallery into the pages; js/shoots.js runs the viewer.
   Five category cards (site work-card spec) → a viewer opens under the row: shoot list, slideshow + filmstrip, all photos in their real shape, full screen.
   The viewer opening under its row is an accepted exception to "no click resizes anything" (user, 2026-10-10). Prefix so- (gallery), pz- (sub-page). */

/* five category cards = the site's work card (.wk.gl, as Shopify #work): tonal fill, picture flush to the top edge, label, title, line, link; grid gap 1rem */
.so-cats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.so-cat{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;min-width:0;border-radius:var(--r-lg);overflow:hidden;position:relative;isolation:isolate;color:inherit}
.so-cat .pics{position:relative;z-index:1;aspect-ratio:1;overflow:hidden;background:var(--plane-2)}
.so-cat .pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s var(--ease),transform var(--med) var(--ease)}
.so-cat .pics img + img{opacity:0}
.so-cat:hover .pics img{transform:scale(1.03)}
.so-cat .tx{position:relative;z-index:1;padding:1rem 1.125rem 1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.so-cat h3{font-size:1.125rem;font-weight:500}
.so-cat p{color:var(--muted);font-size:.875rem;line-height:1.55}
.so-cat .link{margin-top:auto;padding-top:.25rem}
.so-cat .link .arr{display:inline-block;transition:transform var(--fast)}
.so-cat[aria-expanded="true"] .link .arr{transform:rotate(180deg)}
.so-cat[aria-expanded="true"]{box-shadow:inset 0 -2px var(--accent)}
.so-cat:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* the viewer: opens under the row */
.so-v{grid-column:1/-1;border-radius:var(--r-lg);background:var(--plane-2);padding:clamp(.875rem,1.6vw,1.25rem);display:grid;grid-template-columns:15rem minmax(0,1fr);gap:clamp(.875rem,1.6vw,1.25rem);animation:so-in .35s var(--ease)}
@keyframes so-in{from{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:none}}
.so-list{display:grid;align-content:start;gap:.25rem}
.so-list .label{padding:.25rem .5rem .5rem}
.so-list button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:3rem 1fr;gap:.75rem;align-items:center;padding:.375rem .5rem;border-radius:var(--r)}
.so-list button img{width:3rem;height:3rem;border-radius:var(--r-sm);object-fit:cover}
.so-list button b{font:500 .9375rem/1.25 var(--display);color:var(--muted)}
.so-list button small{display:block;font-size:.75rem;color:var(--muted)}
.so-list button:hover b,.so-list button[aria-selected="true"] b{color:var(--text)}
.so-list button[aria-selected="true"]{background:var(--plane);box-shadow:inset 2px 0 var(--accent)}
.so-list button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.so-main{display:grid;grid-template-rows:auto auto auto;gap:.75rem;min-width:0}
.so-top{display:flex;justify-content:space-between;align-items:center;gap:.75rem 1.25rem;flex-wrap:wrap}
.so-top h3{font-size:var(--fs-h3);font-weight:500}
.so-top p{color:var(--muted);font-size:.875rem;margin-top:.125rem}
.so-seg{display:inline-grid;grid-auto-flow:column;padding:.1875rem;border-radius:var(--r-sm);background:var(--plane)}
.so-seg button{all:unset;cursor:pointer;padding:.4375rem .875rem;border-radius:var(--r-xs);font:500 .8125rem var(--body);color:var(--muted)}
.so-seg button[aria-pressed="true"]{background:var(--plane-2);color:var(--text);box-shadow:0 1px 0 var(--line)}
.so-seg button:focus-visible{outline:2px solid var(--accent)}
/* slideshow: big stage (photos keep their shape), arrows, counter, filmstrip with true-shape thumbs */
.so-stage{position:relative;height:min(68svh,38rem);border-radius:var(--r);background:var(--ink);overflow:hidden;touch-action:pan-y;user-select:none}
.so-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.so-stage img.out{opacity:0;transform:scale(.985)}
.so-stage .ar{all:unset;cursor:pointer;position:absolute;top:50%;translate:0 -50%;width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--text) 16%,transparent);color:var(--text);font-size:1.375rem;backdrop-filter:blur(6px);transition:background var(--fast)}
.so-stage .ar:hover{background:var(--accent);color:#fff}
/* light theme: the arrows sit on photos (mostly dark), so they keep a dark disc and a white glyph (a dark glyph on 16% grey vanished on the food shots) */
:root[data-theme="light"] .so-stage .ar:not(:hover){background:rgba(8,10,12,.45);color:#fff}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .so-stage .ar:not(:hover){background:rgba(8,10,12,.45);color:#fff}}
.so-stage .ar:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.so-stage .ar.p{left:.75rem}.so-stage .ar.n{right:.75rem}
.so-stage .ct{position:absolute;left:.75rem;bottom:.75rem;font:500 .75rem var(--body);padding:.25rem .5rem;border-radius:var(--r-xs);background:color-mix(in srgb,var(--ink) 75%,transparent);color:var(--text);font-variant-numeric:tabular-nums}
.so-stage .zm{all:unset;cursor:pointer;position:absolute;right:.75rem;bottom:.75rem;font:500 .75rem var(--body);padding:.25rem .5rem;border-radius:var(--r-xs);background:color-mix(in srgb,var(--ink) 75%,transparent);color:var(--text)}
.so-stage .zm:hover{color:var(--accent)}
.so-strip{display:flex;gap:.375rem;overflow-x:auto;scrollbar-width:thin;padding-bottom:.25rem}
.so-strip button{all:unset;cursor:pointer;flex:none;height:4.25rem;aspect-ratio:1;border-radius:var(--r-xs);overflow:hidden;opacity:.5;transition:opacity var(--fast),box-shadow var(--fast)}
.so-strip button img{height:100%;width:100%;object-fit:cover;display:block}
.so-strip button:hover{opacity:.85}
.so-strip button[aria-current="true"]{opacity:1;box-shadow:inset 0 0 0 2px var(--accent)}
.so-strip button[aria-current="true"] img{outline:2px solid var(--accent);outline-offset:-2px}
.so-strip button:focus-visible{outline:2px solid var(--accent)}
/* grid view: every photo in its real shape (the part the user liked) */
.so-mas{columns:4 10rem;column-gap:.5rem}
.so-mas button{all:unset;cursor:zoom-in;display:block;margin-bottom:.5rem;break-inside:avoid;border-radius:var(--r-sm);overflow:hidden}
.so-mas img{display:block;width:100%;height:auto;transition:transform var(--med) var(--ease)}
.so-mas button:hover img{transform:scale(1.03)}
.so-mas button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.so-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.8125rem;color:var(--muted)}
.so-foot b{color:var(--text);font-weight:500}
/* full screen */
.so-stage.fs{position:fixed;inset:0;z-index:300;height:auto;border-radius:0;background:rgba(6,8,10,.96)}
.so-stage .x{display:none}
.so-stage.fs .x{all:unset;cursor:pointer;display:grid;place-items:center;position:absolute;top:max(.75rem,env(safe-area-inset-top));right:.75rem;width:2.75rem;height:2.75rem;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.25rem}
.so-stage.fs .zm{display:none}

@media (max-width:1100px){.so-cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:601px) and (max-width:1100px){.so-cat:nth-child(n+4){grid-column:span 1}}
@media (max-width:900px){.so-v{grid-template-columns:1fr}.so-list{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;scrollbar-width:none}.so-list .label{display:none}.so-list button[aria-selected="true"]{box-shadow:inset 0 -2px var(--accent)}}
@media (max-width:600px){.so-cats{grid-template-columns:repeat(2,minmax(0,1fr));container-type:inline-size}.so-cat .ph{display:none}.so-cat:last-of-type:nth-of-type(odd){grid-column:1/-1}
 .so-cat:last-of-type:nth-of-type(odd) .pics{aspect-ratio:auto;height:calc((100cqw - 1rem)/2)} /* the wide last card: picture as tall as the others' square ones, so every card is one height */.so-cat p{display:none}.so-stage{height:min(62svh,26rem)}.so-stage .ar{width:2.75rem;height:2.75rem}.so-mas{columns:2}.so-strip button{height:3.5rem}}
@media (prefers-reduced-motion:reduce){.so-v{animation:none}.so-stage img,.so-cat .pics img{transition:none}}

/* "Photography services" row on photo.html: links to the eleven shoot pages (styles restored 2026-10-12; they went with the sub-page rework of 2026-10-11 and left the row unstyled) */
.pz-more{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:baseline;margin-top:clamp(1.5rem,4vh,2.5rem);padding-top:1.125rem;border-top:1px solid var(--line)}
.pz-more a{position:relative;font-size:.9375rem;color:var(--text);text-decoration:none}
.pz-more a::after{content:"";position:absolute;inset:-12px -4px}
.pz-more a:hover{color:var(--accent)}

/* sub-pages (gallery pages, 2026-10-11): breadcrumb + title, the viewer as the main content, then the words. No hero, no repeated gallery */
section.screen.pz-top#work{min-height:0;padding-top:calc(var(--nav,4.5rem) + clamp(1.5rem,4vh,2.5rem))!important}
.pz-crumb{display:flex;gap:.5rem;align-items:center;font-size:.8125rem;color:var(--muted);margin-bottom:.875rem}
.pz-crumb a{color:var(--muted);text-decoration:none;position:relative}.pz-crumb a:hover{color:var(--accent)}
.pz-crumb a::after{content:"";position:absolute;inset:-12px -4px}
.pz-ttl{display:flex;justify-content:space-between;align-items:end;gap:1rem 2rem;flex-wrap:wrap;margin-bottom:clamp(1.25rem,3vh,1.75rem)}
.pz-ttl h1{font-size:clamp(1.875rem,3.4vw,2.75rem);line-height:1.1;text-wrap:balance}
.pz-ttl p{color:var(--muted);font-size:1.0625rem;margin-top:.5rem}
.so-solo .so-v{margin:0}
.so-v.one{grid-template-columns:minmax(0,1fr)}
/* sub-page: other shoots, linked (same category first) */
.pz-sim{margin-top:clamp(2rem,5vh,3rem)}
.pz-sim h2{font-size:var(--fs-h3);font-weight:500;margin-bottom:1rem}
.pz-sim-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.pz-sim-c{display:grid;grid-template-columns:6rem 1fr;align-items:center;border-radius:var(--r-lg);background:var(--plane-2);overflow:hidden;text-decoration:none;color:inherit}
.pz-sim-c img{width:6rem;height:6rem;object-fit:cover;display:block}
.pz-sim-c .tx{display:grid;gap:.25rem;padding:.75rem 1rem;align-content:center;min-width:0}
.pz-sim-c h3{font-size:1.0625rem;font-weight:500}
.pz-sim-c:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:1100px){.pz-sim-g{grid-template-columns:1fr 1fr}}@media (max-width:560px){.pz-sim-g{grid-template-columns:1fr}}
.pz-about{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,3.5vw,3.5rem);margin-top:clamp(2rem,5vh,3rem)}
.pz-about h2,.pz-about h3{font-size:var(--fs-h3);font-weight:500;margin-bottom:.75rem}
.pz-about p{color:var(--muted);font-size:.9375rem;line-height:1.65}
.pz-about p + p{margin-top:.75rem}
.pz-about ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pz-about li{display:grid;gap:.125rem;padding:.75rem 0;border-bottom:1px solid var(--line);font-size:.9375rem}
.pz-about li b{font-weight:500}.pz-about li span{color:var(--muted);font-size:.875rem}
@media (max-width:1000px){.pz-about{grid-template-columns:1fr 1fr}.pz-about > div:first-child{grid-column:1/-1}}
@media (max-width:600px){.pz-about{grid-template-columns:1fr}.pz-ttl .btn{width:100%;justify-content:center}}

/* PHONE v2 (2026-10-12, mobile pass): 44px targets in the viewer (view switch, arrows, full screen); the filmstrip stays a sideways strip (a row of photos to flick through) */
@media (max-width:760px){
 .so-seg button{min-height:44px;box-sizing:border-box;display:grid;place-items:center;padding-block:0}
 .so-stage .ar{width:44px;height:44px}
 .so-stage .zm{padding:.625rem .75rem;right:.375rem;bottom:.375rem}
 .so-stage .ct{left:.375rem;bottom:.375rem;padding:.625rem .75rem}
 .so-strip button{height:3.5rem}
 /* the shoot list under the cards: two shoots share a row (no sideways strip with a cut-off second shoot) */
 .so-list{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;gap:.375rem}
 .so-list button{grid-template-columns:2.5rem 1fr;gap:.5rem;padding:.375rem;min-height:44px}
 .so-list button img{width:2.5rem;height:2.5rem}
 .so-list button b{font-size:.875rem}
 .so-list button small{display:none} /* brand and photo count repeat in the heading right under the list */
 /* phone round 2 (2026-10-12): every viewer label 12px or more; Similar shoots = the card is the link, so its link line goes (names only) and the rows get shorter */
 .so-stage .ct,.so-stage .zm,.so-seg button,.so-foot,.pz-crumb{font-size:max(12px,.8125rem)}
 .pz-sim-c{grid-template-columns:4.75rem 1fr}
 .pz-sim-c img{width:4.75rem;height:4.75rem}
 .pz-sim-c .tx{padding:.625rem .875rem}
 .pz-sim-c .link{display:none}
 .pz-sim-c h3{font-size:1rem}
}

/* SHOW MORE on phones (2026-10-12): "About the shoot" keeps its first paragraph and the first three of each list; the shared .ph-more toggle (site.css) under it
   shows the rest. The words stay in the HTML (search); the button is hidden on desktop (js/shoots.js adds it) */
@media (max-width:760px){
 .pz-about:not(.open) > div:first-child p + p,.pz-about:not(.open) li:nth-child(n+4){display:none}
 .pz-about{row-gap:1.75rem}
 .pz-about + .ph-more{margin-top:.5rem}
 /* sub-page FAQ side links: names only (the linked page says the rest), as on the service pages */
 .pz-top ~ #faq .tiles p{display:none}
 .pz-top ~ #faq .tiles > *{padding-block:.75rem!important;min-height:44px;align-content:center}
}
/* phones (2026-10-13, image check): the wide last card shows its two portrait photos side by side, so neither is cropped to a thin strip */
@media (max-width:760px){.so-cat:last-of-type:nth-of-type(odd) .pics{display:grid;grid-template-columns:1fr 1fr;gap:2px}
 .so-cat:last-of-type:nth-of-type(odd) .pics img{position:static;opacity:1;height:100%;min-height:0}}