/* activity panel / page */
.scrim{position:fixed;inset:0;background:rgba(31,26,20,.4);z-index:35;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.on{opacity:1;pointer-events:auto}
.panel{position:fixed;inset:0 0 0 auto;width:min(560px,100%);background:var(--paper);z-index:40;transform:translateX(100%);transition:transform .25s;overflow:auto}
.panel.open{transform:none}
.panel .close{position:absolute;top:14px;right:14px;background:rgba(31,26,20,.6);color:var(--paper);width:36px;height:36px;border-radius:50%;z-index:2}
.actpage .media.hero2{aspect-ratio:16/10}
.actpage .in{padding:22px 26px 40px}
.actpage .where{color:var(--ink-3);font-size:14px;margin-bottom:6px}
.actpage h2{font-size:2.1rem;margin-bottom:12px}
.facts{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--ink-2);margin-bottom:18px}
.facts b{font-weight:500;color:var(--ink)}
.actpage h3{font-size:1.25rem;margin:22px 0 8px}
.actpage p,.actpage li{color:var(--ink-2);font-size:15.5px}
.actpage p+p{margin-top:10px}
.actpage ul{margin-left:18px}
.note{background:var(--paper-2);border-radius:var(--r);padding:14px 16px;font-size:14.5px;color:var(--ink-2)}
.actpage .cta{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
/* the picture strip (activity pages and the destination page): scrolls sideways, one picture at a time on a phone, a bit more on a desktop */
/* --pw is the width of a landscape picture in the strip; a tall one (.portrait, with its own --r ratio) gets the same height */
.gallery{--pw:min(86%,520px);display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.gallery img{flex:0 0 auto;width:var(--pw);min-width:0;height:auto;aspect-ratio:16/10;object-fit:cover;scroll-snap-align:start;border-radius:var(--r);display:block}
main.full .actpage .gallery{margin-top:20px}
main.full .actpage .gallery{--pw:min(78%,640px)}
.gallery img.portrait{aspect-ratio:var(--r,0.75);width:calc(var(--pw) * var(--r,0.75) / 1.6)}
/* the destination page opens on the strip, where a hero banner would be; the title sits under it */
.dest-gallery{--pw:min(80%,900px);padding:16px clamp(18px,4vw,48px) 0;scroll-padding-left:clamp(18px,4vw,48px)}.dest-gallery:empty{display:none}
.dest-title{padding-top:28px}.dest-title .country{color:var(--ink-3);font-size:15px;margin-bottom:6px}.dest-title h1{max-width:16ch;margin-bottom:12px}.dest-title p{font-size:1.1rem;color:var(--ink-2);max-width:44ch}
@media (max-width:620px){.dest-gallery{--pw:88%}.dest-title h1{font-size:2.1rem}.dest-title p{font-size:1rem}}
main.full .actpage .media.hero2{aspect-ratio:21/9;border-radius:var(--r);margin-top:20px}
main.full .actpage .in{padding:22px 0 60px;max-width:760px}
@media (max-width:920px){
  main.full .actpage .media.hero2{aspect-ratio:4/3;margin-top:0;border-radius:0}
  main.full .actpage .gallery{margin-top:12px;padding:0 clamp(18px,4vw,48px);scroll-padding-left:clamp(18px,4vw,48px)}
  main.full .actpage .in{padding-bottom:120px}
  main.full .actpage .cta{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(31,26,20,.08)}
  main.full .actpage .cta .btn{flex:1;justify-content:center}
  main.full .wrap{padding:0}
  main.full .actpage .in{padding-left:clamp(18px,4vw,48px);padding-right:clamp(18px,4vw,48px)}
}