/* ---------- the strip ---------- */
.fs{position:relative;padding:18px 0 6px;user-select:none;-webkit-user-select:none}
/* stage height: reserved before first paint (head script FS_GEOM, perspective-aware incl. tilt/roll/reflection; flat = fh*1.25+20) -> no layout shift when JS starts */
.fs-stage{position:relative;
  /* height reserved before first paint by the <head> script (FS_GEOM: tilt sag, roll, reflection); fallback = flat formula */
  height:var(--stage-h,calc(clamp(200px,23.5vw,380px) * 1.1333 + 20px));perspective:var(--persp,1200px);perspective-origin:50% 50%;overflow:hidden;touch-action:pan-y;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.fs-stage.dragging{cursor:grabbing}
.fs-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:radial-gradient(ellipse 60% 85% at 50% 50%,transparent 55%,rgba(18,18,20,.55) 100%)}
.fs-ring,.fs-mring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
/* ---- tilt variant extras (only active with ?tilt / ?tiltz, or forced with ?reflect=1 / ?floor=1 / ?shade=1) ---- */
.fs-mring{display:none;pointer-events:none}.fs-reflect-on .fs-mring{display:block}
.fs-frame.fs-mirror{pointer-events:none}
.fs-flip{position:absolute;inset:0;transform:scaleY(-1)}  /* reflection twin: front-facing frame, content mirrored in 2D (back-facing twins were culled by Chromium) */
.fs-fade{position:absolute;inset:-1px;z-index:4;pointer-events:none;  /* mirrored: local bottom = next to the floor line */
  background:linear-gradient(to bottom,var(--bg) 0%,var(--bg) 30%,rgba(18,18,20,.86) 70%,rgba(18,18,20,.66) 100%)}
html:not(.fs-tilted) .fs-fade{background:linear-gradient(to bottom,var(--bg) 0%,var(--bg) 62%,rgba(18,18,20,.82) 80%,rgba(18,18,20,.6) 100%)}  /* flat default: short, soft reflection */
.fs-shade{position:absolute;inset:0;z-index:3;background:#050506;opacity:0;pointer-events:none}
.fs-floor{display:none;position:absolute;left:50%;top:50%;width:calc(var(--R,800px) * 2.6);height:calc(var(--R,800px) * 1.2);margin-left:calc(var(--R,800px) * -1.3);margin-top:calc(var(--R,800px) * -.6);pointer-events:none;
  background:radial-gradient(ellipse 30% 26% at 50% 52%,rgba(0,0,0,.85),rgba(0,0,0,0) 72%),radial-gradient(ellipse 46% 48% at 50% 50%,rgba(150,170,200,.075),rgba(150,170,200,0) 70%)}
.fs-floor-on .fs-floor{display:block}
.fs-frame{position:absolute;left:calc(var(--fw) / -2);top:calc(var(--fh) / -2);width:var(--fw);height:var(--fh);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:block;text-decoration:none;background:var(--film);outline:none}
.fs-frame[hidden]{display:none}
/* sprocket bands: holes drawn as a repeating rounded-rect SVG (inline data URI, self-contained) */
.fs-frame::before,.fs-frame::after{content:"";position:absolute;left:0;right:0;height:var(--band);
  background:var(--film) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='20'%3E%3Crect x='6' y='4' width='12' height='12' rx='2.2' fill='%23929292'/%3E%3C/svg%3E") repeat-x 0 50%/calc(var(--band) * .84) calc(var(--band) * .7)}
.fs-frame::before{top:0;background-position:0 100%}.fs-frame::after{bottom:0;background-position:0 0}
.fs-edge{position:absolute;left:8%;bottom:1px;font-size:calc(var(--band) * .24);line-height:1;letter-spacing:.18em;color:var(--edge);opacity:.85;white-space:nowrap;pointer-events:none;z-index:2}
.fs-num{position:absolute;right:7%;top:1px;font-size:calc(var(--band) * .24);line-height:1;letter-spacing:.12em;color:var(--edge);opacity:.85;pointer-events:none;z-index:2}
.fs-pic{position:absolute;left:var(--fs-inset,3.2%);right:var(--fs-inset,3.2%);top:var(--band);bottom:var(--band);overflow:hidden;border-radius:3px;background:#1d1e21}
.fs-pic img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s}
.fs-pic img.ok{opacity:1}
.fs-tag{position:absolute;left:8px;top:8px;font-size:10px;letter-spacing:.14em;background:rgba(0,0,0,.6);padding:3px 6px;border:1px solid rgba(255,255,255,.18)}
.fs-play{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.5)}
.fs-play::after{content:"";position:absolute;left:18px;top:14px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent #fff}
.fs-frame:focus-visible .fs-pic{outline:2px solid var(--acc);outline-offset:2px}

.fs-bar{display:grid;grid-template-columns:96px 1fr 96px;align-items:center;gap:10px;height:52px;padding:4px 16px;max-width:900px;margin:0 auto} /* fixed geometry: caption changes never shift layout */
.fs-cap{grid-column:2;font-size:13px;line-height:1.35;letter-spacing:.06em;color:var(--ink);text-align:center;height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;align-self:center}
.fs-toggle{grid-column:3;justify-self:end;width:96px;white-space:nowrap}
@media (max-width:639px){.fs-bar{grid-template-columns:0 1fr 84px;gap:8px;padding:4px 12px}.fs-toggle{width:84px}}
.fs-cap small{color:var(--dim);letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;margin-left:10px}
.fs-btn{background:none;border:1px solid var(--line);color:var(--dim);font:inherit;font-size:11px;letter-spacing:.12em;padding:8px 10px;cursor:pointer;min-width:44px;min-height:36px}
.fs-btn:hover,.fs-btn:focus-visible{color:var(--ink);border-color:#666}

/* sharp hold (Peter 10:37): flat 2D copy of the held front frame, laid exactly over it by film.js; no transform / filter / 3D */
.fs-stage>.fs-frame.fs-plate{left:auto;top:auto;transform:none;backface-visibility:visible;-webkit-backface-visibility:visible;z-index:4;pointer-events:none;will-change:auto;filter:none;box-shadow:none}   /* the 3D frame underneath keeps drawing its hairline edge + drop shadow (no doubled shadow) */
.fs-plate .fs-pic img{transition:none}

/* ---- landing page: ONLY the top menu + the strip, strip centred vertically in the space under the sticky header ---- */
.fs{--bg:#121214;--ink:#e6e8ec;--dim:#8b93a1;--line:#2a2c31;--acc:#7fb2d6;--mono:'Courier New','Nimbus Mono PS',Courier,monospace;
  --film:#0b0b0c;--edge:#c7893c;font-family:var(--mono);color:var(--ink)}
body.fs-landing{min-height:100svh;display:flex;flex-direction:column}
.fs-main{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - var(--hdr-h,64px))}
.fs-main .fs{padding:0 0 calc(var(--hdr-h,64px) * .35)}    /* optical centre: a touch above the geometric middle */
.fs-noscript{columns:2;padding:20px 40px;font-size:13px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== GALLERY look (Peter 8:19 / 8:46): framed prints on a dark gallery wall - no sprockets, no film text ===== */
.fs-gallery{--wall:#191817;--bg:#191817;--mat:#cbcbcb;padding:34px 0 14px;
  background:radial-gradient(ellipse 62% 70% at 50% 34%,rgba(255,244,226,.07),rgba(255,244,226,0) 70%),linear-gradient(#1b1a19,#161514 78%,#121214)}
.fs-gallery .fs-stage::after{background:radial-gradient(ellipse 64% 90% at 50% 50%,transparent 60%,rgba(22,21,20,.5) 100%)}
.fs-gallery .fs-frame{background:var(--mat);box-shadow:0 0 0 1px rgba(0,0,0,.55),0 14px 26px rgba(0,0,0,.42)}   /* thin light-gray mat (Peter 8:55: half width, #cbcbcb) + hairline frame edge */
.fs-gallery .fs-frame::before,.fs-gallery .fs-frame::after,.fs-gallery .fs-num,.fs-gallery .fs-edge{display:none}   /* no sprockets, no film text */
.fs-gallery .fs-pic{left:var(--band);right:var(--band);top:var(--band);bottom:var(--band);border-radius:0;background:#2a2927;box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}
.fs-gallery .fs-mirror{box-shadow:none;background:transparent}
.fs-gallery .fs-mirror .fs-flip{background:var(--mat)}   /* the mat is drawn inside the masked layer, so it fades with the photo */
.fs-gallery .fs-fade{display:none}
.fs-gallery .fs-mirror .fs-flip{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 70%,rgba(0,0,0,.2) 100%);mask-image:linear-gradient(to bottom,transparent 0,transparent 70%,rgba(0,0,0,.2) 100%)}   /* soft reflection (colour independent) */
.fs-gallery .fs-cap{font-size:12px;letter-spacing:.08em;color:#d9d6cf}
.fs-gallery .fs-cap small{color:#8f8a80}
/* Peter 9:43: the bio runs wide above the strip (about the strip's width: 1 line pw, 1-2 lines prophotostl on desktop, natural wrap on phone)
   short bio above the strip on the main pages (Peter 9:16): visible only on the main strip page, gone once a strip image is clicked */
.fs-bio{box-sizing:border-box;width:100%;max-width:min(1120px,94vw);margin:0 auto 6px;padding:0 20px;text-align:center;font-family:var(--font-mono,var(--mono,ui-monospace,monospace));
  font-size:13.5px;line-height:1.75;letter-spacing:.01em;color:#a8a39a;text-wrap:balance}
.fs-bio-pw{max-width:min(1120px,94vw);text-wrap:balance}   /* Peter 9:47: same cap as prophotostl -> 2 balanced lines on a 1440 desktop */
@media (max-width:639px){.fs-bio{font-size:12.5px;line-height:1.7;padding:0 22px}}
html.fs-clicked .fs-bio{visibility:hidden}

/* ?verticals=1 variant (Peter 9:51): a vertical photo sits WHOLE (contain, no crop) and centred in the SAME 3:2 light-gray frame,
   with a dark neutral fill on both sides */
.fs-frame.fs-vert .fs-pic{background:#111}
.fs-frame.fs-vert .fs-pic img{object-fit:contain}

/* landing with the gallery strip: the whole space under the menu is the gallery wall */
html.fs-gal body.fs-landing{background:#151413}
html.fs-gal .fs-main{background:radial-gradient(ellipse 60% 55% at 50% 42%,rgba(255,244,226,.065),rgba(255,244,226,0) 70%),linear-gradient(#1a1918,#161514 80%,#131212)}
html.fs-gal .fs-main .fs-gallery{background:none}

/* ---- (B) video page strip: under the page title, above the video grid ---- */
html.fs-gal body.fs-vpage{background:#151413;min-height:100svh;display:flex;flex-direction:column}
body.fs-vpage>main{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - var(--hdr-h,64px));padding:0;max-width:none;
  background:radial-gradient(ellipse 60% 55% at 50% 42%,rgba(255,244,226,.065),rgba(255,244,226,0) 70%),linear-gradient(#1a1918,#161514 80%,#131212)}
body.fs-vpage>main>*{margin-left:0;margin-right:0}
body.fs-vpage .fs-video{background:none;padding:0 0 calc(var(--hdr-h,64px) * .35)}
/* Peter 8:53: Video page = strip only. The title stays for screen readers / SEO, the video cards stay in the DOM (display:none) as the
   player's source of truth - a strip click calls the card's own click handler, so it is the site's exact player (1080p/720p choice, captions) */
body.fs-vpage .page-head,body.fs-vpage .site-footer{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.fs-vpage .vgrid{display:none}