/* A quiet, full-width film-still reel. */
.town-reel{padding:0;background:#11110f;position:relative;border-top:1px solid #c89d5e33}
.town-reel-heading{padding:42px 7% 34px;background:#20201a}
.town-reel-heading h2{margin:10px 0 0;font-size:clamp(30px,3.6vw,50px)}
.town-reel-stage{display:grid;overflow:hidden;position:relative;touch-action:pan-y}
.town-reel-slide{grid-area:1/1;margin:0;min-width:0;position:relative;opacity:0;visibility:hidden;transition:opacity 1.3s ease,visibility 1.3s;pointer-events:none}
.town-reel-slide.is-active{opacity:1;visibility:visible;z-index:1}
.town-reel-image{position:relative;overflow:hidden;aspect-ratio:16/9;background:#11110f}
.town-reel-image img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 40%;animation:town-drift 6.5s linear both;animation-play-state:paused}
.town-reel-slide:nth-child(6n + 2) img{animation-name:town-pan-up}
.town-reel-slide:nth-child(6n + 3) img{animation-name:town-pan-left}
.town-reel-slide:nth-child(6n + 4) img{animation-name:town-pan-down}
.town-reel-slide:nth-child(6n + 5) img{animation-name:town-pan-up-right}
.town-reel-slide:nth-child(6n + 6) img{animation-name:town-pan-down-left}
.town-reel-slide.is-artwork img{padding:3%;animation-name:town-artwork-drift}
.town-reel-slide:not(.is-active):not(.is-leaving) img{animation:none}
.town-reel.is-playing .town-reel-slide.is-active img,.town-reel.is-playing .town-reel-slide.is-leaving img{animation-play-state:running}
.town-reel-image::after{display:none}
.town-reel-slide figcaption{position:static;padding:24px 7% 18px;min-height:88px}
.town-reel-slide h3{margin:0;color:var(--paper);font-size:clamp(26px,3.2vw,42px);line-height:1.2}
.town-reel-slide p{margin:12px 0 0;color:#e3d7c2;font:400 clamp(16px,1.4vw,20px)/1.5 Georgia,serif;max-width:none}
.town-reel-controls{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:28px;border-top:1px solid #e8ddc833;padding:20px 7% 24px;background:#11110f;min-width:0}
.town-reel-controls[hidden]{display:none}
.town-reel-positions,.town-reel-transport{display:flex;align-items:center;gap:10px}.town-reel-positions{position:relative;flex:1;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;padding:4px;scrollbar-width:thin;scrollbar-color:#c89d5e66 #11110f}.town-reel-transport{flex-shrink:0}.town-reel-count{font:11px/1.5 Arial,sans-serif;white-space:nowrap;color:var(--gold);letter-spacing:1px;margin-right:6px}
.town-reel-controls button{border:0;background:transparent;color:var(--paper);min-width:44px;min-height:44px;padding:8px;transition:color .2s,background .2s}
.town-reel-controls button:hover{color:var(--gold);background:#e8ddc80d}
.town-reel-controls button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.town-reel-controls .town-reel-position{position:relative;flex:0 0 96px;height:60px;min-width:96px;padding:2px;border:1px solid #e8ddc833;font:10px/1.5 Arial,sans-serif;letter-spacing:1px;opacity:.65}.town-reel-position img{display:block;width:100%;height:100%;object-fit:contain}.town-reel-position span{position:absolute;bottom:3px;right:3px;background:#080807d9;padding:1px 5px;color:var(--paper)}

.town-reel-controls .town-reel-position[aria-current="true"]{opacity:1;border-color:var(--gold)}

.town-reel-toggle{display:flex;align-items:center;gap:9px;text-transform:uppercase;font:10px/1.4 Arial,sans-serif;letter-spacing:1.5px;margin-right:14px}
.town-reel-toggle-icon{font:16px/1 Arial,sans-serif;min-width:16px;letter-spacing:0}
.town-reel-controls .town-reel-arrow{border:1px solid #e8ddc84d;border-radius:50%;font-size:20px;line-height:1}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.town-reel-fallback{padding:0 7% 24px}
@keyframes town-drift{from{transform:scale(1.12) translate(-2%,-.4%)}to{transform:scale(1.16) translate(2%,.4%)}}
@keyframes town-pan-up{from{transform:scale(1.12) translate(.3%,2%)}to{transform:scale(1.16) translate(-.3%,-2%)}}
@keyframes town-pan-left{from{transform:scale(1.16) translate(2%,.4%)}to{transform:scale(1.12) translate(-2%,-.4%)}}
@keyframes town-pan-down{from{transform:scale(1.16) translate(-.3%,-2%)}to{transform:scale(1.12) translate(.3%,2%)}}
@keyframes town-pan-up-right{from{transform:scale(1.12) translate(-1.7%,1.4%)}to{transform:scale(1.17) translate(1.7%,-1.4%)}}
@keyframes town-pan-down-left{from{transform:scale(1.17) translate(1.7%,-1.4%)}to{transform:scale(1.12) translate(-1.7%,1.4%)}}
@keyframes town-artwork-drift{from{transform:scale(1) translate(-.5%,.5%)}to{transform:scale(1.04) translate(.5%,-.5%)}}
@media(max-width:700px){
 .town-reel-heading{padding:30px 6% 26px}
 .town-reel-heading h2{font-size:clamp(28px,5.7vw,38px)}
 .town-reel-slide figcaption{position:static;padding:22px 6%;min-height:100px;text-shadow:none}
 .town-reel-slide h3{font-size:clamp(26px,5.4vw,36px)}
 .town-reel-slide p{font-size:16px;margin-top:9px}
 .town-reel-image::after{background:linear-gradient(0deg,#11110f40,transparent 20%)}
 .town-reel-controls{padding:14px 6% 22px;flex-wrap:wrap;gap:16px;justify-content:center}.town-reel-positions{flex-basis:100%;width:100%}
 .town-reel-positions,.town-reel-transport{gap:4px}
 .town-reel-toggle{margin-right:5px}
}
@media(max-width:440px){.town-reel-transport{gap:10px}.town-reel-toggle{margin-right:8px}.town-reel-controls .town-reel-position{flex-basis:82px;min-width:82px;height:54px}}
@media(prefers-reduced-motion:reduce){.town-reel-slide,.town-reel-controls button{transition:none}.town-reel-image img{animation:none!important;transform:none!important}}