/* Shared responsive refinements for the journey and its information pages */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.info-main,.artist>*,.destinations>*{min-width:0}
.contact-email{max-width:100%;overflow-wrap:anywhere}
#mail-form input:focus-visible,#mail-form select:focus-visible,#mail-form textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:767px){
 .nav{padding:calc(12px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 12px max(18px,env(safe-area-inset-left));gap:10px;flex-wrap:nowrap}
 .nav .brand{font-size:28px;flex-shrink:0}
 .nav nav{font-size:12px;letter-spacing:.02em;min-width:0}
 .nav nav a{min-height:44px;display:flex;align-items:center}
 .nav #motion{top:calc(70px + env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));min-width:64px;min-height:44px;font-size:12px}
 .hero{min-height:480px}
 .hero h1{font-size:clamp(23px,6.5vw,30px);letter-spacing:.2em}
 .hero-copy>p:not(.eyebrow){font-size:14px}
 .scroll{font-size:10px;min-height:44px}
 .info-main{padding:calc(126px + env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 64px max(22px,env(safe-area-inset-left))}
 .info-main>h1{font-size:clamp(24px,6.4vw,30px);letter-spacing:.08em;line-height:1.7;overflow-wrap:anywhere}
 .info-lead,.order-notes p,.artist p:not(.eyebrow){font-size:15px;line-height:2.2;overflow-wrap:anywhere}
 .info-main .artist{gap:28px}
 .artist h2{font-size:clamp(19px,5vw,23px);line-height:1.9}
 .order-art{width:min(310px,88%);margin-top:30px}
 .contact-email{font-size:clamp(16px,4.5vw,21px);letter-spacing:0;line-height:1.8;margin:20px 0 30px}
 #mail-form label{font-size:14px}
 #mail-form input,#mail-form select,#mail-form textarea{font-size:16px;min-height:48px;max-width:100%}
 #mail-form button,.text-link{min-height:44px;padding:12px 0;font-size:14px;line-height:1.8}
 .mail-note,#mail-status{font-size:13px;line-height:1.9}
 .arrival{padding-left:24px;padding-right:24px}
 .arrival>h2{font-size:clamp(21px,5.7vw,26px);letter-spacing:.1em}
 .arrival-lead,.destinations p{font-size:14px}
 .destinations span{font-size:13px}
 .travel-caption{max-width:92vw;white-space:normal;width:max-content;padding:12px 18px}
 .travel-caption span{font-size:clamp(16px,4.4vw,20px);letter-spacing:.1em}
 .travel-caption small{font-size:12px}
 .journey-controls{gap:16px;bottom:max(16px,env(safe-area-inset-bottom))}
 .progress{bottom:12%}
 dialog{max-width:calc(100vw - 24px);max-height:calc(100svh - 24px);overscroll-behavior:contain}
 .close{min-width:60px;min-height:44px;right:12px}
 .all-works-grid{gap:14px}
 .all-works-grid button{padding:0;min-width:0}
 .all-works-grid span{font-size:13px;line-height:1.8;overflow-wrap:anywhere}
 body>footer{gap:18px;flex-wrap:wrap;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
 body>footer>a:last-child{min-height:44px;display:flex;align-items:center;font-size:12px}
}
@media(max-height:500px) and (orientation:landscape){
 .nav{padding-top:10px;padding-bottom:10px}.nav .brand{font-size:24px}
 .nav #motion{top:65px}
 .hero{min-height:100svh}.hero-copy{bottom:5%}.hero-copy>p:not(.eyebrow){line-height:1.6;margin:8px 0}.hero h1{font-size:24px;margin:10px 0}.scroll{margin-top:8px}.scroll span{height:16px}
 .gallery-heading{top:24%}.gallery-heading h2{font-size:17px}
 .enhanced .art{width:48vh}.travel-caption{bottom:17%;gap:5px;padding:8px}.travel-caption span{font-size:16px}.journey-controls{bottom:2%}.progress{bottom:8%}
}

.info-lead .phrase{display:inline-block}

.info-page .nav{background:linear-gradient(#050811 70%,#050811e8 90%,transparent)}