#gallery{container:gallery / inline-size;--mist:var(--surface);--serif:var(--font-display);--sans:var(--font-body);font:400 13px var(--sans);color:var(--ink)}
#gallery button{font: inherit; cursor: pointer;}
#gallery button:focus-visible{outline: 2px solid var(--ink); outline-offset: 3px;}
#gallery img{display: block; width: 100%; height: 100%; object-fit: cover;}
#gallery button{touch-action: manipulation;}
#gallery .design{background: var(--paper); max-width: 1160px; margin: 0px auto 75px; overflow: hidden; box-shadow: rgba(40, 34, 26, 0.035) 0px 10px 35px; position: relative;}
#gallery .design article{margin: 0px;}
#gallery .inner{padding: 58px 64px;}
#gallery .kicker{font: 600 10px var(--sans); letter-spacing: 0.22em; color: var(--muted); text-transform: uppercase;}
#gallery .h2{font: 400 clamp(30px,3.7vw,54px)/1.22 var(--serif); letter-spacing: -0.028em; margin: 16px 0px 0px;}
#gallery .lit{font: 400 12px/1.75 var(--sans); color: var(--muted);}
#gallery .rule{border-top: 1px solid var(--line);}
#gallery .tabrow{display: flex; gap: 24px; align-items: center; justify-content: flex-end; flex-wrap: wrap;}
#gallery .tabrow button{border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: none; background: none; padding: 10px 0px; color: rgb(130, 124, 115); font-size: 11px;}
#gallery .tabrow button.is-active{border-color: var(--ink); color: var(--ink);}
#gallery .go{border: 0px; background: transparent; color: var(--ink); font-size: 11px; letter-spacing: 0.02em; padding: 0px;}
#gallery .go span{font-size: 18px; vertical-align: -1px; margin-left: 12px;}
#gallery .v1 .heading{display: flex; align-items: end; justify-content: space-between; gap: 22px; padding: 56px 64px 30px;}
#gallery .v1 .lead{height: 390px; position: relative; background: var(--mist);}
#gallery .v1 .lead img{object-position: center 48%;}
#gallery .v1 .lead .fnumber{position: absolute; bottom: 22px; right: 28px; background: var(--paper); font: 400 12px var(--serif); padding: 13px 17px;}
#gallery .v1 .info{display: flex; justify-content: space-between; gap: 16px; padding: 16px 64px 22px;}
#gallery .v1 .thumbs{display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0px 64px 55px;}
#gallery .v1 .thumbs button{border: 0px; text-align: left; background: none; padding: 0px; color: var(--ink);}
#gallery .v1 .thumbs button .picture{height: 124px; overflow: hidden; opacity: 0.69; transition: opacity 0.2s;}
#gallery .v1 .thumbs button.is-active .picture,#gallery .v1 .thumbs button:hover .picture{opacity: 1;}
#gallery .v1 .thumbs button.is-active .picture{outline: 2px solid var(--ink); outline-offset: -2px;}
#gallery .v1 .thumbs small{font-size: 10px; display: block; margin-top: 10px; letter-spacing: 0.04em;}
#gallery .v2{padding: 54px 62px 62px;}
#gallery .v2 .topline{display: flex; justify-content: space-between; align-items: end; border-bottom: 1px solid var(--line); padding-bottom: 30px;}
#gallery .v2 .maggrid{display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 25px; align-items: start; margin-top: 35px;}
#gallery .v2 .magbig{height: 508px;}
#gallery .v2 .rightstack{padding-top: 55px;}
#gallery .v2 .rightstack .rimg{height: 247px;}
#gallery .v2 .rightstack .lower{display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px;}
#gallery .v2 .rightstack .lower .rimg{height: 130px;}
#gallery .v2 .caption{display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; font-size: 10px;}
#gallery .v2 .caption b{font-weight: 500;}
#gallery .v2 .caption em{font-style: normal; color: rgb(125, 117, 108);}
#gallery .v2 .v2footer{display: flex; justify-content: space-between; align-items: center; padding-top: 35px; margin-top: 30px; border-top: 1px solid var(--line);}
#gallery .v3{background: rgb(37, 37, 37); color: rgb(247, 245, 241);}
#gallery .v3 .shot{height: 575px; position: relative;}
#gallery .v3 .shot::after{content: ""; position: absolute; inset: 0px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), transparent 53%); pointer-events: none;}
#gallery .v3 .shot img{transition: opacity 0.2s;}
#gallery .v3 .overlay{position: absolute; z-index: 1; left: 58px; right: 58px; top: 43px; display: flex; justify-content: space-between; gap: 20px;}
#gallery .v3 .overlay .kicker{color: rgb(247, 245, 241);}
#gallery .v3 .shadowinfo{position: absolute; z-index: 1; bottom: 36px; left: 58px; right: 58px; display: flex; justify-content: space-between; align-items: end; gap: 20px;}
#gallery .v3 .shadowinfo h2{font: 400 42px/1.14 var(--serif); margin: 12px 0px;}
#gallery .v3 .shadowinfo small{color: rgb(223, 223, 217); font-size: 11px;}
#gallery .v3 .arrows{display: flex; gap: 8px;}
#gallery .v3 .arrows button{width: 47px; height: 47px; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.12); color: white; font-size: 20px;}
#gallery .v3 .film{display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: rgb(53, 53, 53);}
#gallery .v3 .film button{height: 115px; padding: 0px; border: 0px; background: rgb(51, 51, 51); opacity: 0.52;}
#gallery .v3 .film button.is-active,#gallery .v3 .film button:hover{opacity: 1;}
#gallery .v3 .film button.is-active{border-bottom: 3px solid rgb(247, 245, 241);}
#gallery .v4{padding: 58px 54px 62px;}
#gallery .v4 .header{display: flex; align-items: end; justify-content: space-between; gap: 20px;}
#gallery .v4 .boxes{display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 12px; margin-top: 38px;}
#gallery .v4 .boxitem{padding: 0px; border: 0px; text-align: left; background: none; color: var(--ink);}
#gallery .v4 .boxitem .portrait{height: 365px; overflow: hidden;}
#gallery .v4 .boxitem:nth-child(2) .portrait{height: 325px; margin-top: 40px;}
#gallery .v4 .boxitem:nth-child(4) .portrait{height: 325px; margin-top: 40px;}
#gallery .v4 .boxhead{display: flex; align-items: start; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; gap: 4px;}
#gallery .v4 .boxhead b{font: 400 17px var(--serif);}
#gallery .v4 .boxhead small{font-size: 10px; color: var(--muted); white-space: nowrap;}
#gallery .v4 .foot{margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center;}
#gallery .v5{padding: 54px 64px 56px;}
#gallery .v5 .head{display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 30px;}
#gallery .v5 .head p{max-width: 320px; margin: 0px 0px 6px auto;}
#gallery .v5 .essay{display: grid; grid-template-columns: 70px 1fr 235px; gap: 14px; align-items: end; margin: 40px 0px 0px;}
#gallery .v5 .vertical{writing-mode: vertical-rl; transform: rotate(180deg); align-self: stretch; display: flex; justify-content: space-between; letter-spacing: 0.16em; font-size: 10px; color: var(--muted); border-left: 1px solid var(--line); padding-left: 19px;}
#gallery .v5 .major{height: 465px; overflow: hidden;}
#gallery .v5 .minors{display: flex; flex-direction: column; gap: 14px;}
#gallery .v5 .minor{height: 220px; overflow: hidden;}
#gallery .v5 .capline{display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); margin-top: 27px; padding-top: 20px;}
#gallery .v5 .selection{display: flex; gap: 17px; flex-wrap: wrap;}
#gallery .v5 .selection button{padding: 0px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: none; background: none; color: var(--muted); font-size: 11px;}
#gallery .v5 .selection button.is-active{border-color: var(--ink); color: var(--ink);}
#gallery .v5 img{transition: opacity 0.18s;}
@container gallery (max-width: 900px){#gallery .design{margin-bottom: 50px;}
#gallery .v1 .heading{padding: 40px 30px 23px;}
#gallery .v1 .info{padding: 16px 30px 18px;}
#gallery .v1 .thumbs{padding: 0px 30px 36px;}
#gallery .v2{padding: 35px 30px;}
#gallery .v4{padding: 38px 30px;}
#gallery .v5{padding: 36px 30px;}
#gallery .v3 .overlay{left: 30px; right: 30px;}
#gallery .v3 .shadowinfo{left: 30px; right: 30px;}
#gallery .v5 .essay{grid-template-columns: 30px 1fr 160px;}
#gallery .v5 .major{height: 400px;}
#gallery .v5 .minor{height: 190px;}
#gallery .v4 .boxitem .portrait{height: 295px;}
#gallery .v4 .boxitem:nth-child(2) .portrait,#gallery .v4 .boxitem:nth-child(4) .portrait{height: 265px; margin-top: 30px;}
}
@container gallery (max-width: 640px){#gallery .v1 .heading{display: block;}
#gallery .v1 .heading .tabrow{justify-content: start; margin-top: 18px;}
#gallery .v1 .lead{height: 270px;}
#gallery .v1 .thumbs{grid-template-columns: repeat(2, 1fr);}
#gallery .v1 .thumbs button .picture{height: 103px;}
#gallery .v2 .topline{display: block;}
#gallery .v2 .maggrid{grid-template-columns: 1fr; gap: 16px;}
#gallery .v2 .magbig{height: 305px;}
#gallery .v2 .rightstack{padding-top: 0px;}
#gallery .v2 .rightstack .rimg{height: 195px;}
#gallery .v2 .rightstack .lower .rimg{height: 115px;}
#gallery .v3 .shot{height: 440px;}
#gallery .v3 .shadowinfo h2{font-size: 32px;}
#gallery .v3 .film button{height: 80px;}
#gallery .v4 .header{display: block;}
#gallery .v4 .boxes{grid-template-columns: repeat(2, minmax(0px, 1fr));}
#gallery .v4 .boxitem .portrait,#gallery .v4 .boxitem:nth-child(2) .portrait,#gallery .v4 .boxitem:nth-child(4) .portrait{height: 210px; margin-top: 0px;}
#gallery .v5 .head{display: block;}
#gallery .v5 .head p{margin: 16px 0px 0px;}
#gallery .v5 .essay{grid-template-columns: 1fr 1fr; gap: 10px;}
#gallery .v5 .vertical{display: none;}
#gallery .v5 .major{height: 310px; grid-column: 1 / -1;}
#gallery .v5 .minors{grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
#gallery .v5 .minor{height: 145px;}
#gallery .v5 .capline{display: block;}
#gallery .v5 .selection{margin-bottom: 18px;}
}
/* Shared Nightfall tokens; laboratory frame is removed from the reusable block. */
#gallery .design{max-width:none;margin:0;box-shadow:none}
#gallery img{display:block;width:100%;height:100%;object-fit:cover}
#gallery button{font-family:var(--sans);border-radius:0;cursor:pointer;touch-action:manipulation}
#gallery button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
#gallery .v3{background:var(--ink)}
#gallery .v3 button:focus-visible{outline-color:var(--paper)}
#gallery .tabrow button,#gallery .v2 .caption em{color:var(--muted)}
#gallery .tabrow button.is-active{color:var(--ink)}
#gallery .tabrow button,#gallery .selection button{min-height:44px;font-size:12px}
#gallery .go{min-height:44px;font-size:12px;flex-shrink:0}
#gallery .lit{font-size:13px}
#gallery .thumbs small,#gallery .caption{font-size:12px}
#gallery .cinema-open{border:1px solid #f7f5f1;background:#2d2b29b8;color:#fff;padding:10px 14px;min-height:44px}
#gallery .v3 .overlay{align-items:start;flex-wrap:wrap}
#gallery .v3 .shadowinfo small{font-size:13px;line-height:1.7}
#gallery .nf-gallery-dialog{border:1px solid var(--line);border-radius:0;background:var(--ink);color:var(--paper);padding:24px;width:min(1100px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);overflow:auto;margin:auto}
#gallery .nf-gallery-dialog::backdrop{background:#181716ed}
#gallery .nf-gallery-dialog img{height:min(65dvh,700px);object-fit:contain}
#gallery .nf-gallery-dialog button{min-width:46px;min-height:46px;border:1px solid var(--line);background:var(--ink);color:var(--paper);font-size:24px}
#gallery .nf-gallery-dialog button:focus-visible{outline-color:var(--paper)}
#gallery .nf-gallery-dialog [data-close]{display:block;margin-left:auto;margin-bottom:12px}
#gallery .nf-gallery-dialog p{text-align:center;font-size:13px;line-height:1.6}
#gallery .gallery-dialog-controls{display:flex;justify-content:center;gap:12px}
html.nf-gallery-modal-open{overflow:hidden}
@container gallery (max-width:640px){
 #gallery .h2{font-size:32px}
 #gallery .v1 .heading{padding:30px 20px 20px}
 #gallery .v1 .heading .tabrow{gap:13px}
 #gallery .v1 .info{padding:14px 20px;align-items:center}
 #gallery .v1 .info>span{max-width:48%;font-size:12px}
 #gallery .v1 .thumbs{padding:0 20px 25px}
 #gallery .v2,#gallery .v4,#gallery .v5{padding:32px 20px}
 #gallery .v2footer,#gallery .foot{flex-wrap:wrap;gap:16px}
 #gallery .v2 .rightstack .lower{gap:10px}
 #gallery .v3 .shot{height:480px}
 #gallery .v3 .overlay,#gallery .v3 .shadowinfo{left:20px;right:20px}
 #gallery .v3 .shadowinfo{flex-wrap:wrap;bottom:24px}
 #gallery .v3 .shadowinfo h2{font-size:32px}
 #gallery .v3 .overlay .kicker{max-width:65%;line-height:1.8}
 #gallery .v4 .boxhead{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){#gallery *{transition:none!important;scroll-behavior:auto!important}}
#gallery .v3 .shot:after{background:linear-gradient(180deg,rgba(20,19,18,.4),transparent 32%),linear-gradient(0deg,rgba(20,19,18,.78),transparent 60%)}
#gallery .v2 .caption{font-size:12px}