/* Cádiz: a photographic arch becomes a drawn walking route. */
#panel-ciudad.city-chapter{--city-walk:0;background:#f39b76;color:#173e44;isolation:isolate;overflow:hidden;height:100svh;min-height:700px}
.city-paper{position:absolute;inset:0;background:radial-gradient(ellipse at 22% 75%,#ffe6b9,transparent 65%),linear-gradient(120deg,#f7bf91,#ec8668);z-index:-1;pointer-events:none}
.city-paper:after{content:"";position:absolute;inset:5% 4%;border:1px solid #173e4422;border-radius:4px}
.city-heading{position:absolute;left:7%;top:12%;z-index:3;translate:0 calc(var(--enter,0)*20px - var(--exit,0)*15px)}
.city-heading>.mini{font-size:9px;letter-spacing:.15em}
.city-heading h2{font:500 clamp(45px,5.3vw,83px)/.93 'Cormorant Garamond',Georgia,serif;letter-spacing:-.035em;margin:19px 0}
.city-heading h2 em{font-weight:400;color:#9d3e37}
.city-atlas{position:absolute;left:4%;top:28%;width:53%;height:57%;perspective:1100px;translate:calc(var(--enter,0)*-25px) 0}
.city-window{position:absolute;inset:0 8% 8%;overflow:hidden;border-radius:calc(42% - var(--city-walk)*13%) calc(42% - var(--city-walk)*13%) 4px 4px;box-shadow:0 15px 40px #82473333}
.city-window img{width:100%;height:100%;object-fit:cover;object-position:55% 50%;transform:scale(calc(1.06 - var(--city-walk)*.06));display:block}
.city-chart{position:absolute;inset:0;background:linear-gradient(0deg,#fff2d7 0%,#fff2d7eb 36%,#fff2d799 61%,transparent 85%);border-radius:4px;transform-origin:center bottom;transform:rotateX(calc((1 - min(1,var(--city-walk)*3.5))*25deg));box-shadow:0 18px 30px #75433116}
.city-chart svg{width:100%;height:100%;overflow:visible}
.city-blocks{fill:#e6d9b9;stroke:#163d4222;stroke-width:1}
.city-waterline{fill:none;stroke:#239a9e55;stroke-width:18;stroke-linecap:round}
.city-route-base{fill:none;stroke:#17414740;stroke-width:2;stroke-dasharray:3 7}
.city-route-ink{fill:none;stroke:#a44838;stroke-width:3;stroke-linecap:round}
.city-map-stop circle{fill:#fff2d7;stroke:#173e44;stroke-width:1.5}
.city-map-stop text{fill:#173e44;font:600 10px 'DM Sans',sans-serif}
.city-map-stop .city-map-label{font-size:13px;font-weight:500;paint-order:stroke;stroke:#fff2d7;stroke-width:5px;stroke-linejoin:round}
.city-map-stop.is-reached circle{fill:#173e44}
.city-map-stop.is-reached text:not(.city-map-label){fill:#fff2d7}
.city-map-stop.is-current circle{stroke:#a44838;stroke-width:4}
#city-route-dot{fill:#a44838;stroke:#ffecc7;stroke-width:3}
.city-atlas-caption{position:absolute;bottom:-24px;left:0;right:0;text-align:center;font:400 7px 'DM Sans',sans-serif;letter-spacing:.13em}
.city-notebook{position:absolute;top:34%;right:7%;width:34%;max-width:510px;z-index:5;translate:0 calc(var(--enter,0)*25px - var(--exit,0)*20px)}
.city-tabs{display:flex;justify-content:space-between;gap:5px;padding-bottom:19px;border-bottom:1px solid #173e4455}
.city-tabs button{display:flex;flex-direction:column;gap:9px;align-items:center;padding:0;cursor:pointer;color:#173e44;background:transparent;border:0;font:400 10px 'DM Sans',sans-serif}
.city-tabs button span{display:grid;place-items:center;border:1px solid #173e4455;border-radius:50%;width:34px;height:34px;font-size:11px;transition:background .15s,color .15s}
.city-tabs button b{font-weight:500}
.city-tabs button[aria-selected=true] span{background:#173e44;color:#fff2d7;border-color:#173e44}
.city-cards{padding-top:24px}
.city-cards article[hidden]{display:none}
.city-cards .mini{font-size:8px;letter-spacing:.13em;color:#8f3e2c}
.city-cards h3{font:500 clamp(29px,3vw,45px)/1.04 'Cormorant Garamond',Georgia,serif;letter-spacing:-.02em;margin:14px 0}
.city-cards p{font:400 13px/1.75 'DM Sans',sans-serif;margin:0 0 18px;max-width:45ch}
.city-cards a{font-size:11px;text-underline-offset:5px}
.city-full-route{display:block;margin-top:25px;font-size:11px;font-weight:600;text-decoration:none;border-top:1px solid #173e4455;padding-top:16px}
.city-project{display:block;margin-top:16px;font-size:9px;line-height:1.65;max-width:38ch;text-underline-offset:4px;opacity:.8}
.city-notebook a{color:inherit}
.city-chapter :focus-visible{outline:3px solid #9d3e37;outline-offset:5px}
.city-scroll-progress{position:absolute;left:7%;right:7%;bottom:5%;display:flex;align-items:center;gap:25px;font-size:7px;letter-spacing:.12em}
.city-scroll-progress i{height:1px;flex:1;background:#173e4444}
.city-scroll-progress b{display:block;height:1px;background:#173e44;transform-origin:left;transform:scaleX(var(--city-walk))}
body.city-active .continuity-orb{opacity:0!important}
body.continuous-journey #panel-ciudad.city-chapter{height:100%;min-height:0}
.onepage-guide .city-walk>section{padding:28px 0;border-top:1px solid #25464133}
.onepage-guide .city-walk>section .mini{font-size:10px;letter-spacing:.14em;color:#a44838}
.onepage-guide .city-walk>section h3{font-size:35px}
.city-walk-advice{background:#f6d89f;padding:25px 35px;margin:25px 0}
@media(max-width:700px){
 .city-heading{top:11%;left:7%;right:7%}.city-heading>.mini{font-size:7px}.city-heading h2{font-size:clamp(38px,10vw,55px);margin:13px 0}.city-heading h2 br{display:none}.city-heading h2 em{display:block}
 .city-atlas{left:6%;top:27%;width:88%;height:29%}.city-atlas-caption{bottom:-12px;font-size:6px}.city-window{inset:0 9% 0}.city-chart svg{overflow:hidden}.city-map-stop .city-map-label{font-size:14px}
 .city-notebook{left:7%;right:7%;top:61%;width:auto;max-width:none}.city-tabs{padding-bottom:12px;gap:4px}.city-tabs button{font-size:8px;gap:5px}.city-tabs button span{width:26px;height:26px;font-size:9px}.city-cards{padding-top:12px}.city-cards .mini{font-size:7px}.city-cards h3{font-size:27px;margin:8px 0}.city-cards p{font-size:11px;line-height:1.55;margin-bottom:10px;max-width:none}.city-cards a{font-size:10px}.city-full-route{font-size:10px;margin-top:13px;padding-top:10px}.city-project{display:none}.city-scroll-progress{bottom:3%;font-size:5px;gap:10px}.city-scroll-progress>span:last-child{display:none}.city-walk-advice{padding:25px}
}
body:not(.continuous-journey) #panel-ciudad.city-chapter{height:auto;min-height:0;padding:80px 7% 65px;--enter:0;--exit:0}
body:not(.continuous-journey) .city-heading{position:relative;inset:auto;translate:none}
body:not(.continuous-journey) .city-atlas{position:relative;inset:auto;width:min(800px,100%);height:min(560px,70vw);margin:40px auto 60px;translate:none}
body:not(.continuous-journey) .city-notebook{position:relative;inset:auto;width:100%;max-width:800px;margin:auto;translate:none}
body:not(.continuous-journey) .city-cards p{font-size:15px;max-width:65ch}
body:not(.continuous-journey) .city-project{display:block}
body:not(.continuous-journey) .city-scroll-progress{display:none}
@media(prefers-reduced-motion:reduce){.city-tabs button span{transition:none}.city-chart{transform:none}}