#photography .photo-scroller{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;align-items:stretch;grid-template-columns:none;padding:8px 6px 20px;scroll-behavior:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;overscroll-behavior-x:contain;touch-action:pan-x pan-y;border-radius:10px}#photography .photo-cycle{display:flex;gap:16px;flex:none}#photography .photo-bento-group{display:grid;flex:none;width:560px;height:372px;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px}#photography .photo-item{height:100%;min-height:0;overflow:hidden;border-radius:8px;isolation:isolate}#photography .photo-item:first-child{grid-column:span 2;grid-row:span 2}#photography .photo-item img{height:100%;width:100%;object-fit:cover;border:0;border-radius:8px}#photography .photo-number{position:absolute;inset:auto 0 0;margin:0;padding:24px 10px 9px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:white;z-index:1;pointer-events:none}#photography .photo-number>span{color:white}#photography .photo-item:hover{transform:none}#photography .photo-item:hover img{box-shadow:none}#photography .photo-item:hover .photo-number{background:linear-gradient(transparent,rgba(60,12,95,.85))}#photography .photo-scroller:focus-visible{outline:2px solid var(--blue);outline-offset:5px}.photo-scroll-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 12px;font:10px/1.6 var(--mono);color:var(--text-secondary)}.photo-scroll-controls button{font:11px/1.5 var(--mono);border:1px solid var(--ink);border-radius:18px;color:var(--ink);background:var(--bg);padding:10px 16px;min-height:42px;cursor:pointer}.photo-scroll-controls button:hover{background:var(--ink);color:var(--bg)}.photo-scroll-controls button:focus-visible{outline:3px solid var(--blue);outline-offset:4px}.photo-scroll-controls button:disabled{opacity:.6;cursor:default}
@media(max-width:700px){#photography .photo-bento-group{width:430px;height:292px;gap:8px}#photography .photo-cycle,#photography .photo-scroller{gap:12px}.photo-scroll-controls{font-size:9px}.photo-scroll-controls button{padding-inline:12px}#photography .photo-number{font-size:9px}}
@media(prefers-reduced-motion:reduce){#photography .photo-item,#photography .photo-item img{transition:none!important}}
/* Full-bleed photography ribbon, no surrounding panel or visible controls. */
#photography.photography-section{width:100%;max-width:none;padding-left:0;padding-right:0;overflow:hidden;background:transparent}#photography .photo-section-heading{max-width:1100px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}#photography .photo-scroller{width:100%;border:0;border-radius:0;box-shadow:none;background:transparent;padding:0;scrollbar-width:none}#photography .photo-scroller::-webkit-scrollbar{display:none}#photography .photo-item,#photography .photo-item img{border:0;border-radius:0;box-shadow:none}#photography .photo-scroller:focus-visible{outline-offset:-3px}@media(max-width:600px){#photography .photo-section-heading{padding-inline:20px}}
#photography .photo-scroller-second{margin-top:14px}#photography .photo-scroller-second .photo-bento-group{width:480px;height:322px}
/* Photography fits completely inside the viewer. Long design boards retain scrolling. */
#viewer.photo-fit .viewerbody{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;min-height:0;max-height:none;overflow:hidden;scrollbar-gutter:auto;flex:1;padding:14px;margin:0;touch-action:auto}#viewer.photo-fit #viewer-image{display:block;width:100%;height:100%;min-height:0;max-width:100%;max-height:100%;object-fit:contain;object-position:center;aspect-ratio:auto;margin:0}#viewer.photo-fit #viewer-caption{padding:0;margin:0;font-size:12px;line-height:1.5;max-height:3em;overflow:hidden}
@media(max-width:700px){#photography .photo-scroller-second{margin-top:10px}#photography .photo-scroller-second .photo-bento-group{width:390px;height:266px}#viewer.photo-fit .viewerbody{padding:8px;gap:8px}#viewer.photo-fit #viewer-caption{font-size:11px}}
/* One unified mosaic, with the varied tile rhythm of the supplied reference. */
#photography .photo-bento-group.photo-mosaic{width:1040px;height:640px;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));gap:10px}#photography .photo-mosaic .photo-item:nth-child(n){grid-column:auto;grid-row:auto;border-radius:11px;overflow:hidden;background:var(--bg)}#photography .photo-mosaic .photo-item img{border-radius:11px;object-fit:cover}#photography .photo-mosaic .photo-item:nth-child(1){grid-column:1/span 3;grid-row:1/span 5}#photography .photo-mosaic .photo-item:nth-child(2){grid-column:4/span 3;grid-row:1/span 3}#photography .photo-mosaic .photo-item:nth-child(3){grid-column:7/span 3;grid-row:1/span 3}#photography .photo-mosaic .photo-item:nth-child(4){grid-column:10/span 3;grid-row:1/span 5}#photography .photo-mosaic .photo-item:nth-child(5){grid-column:4/span 4;grid-row:4/span 3}#photography .photo-mosaic .photo-item:nth-child(6){grid-column:8/span 2;grid-row:4/span 3}#photography .photo-mosaic .photo-item:nth-child(7){grid-column:1/span 3;grid-row:6/span 3}#photography .photo-mosaic .photo-item:nth-child(8){grid-column:10/span 3;grid-row:6/span 3}#photography .photo-mosaic .photo-item:nth-child(9){grid-column:4/span 3;grid-row:7/span 2}#photography .photo-mosaic .photo-item:nth-child(10){grid-column:7/span 3;grid-row:7/span 2}#photography .photo-cycle,#photography .photo-scroller{gap:10px}
@media(max-width:900px){#photography .photo-bento-group.photo-mosaic{width:850px;height:536px;gap:8px}#photography .photo-cycle,#photography .photo-scroller{gap:8px}}
@media(max-width:600px){#photography .photo-bento-group.photo-mosaic{width:680px;height:440px;gap:7px}#photography .photo-cycle,#photography .photo-scroller{gap:7px}#photography .photo-mosaic .photo-item:nth-child(n),#photography .photo-mosaic .photo-item img{border-radius:7px}}