/* A paper town opens its façades onto a real photograph of Vejer. */
#panel-pueblos.villages-chapter{--village-open:0;--village-rise:0;background:#543857;color:#fff2d5;height:100svh;min-height:700px;overflow:hidden;isolation:isolate}
.village-ground{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 75%,#9d647a,transparent 70%),linear-gradient(135deg,#623c69,#423c61);z-index:-1}
.village-heading{position:absolute;left:7%;top:12%;z-index:4;translate:0 calc(var(--enter,0)*20px - var(--exit,0)*15px)}
.village-heading>.mini{font-size:8px;letter-spacing:.16em;color:#eac9d7}
.village-heading h2{font:500 clamp(49px,5.6vw,88px)/.92 'Cormorant Garamond',Georgia,serif;letter-spacing:-.035em;margin:22px 0}
.village-heading h2 em{font-weight:400;color:#f4b293}
.village-model{position:absolute;left:4%;top:29%;width:54%;height:56%;perspective:1000px;translate:calc(var(--enter,0)*-25px) 0}
.village-view{position:absolute;left:16%;top:0;width:69%;height:86%;perspective:1000px;transform-style:preserve-3d}
.village-photo-frame>img{width:100%;height:100%;object-fit:cover;border-radius:43% 43% 3px 3px;display:block;transform:scale(calc(1.035 - var(--village-open)*.035));box-shadow:0 22px 35px #231d4333}
.village-door{position:absolute;top:0;width:50%;height:100%;background:#fff0d4;box-shadow:calc((1 - var(--village-open))*-15px) 12px 25px #30213533;backface-visibility:hidden}
.village-door.left{left:0;border-radius:85% 0 0 0;transform-origin:left center;transform:rotateY(calc(var(--village-open)*-80deg))}
.village-door.right{right:0;border-radius:0 85% 0 0;transform-origin:right center;transform:rotateY(calc(var(--village-open)*80deg))}
.village-door svg{width:100%;height:100%;fill:none;stroke:#635044;stroke-width:1}
.village-door svg path:first-child{stroke:#8c745e66}.village-door .village-tile{stroke:#b76553;stroke-width:2}
.village-paper-house{position:absolute;bottom:1%;background:#fff2d5;transform-origin:bottom;transform:rotateX(calc((1 - var(--village-rise))*85deg));box-shadow:calc(var(--village-open)*20px) 12px 25px #291d4933;border-top:2px solid #fffae9}
.house-one{left:3%;width:19%;height:33%;background:#e7d6b7}.house-two{left:73%;width:21%;height:39%}.house-three{left:54%;width:17%;height:21%;background:#f6e4bf}
.village-paper-house>span{position:absolute;left:20%;right:20%;top:23%;height:28%;border:1px solid #81694f;background:repeating-linear-gradient(90deg,transparent 0 12px,#81694f66 12px 13px)}
.village-paper-house>i{position:absolute;left:35%;right:35%;bottom:0;height:30%;border:1px solid #81694f;border-radius:50px 50px 0 0;background:#c4aa87}
.village-street{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.village-street path{fill:none;stroke:#f7b59a;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--village-open))}
.village-street .street-fold{stroke:#fff2d599;stroke-width:1}
.village-model-caption{position:absolute;left:0;right:0;bottom:-24px;text-align:center;font-size:6px;letter-spacing:.13em;color:#e6c6cd}
.village-notebook{position:absolute;right:7%;top:34%;width:33%;max-width:510px;z-index:5;translate:0 calc(var(--enter,0)*25px - var(--exit,0)*20px)}
.village-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid #fff2d555;padding-bottom:18px}
.village-tabs button{font:400 11px 'DM Sans',sans-serif;background:none;border:1px solid #fff2d577;color:inherit;border-radius:25px;padding:8px 13px;cursor:pointer}
.village-tabs button[aria-selected=true]{background:#fff2d5;color:#513856;border-color:#fff2d5}
.village-notebook article{padding-top:25px}.village-notebook article[hidden]{display:none}
.village-notebook .mini{font-size:8px;letter-spacing:.15em;color:#f3b698}
.village-notebook h3{font:500 clamp(31px,3.1vw,48px)/1.03 'Cormorant Garamond',Georgia,serif;letter-spacing:-.02em;margin:14px 0 20px}
.village-notebook p{font:400 13px/1.8 'DM Sans',sans-serif;margin:0 0 20px;max-width:43ch}
.village-notebook a{color:inherit;font-size:11px;text-underline-offset:5px}
.village-full{display:block;border-top:1px solid #fff2d555;margin-top:28px;padding-top:17px;text-decoration:none}
.village-design{display:block;margin-top:18px;max-width:40ch;font-size:9px!important;line-height:1.8;color:#e9cbd1!important}
.villages-chapter :focus-visible{outline:3px solid #f4b293;outline-offset:5px}
.village-meter{position:absolute;left:7%;right:7%;bottom:5%;display:flex;gap:22px;align-items:center;font-size:7px;letter-spacing:.14em;color:#f4b293}
.village-meter i{height:1px;flex:1;background:#fff2d533}.village-meter b{display:block;height:1px;background:#fff2d5;transform-origin:left;transform:scaleX(var(--village-open))}
body.villages-active .continuity-orb{opacity:0!important}
body.continuous-journey #panel-pueblos.villages-chapter{height:100%;min-height:0}
.onepage-guide .village-guide>section{border-top:1px solid #25464133;padding:28px 0}
.onepage-guide .village-guide>section>.mini{font-size:10px;letter-spacing:.15em;color:#a44838}
.onepage-guide .village-guide>section>a{font-size:12px}
@media(max-width:700px){
 .village-heading{top:11%;left:7%;right:7%}.village-heading>.mini{font-size:6px;letter-spacing:.12em}.village-heading h2{font-size:clamp(38px,10.5vw,55px);margin:16px 0}.village-heading h2 br{display:none}.village-heading h2 em{display:block}
 .village-model{left:4%;top:28%;width:92%;height:28%}.village-model-caption{font-size:5px;bottom:-15px}.village-notebook{top:61%;left:7%;right:7%;width:auto;max-width:none}.village-tabs{padding-bottom:11px;gap:5px}.village-tabs button{font-size:9px;padding:6px 11px}.village-notebook article{padding-top:12px}.village-notebook .mini{font-size:7px}.village-notebook h3{font-size:28px;margin:8px 0 11px}.village-notebook p{font-size:11px;line-height:1.6;max-width:none;margin-bottom:12px}.village-notebook a{font-size:10px}.village-full{margin-top:14px;padding-top:11px}.village-design{display:none}.village-meter{bottom:3%;font-size:5px;gap:10px}
}
body:not(.continuous-journey) #panel-pueblos.villages-chapter{height:auto;min-height:0;padding:80px 7% 65px;--enter:0;--exit:0}
body:not(.continuous-journey) .village-heading{position:relative;inset:auto;translate:none}
body:not(.continuous-journey) .village-model{position:relative;inset:auto;width:min(850px,100%);height:min(550px,69vw);margin:35px auto 65px;translate:none}
body:not(.continuous-journey) .village-notebook{position:relative;inset:auto;width:100%;max-width:850px;margin:auto;translate:none}
body:not(.continuous-journey) .village-notebook p{font-size:15px;max-width:65ch}
body:not(.continuous-journey) .village-design{display:block}
body:not(.continuous-journey) .village-meter{display:none}