/* Swell Active (sav2) — front page. Ported verbatim from the Claude Design source. */
.bodylink{color:#0E2A3A;text-decoration:none;background-image:linear-gradient(rgba(47,168,168,0.5),rgba(47,168,168,0.5)),linear-gradient(rgba(47,168,168,0.5),rgba(47,168,168,0.5));background-repeat:no-repeat,no-repeat;background-position:0 0,0 92%;background-size:0% 100%,100% 34%;border-radius:2px;padding:1px 5px;margin:0 -5px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .45s var(--ease-out),color .3s;}
.bodylink:hover{color:#0E2A3A;background-size:100% 100%,100% 34%;}
.scp2 .ar{display:inline-block;transition:transform .35s var(--ease-out);}
.scp2:hover .ar{transform:translateX(5px);}
.scp2.rev:hover .ar{transform:translateX(-5px);}
@keyframes heroIn{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
@keyframes heroClip{from{opacity:0;clip-path:inset(0 0 100% 0);}to{opacity:1;clip-path:inset(0 0 0 0);}}
@keyframes kenburns{0%{transform:scale(1.05) translate(0,0);}100%{transform:scale(1.14) translate(-1.5%,-2%);}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes scrollDot{0%{transform:translateY(0);opacity:0;}30%{opacity:1;}80%{opacity:1;}100%{transform:translateY(20px);opacity:0;}}
@keyframes pulseDot{0%,100%{opacity:0.35;transform:scale(0.85);}50%{opacity:1;transform:scale(1);}}
@keyframes introLift{0%{transform:translateY(0);}100%{transform:translateY(-101%);}}
@keyframes introMarkIn{0%{opacity:0;transform:translateY(14px);}100%{opacity:1;transform:none;}}
@keyframes introLineGrow{0%{transform:scaleX(0);}100%{transform:scaleX(1);}}
@keyframes introMarkOut{0%{opacity:1;transform:none;}100%{opacity:0;transform:translateY(-14px);}}
.intro{position:fixed;inset:0;z-index:400;background:#0E2A3A;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;animation:introLift 1.7s var(--ease-out) 2.3s forwards;will-change:transform;}
.intro-mark{display:flex;align-items:baseline;gap:11px;color:#FAF6EE;opacity:0;animation:introMarkIn 1.35s var(--ease-out) .3s both,introMarkOut .9s var(--ease-out) 2.25s forwards;}
.intro-line{width:180px;max-width:180px;height:1px;background:rgba(191,227,227,0.6);overflow:hidden;}
.intro-line > span{display:block;height:100%;width:180px;background:#BFE3E3;transform-origin:0 50%;transform:scaleX(0);animation:introLineGrow 2s var(--ease-out) .5s forwards;}
.hero-in{opacity:0;animation:heroIn 1.6s var(--ease-out) both;}
.hero-clip{animation:heroClip 1.95s var(--ease-out) both;}
.kb{animation:kenburns 22s ease-in-out infinite alternate;}
.reveal{will-change:transform,opacity;}
.reveal-clip{will-change:clip-path;}
.par-img{will-change:transform;}
.drift,.drift-rev{will-change:transform;}
.hero-media{position:absolute;left:0;top:-14%;width:100%;height:128%;overflow:hidden;will-change:transform;}
.hero-rise{will-change:transform,opacity;}
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#2FA8A8,#1B7878);transform-origin:0 50%;transform:scaleX(0);z-index:200;}
.word-mask{overflow:hidden;display:block;padding-bottom:0.06em;}
.word-mask > span{display:block;will-change:transform,opacity;}
.line-mask{overflow:hidden;display:block;padding-bottom:0.09em;}
.line-mask > span{display:block;will-change:transform,opacity;}
.band-track{display:inline-flex;white-space:nowrap;will-change:transform;}
.mgal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,14vw,206px);grid-auto-flow:dense;gap:clamp(12px,1.3vw,20px);}
.mgal figure{margin:0;position:relative;overflow:hidden;border-radius:16px;box-shadow:0 22px 54px rgba(0,0,0,0.32);will-change:transform,opacity,filter;}
.mgal .m-a{grid-column:span 2;grid-row:span 2;}
.mgal .m-w{grid-column:span 2;}
.spin-seal{animation:spin 28s linear infinite;}
.cursor{position:fixed;top:0;left:0;width:30px;height:30px;margin:-15px 0 0 -15px;border:1.5px solid rgba(250,246,238,0.8);border-radius:50%;pointer-events:none;z-index:300;will-change:transform;transition:width .28s var(--ease-out),height .28s var(--ease-out),background .28s,border-color .3s,opacity .3s;opacity:0;display:none;}
.cursor.on{opacity:1;}
.cursor.big{width:66px;height:66px;margin:-33px 0 0 -33px;background:rgba(47,168,168,0.16);border-color:rgba(47,168,168,0.001);}
.rail{position:fixed;right:clamp(20px,2vw,36px);top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:clamp(15px,1.7vw,24px);align-items:flex-end;color:#FAF6EE;}
.rail a{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;}
.rail .rn{font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:0.08em;font-variant-numeric:tabular-nums;opacity:0.4;transition:opacity .4s var(--ease-out),color .4s;}
.rail .rl{font-family:'Outfit',sans-serif;font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;opacity:0.5;transition:opacity .4s var(--ease-out),color .4s,letter-spacing .4s;white-space:nowrap;}
.rail .rd{width:20px;height:2px;border-radius:2px;background:currentColor;opacity:0.4;transform-origin:right center;transition:width .5s var(--ease-out),opacity .4s,background .4s,box-shadow .4s;}
.rail a:hover .rl{opacity:0.9;}
.rail a:hover .rn{opacity:0.7;}
.rail a:hover .rd{opacity:0.85;width:34px;}
.rail a.on .rl{opacity:1;color:#2FA8A8;letter-spacing:0.22em;}
.rail a.on .rn{opacity:1;color:#2FA8A8;}
.rail a.on .rd{opacity:1;width:54px;background:#2FA8A8;box-shadow:0 0 14px rgba(47,168,168,0.6);}
@media (max-width:1080px){ .rail,.edgelabel{display:none;} }
@media (max-width:1180px){ .navmeta{display:none !important;} }
@media (max-width:1660px){ .mseal{display:none !important;} }
@media (max-width:1560px){ .medge{display:none !important;} }
@media (pointer:coarse){ .cursor{display:none;} }
@media (prefers-reduced-motion: reduce){
  .kb,.spin-seal{animation:none !important;}
  .intro{display:none !important;}
}
@media (max-width:860px){
  .hero-media{top:0;height:100%;}
}
@media (max-width:820px){
  .mgal{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(140px,34vw,220px);}
  .mgal .m-a{grid-row:span 2;}
}
@media (max-width:760px){
  .navgroup{display:none !important;}
  .m-2col{grid-template-columns:1fr !important;gap:6px !important;}
  .m-tri{grid-template-columns:1fr !important;}
  .m-exp,.m-stay,.m-faq{grid-template-columns:1fr !important;gap:30px !important;}
  .m-foot{grid-template-columns:1fr 1fr !important;gap:30px 24px !important;}
  .m-unstick{position:static !important;top:auto !important;}
  .m-stayimg{margin-left:0 !important;}
  .heroseal{display:none !important;}
  .m-tri img{height:240px !important;}
}
/* Mobile nav toggle (progressive enhancement; hidden on desktop) */
.navtoggle{display:none;}
@media (max-width:760px){
  .navtoggle{display:inline-flex;flex-direction:column;gap:5px;background:transparent;border:0;cursor:pointer;padding:6px;}
  .navtoggle span{display:block;width:24px;height:2px;background:currentColor;transition:transform .3s,opacity .3s;}
  .mobilemenu{display:none;flex-direction:column;gap:8px;padding:16px clamp(22px,4vw,64px) 24px;}
  .mobilemenu.open{display:flex;}
}

/* Activity chapters — number + head-term title.
   The title escapes the paragraph's narrow measure and stays on ONE line on
   desktop (so "Surf retreat" / "Wingfoil holiday" no longer wrap and collide
   with the big outline number). Below 760px it wraps cleanly with air. */
.act-title{white-space:nowrap;line-height:0.9;}
.act-num{line-height:0.9;}
@media (max-width:760px){
  .act-head{flex-wrap:wrap;gap:10px 16px;}
  .act-title{white-space:normal;line-height:1.0;}
}

/* From the Journal — latest posts on the homepage */
.m-jrnl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,52px) clamp(24px,2.4vw,40px);}
.jr-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;}
.jr-card .jr-img{overflow:hidden;border-radius:14px;box-shadow:0 16px 40px rgba(14,42,58,0.12);aspect-ratio:4/3;}
.jr-card .jr-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out);}
.jr-card:hover .jr-img img{transform:scale(1.055);}
.jr-card h3{transition:color .3s;}
.jr-card:hover h3{color:#1B7878;}
@media (max-width:960px){ .m-jrnl-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .m-jrnl-grid{grid-template-columns:1fr;} }