/* STUDIOFENCE v30 | editorial single-frame photographic gallery.
   Progressive enhancement: without JavaScript the entire image sequence remains visible.
   Never modifies original photos, aspect ratios, or source sequence. */
.sf22-gallery.sf30-enhanced{display:block; padding:clamp(22px,3.2vw,48px) 0 clamp(46px,6vw,84px); position:relative; min-width:0;}
.sf30-enhanced [hidden]{display:none!important}
.sf30-top{display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 clamp(19px,2.5vw,32px); color:#6f6f6d}
.sf30-label,.sf30-counter,.sf30-instruction,.sf30-index-trigger,.sf30-expand,.sf30-overview-head,.sf30-index-number{font-family:inherit; font-weight:400; font-size:10px; line-height:1.5; letter-spacing:.16em;}
.sf30-counter{font-variant-numeric:tabular-nums; color:#222; white-space:nowrap;}
.sf30-top .sf30-expand{margin-left:auto;}.sf30-top .sf30-index-trigger{margin-left:0;}.sf30-top .sf30-counter{margin-left:12px;}
.sf30-counter .sf30-of{color:#aaa; padding:0 7px}
.sf30-stage-row{display:grid; grid-template-columns:clamp(33px,4.2vw,64px) minmax(0,1fr) clamp(33px,4.2vw,64px); gap:clamp(5px,1.4vw,24px); align-items:center; min-width:0}
.sf30-stage{position:relative; height:clamp(290px,calc(100svh - 445px),860px); min-width:0; outline-offset:5px; cursor:default;}
.sf30-stage .sf22-photo{width:100%;height:100%;min-width:0; margin:0;display:flex; flex-direction:column; justify-content:center; align-items:center;}
.sf22-gallery.sf30-enhanced .sf30-stage .sf22-photo img,
.sf22-gallery.sf30-enhanced .sf30-stage .sf22-photo.sf29-portrait img{display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; object-position:center; margin:0 auto; background:transparent; border:0;}
.sf30-stage .sf22-photo:has(figcaption) img{max-height:calc(100% - 36px)!important}
.sf30-stage .sf22-photo figcaption{margin:10px auto 0; max-width:min(100%,850px); font-size:10px; line-height:1.45; text-align:center; color:#666}
.sf30-arrow{border:0;border-radius:0; background:transparent; color:#242424; font:300 clamp(24px,2.3vw,32px)/1 Arial,Helvetica,sans-serif; height:84px; min-width:33px; cursor:pointer; padding:0; transition:opacity .2s ease, transform .2s ease; touch-action:manipulation}
.sf30-arrow:hover:not(:disabled){transform:translateX(-2px)}
.sf30-arrow.sf30-next:hover:not(:disabled){transform:translateX(2px)}
.sf30-arrow:disabled{opacity:.13;cursor:default}
.sf30-arrow:focus-visible,.sf30-index-trigger:focus-visible,.sf30-expand:focus-visible,.sf30-thumb:focus-visible,.sf30-close:focus-visible{outline:2px solid #444; outline-offset:4px}
.sf30-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px; margin-top:clamp(22px,3vw,42px)}
.sf30-progress{flex:1; min-width:50px; height:1px; background:#d8d8d6; position:relative; overflow:hidden}
.sf30-progress > span{display:block; width:0; height:100%; background:#191919; transition:width .38s cubic-bezier(.2,.8,.2,1)}
.sf30-tools{display:flex;align-items:center;justify-content:flex-end;gap:clamp(17px,3vw,42px)}
.sf30-instruction{color:#969696; white-space:nowrap; letter-spacing:.08em}
.sf30-expand{background:none; border:0; color:#262626; cursor:pointer; padding:9px 0; white-space:nowrap; letter-spacing:.12em;}
.sf30-expand:hover{color:#999}
.sf30-index-trigger{background:none; border:0; color:#262626; cursor:pointer; padding:9px 0; white-space:nowrap; border-bottom:1px solid #a0a0a0; transition:border-color .15s ease}
.sf30-index-trigger:hover{border-bottom-color:#171717}
.sf30-index-dialog{box-sizing:border-box; background:#fbfbfa;color:#20201f; border:1px solid #e3e3e0; padding:clamp(18px,3vw,48px); width:min(1140px,calc(100% - 28px)); max-width:1140px; max-height:86dvh; margin:auto; box-shadow:0 20px 85px rgba(0,0,0,.09);}
.sf30-index-dialog::backdrop{background:rgba(24,25,25,.48);backdrop-filter:blur(8px)}
.sf30-overview-head{display:flex;align-items:center;justify-content:space-between;gap:16px; margin:0 0 27px;}
.sf30-close{border:0;background:none;color:#222;cursor:pointer;font:inherit;font-size:12px;min-width:38px;min-height:38px}
.sf30-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(15px,2vw,28px) clamp(11px,1.5vw,20px)}
.sf30-thumb{display:flex;flex-direction:column;align-items:stretch;gap:9px; text-align:left; padding:0; border:0;background:none;cursor:pointer; min-width:0;color:#707070}
.sf30-thumb-image{height:clamp(80px,12vw,150px);display:flex; align-items:center;justify-content:center; background:#f0f0ee; padding:6px; border:1px solid transparent;}
.sf30-thumb-image img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.sf30-thumb[aria-current="true"] .sf30-thumb-image{border-color:#313131}
.sf30-thumb:hover .sf30-thumb-image{border-color:#777}
.sf30-thumb .sf30-index-number{font-variant-numeric:tabular-nums;font-size:9px;letter-spacing:.12em}
body.sf30-view-open{overflow:hidden!important}
.sf22-gallery.sf30-enhanced.sf30-full-view{position:fixed;inset:0;z-index:99998;box-sizing:border-box;width:100%;height:100dvh;background:#fdfdfc;margin:0;padding:clamp(16px,2.5vw,38px);display:flex;flex-direction:column;}
.sf30-full-view .sf30-top{flex:none;margin-bottom:clamp(10px,2vh,24px)}
.sf30-full-view .sf30-stage-row{flex:1;min-height:0;}
.sf30-full-view .sf30-stage{height:100%;min-height:0;}
.sf30-full-view .sf30-bottom{flex:none;margin-top:clamp(12px,2.4vh,30px)}
.sf30-stage:focus-visible{outline:1px solid #888;outline-offset:5px}
.sf30-enhanced .sf30-active{view-transition-name:sf30-photograph}
::view-transition-old(sf30-photograph){animation:sf30-out .21s ease both}
::view-transition-new(sf30-photograph){animation:sf30-in .32s ease both}
@keyframes sf30-out{to{opacity:0}}
@keyframes sf30-in{from{opacity:0}to{opacity:1}}
@media(max-width:760px){
.sf22-gallery.sf30-enhanced{padding:24px 0 44px}
.sf30-stage-row{grid-template-columns:24px minmax(0,1fr) 24px; gap:3px}
.sf30-stage{height:clamp(275px,calc(100svh - 440px),620px)}
.sf30-arrow{min-width:24px;height:60px;font-size:25px}
.sf30-instruction{font-size:9px}
.sf30-top .sf30-expand{margin-left:auto}
.sf30-tools{gap:15px}
.sf30-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 9px}
.sf30-thumb-image{height:105px}
.sf30-index-dialog{max-height:88dvh;padding:19px}
.sf30-index-dialog::backdrop{backdrop-filter:none}
}
@media(max-width:520px){.sf30-top .sf30-label{display:none}.sf30-top .sf30-expand{margin-left:0}.sf30-top .sf30-counter{margin-left:auto}.sf30-expand,.sf30-index-trigger{font-size:9px}}
@media(max-width:420px){.sf30-instruction{display:none}.sf30-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.sf30-progress>span,.sf30-arrow{transition:none!important}::view-transition-old(sf30-photograph),::view-transition-new(sf30-photograph){animation-duration:.01ms!important}}