/* Travel: two sections on one page, Getting There and Travel Tips.
   Parchment paper, maroon headings, gold numerals, two-tone icons, a beach at the foot of the page. */
:root{--paper:#EFE6D5;--card:rgb(252 247 237 / .78);--card-line:rgb(183 128 42 / .32);--badge:#F0DDB2;--btn:#C99A3A;--wash:rgb(201 154 58 / .3)}
.travel .w{width:min(78rem,calc(100% - 2 * var(--pad)));margin-inline:auto}
.travel .bar{margin:0 auto;padding-right:64px}
.ic{width:1.7rem;height:1.7rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic .f{fill:var(--wash)}
strong{font-weight:600;color:var(--ink)}
.nw{white-space:nowrap}
.section{padding-top:clamp(36px,6vw,72px)}
.section + .section{margin-top:clamp(56px,9vw,110px)}
.head{position:relative}
.head h1{margin-top:.45rem}
.head .lede{max-width:46ch}
.plane,.sky{display:none;position:absolute;pointer-events:none;height:auto}
.plane{right:0;top:-.5rem;width:clamp(17rem,33vw,29rem);animation:glide 8s ease-in-out infinite}
.sky{right:calc(-1 * var(--pad));top:-1.2rem;width:clamp(22rem,52vw,48rem);opacity:.95}
@keyframes glide{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-6px,-9px) rotate(-.8deg)}}

/* ---- the five steps ---- */
.steps{margin-top:clamp(36px,5vw,60px)}
.steps ol{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.steps a{text-decoration:none;color:var(--ink);display:grid;align-items:center;gap:.9rem;
  grid-template-columns:2.6rem 3rem 1fr;padding-block:.6rem}
.steps .n{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;
  font:500 1.15rem/1 var(--f-display);position:relative;z-index:1;box-shadow:0 0 0 5px var(--paper);transition:transform .25s ease,background .25s ease}
.steps .stepic{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--badge)}
.steps .ic{width:1.6rem;height:1.6rem;stroke:var(--ink)}
.steps .lbl{font:600 .78rem/1.45 var(--f-ui);letter-spacing:.2em;text-transform:uppercase}
.steps a:hover .lbl{color:var(--maroon)}
.steps a:hover .n{background:var(--maroon);transform:scale(1.08)}
.steps ol::before{content:"";position:absolute;left:1.3rem;top:1.4rem;bottom:1.4rem;width:0;border-left:2px dashed var(--gold)}

/* ---- cards ---- */
.cards{display:grid;gap:1.1rem;margin-top:clamp(26px,3.4vw,40px)}
.card{position:relative;z-index:1;background:var(--card);border:1px solid var(--card-line);border-radius:16px;padding:1.5rem 1.5rem 1.7rem;
  scroll-margin-top:1.5rem;display:flex;flex-direction:column;min-width:0;
  box-shadow:0 1px 0 rgb(255 255 255 / .7) inset,0 14px 26px -18px rgb(90 60 20 / .45);transition:transform .25s ease,box-shadow .25s ease}
.card-h{display:flex;align-items:center;gap:1rem}
.badge{flex:none;width:4rem;height:4rem;border-radius:50%;background:var(--badge);display:grid;place-items:center;color:var(--ink);
  box-shadow:0 0 0 5px rgb(240 221 178 / .35)}
.badge .ic{width:2rem;height:2rem}
.card h3{margin:0;font-weight:500;font-size:1.5rem;line-height:1.15;color:var(--ink);text-wrap:balance}
.card h3::after{content:"";display:block;width:2.2rem;height:3px;border-radius:2px;background:var(--gold);margin-top:.6rem}
.card p{margin:1.15rem 0 0;font:400 .97rem/1.7 var(--f-ui);color:var(--soft)}
.btn-gold{margin-top:1.4rem;display:flex;align-items:center;justify-content:center;gap:.7rem;min-height:50px;padding:14px 18px;
  background:var(--btn);color:var(--ink);text-decoration:none;border-radius:3px;
  font:600 .72rem/1.3 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;transition:background .2s ease,color .2s ease}
.btn-gold span{text-wrap:balance;text-align:center}
.btn-gold:hover{background:var(--maroon);color:#fff}
.btn-gold .ic{width:1rem;height:1rem;flex:none;stroke-width:2}
@media (hover:hover){.card:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgb(255 255 255 / .7) inset,0 20px 30px -18px rgb(90 60 20 / .5)}}

.tip{padding:1.35rem 1.35rem 1.55rem}
.tip .badge{width:3.5rem;height:3.5rem;box-shadow:0 0 0 4px rgb(240 221 178 / .35)}
.tip .badge .ic{width:1.8rem;height:1.8rem}
.tip h3{font-size:1.3rem}
.tip p{font-size:.94rem;line-height:1.65;margin-top:1rem}
.dots{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.65rem;font:400 .94rem/1.55 var(--f-ui);color:var(--soft)}
.dots li{position:relative;padding-left:1.2rem}
.dots li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgb(201 154 58 / .18)}

/* ride apps: our own tiles, named in type */
.rides{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.8rem 1.1rem}
.ride{display:grid;justify-items:center;gap:.3rem;text-align:center;min-width:4.6rem}
.ride .tile{width:3.7rem;height:3.7rem;border-radius:15px;display:grid;place-items:center;background:#E8D5A8;color:var(--ink);
  box-shadow:0 8px 14px -10px rgb(90 60 20 / .6)}
.ride .tile .ic{width:1.9rem;height:1.9rem}
.ride b{font:600 .92rem/1.2 var(--f-ui);color:var(--ink)}
.ride span{font:500 .72rem/1.3 var(--f-ui);color:var(--muted)}
.ride.top .tile{background:var(--maroon);color:#F7F0E1}
.ride.top .tile .f{fill:rgb(247 240 225 / .25)}
.ride.top span{color:var(--gold);font-weight:600}

.tips-grid{display:grid;gap:1.1rem;margin-top:clamp(26px,3.4vw,40px)}
.tips-row{display:contents}

.marina{position:relative;z-index:0;margin-top:clamp(-30px,-2vw,-12px);line-height:0;pointer-events:none}
.marina img{display:block;width:100%;height:clamp(110px,13vw,190px);object-fit:cover;object-position:55% 100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34%);mask-image:linear-gradient(to bottom,transparent 0,#000 34%)}

/* ---- wider screens ---- */
@media (min-width:700px){
  .plane,.sky{display:block}
  .tips-grid{grid-template-columns:repeat(2,1fr)}
  .tips-row:last-child .card:last-child{grid-column:1 / -1}
}
@media (min-width:900px){
  .steps ol{grid-template-columns:repeat(5,1fr)}
  .steps ol::before{left:10%;right:10%;top:1.3rem;bottom:auto;width:auto;height:0;border-left:0;border-top:2px dashed var(--gold)}
  .steps a{grid-template-columns:1fr;justify-items:center;text-align:center;gap:.85rem;padding-block:0}
  .steps .stepic{width:4rem;height:4rem}
  .steps .ic{width:2.1rem;height:2.1rem}
  .steps .lbl{max-width:11rem}
  .cards.three{grid-template-columns:repeat(3,1fr);gap:1.4rem}
  .card{padding:1.7rem 1.7rem 1.9rem}
  .tip{padding:1.4rem 1.4rem 1.6rem}
}
@media (min-width:1100px){
  .tips-grid{grid-template-columns:none;gap:1.2rem}
  .tips-row{display:grid;gap:1.2rem}
  .tips-row:first-child{grid-template-columns:1.4fr 1fr 1.15fr}
  .tips-row:last-child{grid-template-columns:1.2fr .85fr 1fr 1.1fr}
  .tips-row:last-child .card:last-child{grid-column:auto}
}
@media (max-width:560px){
  .card{border-radius:14px;padding:1.25rem 1.2rem 1.45rem}
  .badge{width:3.5rem;height:3.5rem}
  .badge .ic{width:1.8rem;height:1.8rem}
  .card h3{font-size:1.35rem}
  .btn-gold{letter-spacing:.14em}
}
@media (prefers-reduced-motion:reduce){.plane{animation:none}.card,.steps .n{transition:none}}