/* Shared layouts for the statically generated content pages. */
.site-nav { gap: 22px; }
.editorial-links { display: grid; gap: 12px; }
.editorial-links a { padding: 14px 18px; background: var(--sand); color: var(--water-deep); font-size: 14px; }
.editorial-links a:hover { text-decoration: underline; }
.reading-aside nav a { font-size: 12px; line-height: 1.45; padding-block: 10px; }
.aside-label { margin-top: 28px; }
.home-editorial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; margin-top: 40px; }
.home-editorial-grid p { color: #455e6b; line-height: 1.9; }
.occasion-card > a { display: inline-block; font-size: 12px; color: #b9dce9; margin-top: 16px; border-bottom: 1px solid currentColor; }
.captain-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding-block: 100px; border-top: 1px solid var(--line); align-items: center; }
.captain-visual { position: relative; }
.captain-visual img { height: 580px; object-fit: cover; }
.captain-copy h2 { font: 400 clamp(48px, 5vw, 75px)/1 var(--serif); margin: 0 0 30px; letter-spacing: -.025em; }
.captain-copy h2 em { color: var(--water-deep); }
.captain-copy p:not(.eyebrow) { color: #455e6b; }
.captain-copy .button { margin-top: 18px; }
@media (max-height: 950px) { .reading-aside { position: static !important; } }
@media (max-width: 1100px) {
  .hand-note { right: 20px; }
  .site-header { padding-inline: 18px; }
  .menu-toggle { display: grid; align-content: center; gap: 7px; }
  .menu-toggle span:not(.sr-only) { display: block; width: 25px; height: 1px; background: currentColor; }
  .site-nav { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px !important; padding: 90px 35px; background: var(--ink); font-family: var(--serif); font-size: 32px; opacity: 0; pointer-events: none; transition: opacity .25s; overflow-y: auto; }
  .site-nav.open { opacity: 1; pointer-events: auto; }
  .site-nav .nav-cta { font-family: var(--sans); font-size: 13px; }
}
@media (max-width: 920px) { .captain-feature, .home-editorial-grid { grid-template-columns: 1fr; gap: 35px; } .captain-visual img { height: 400px; } }
@media (max-width: 580px) { .captain-feature { padding-block: 70px; } .captain-visual img { height: 350px; } }
@media (max-height: 650px) and (max-width: 1100px) { .site-nav { justify-content: flex-start; font-size: 25px; gap: 10px !important; } }
.inner-page .site-header { background: var(--ink); }
.inner-page .breadcrumbs { padding-top: 124px; padding-bottom: 30px; display: flex; flex-wrap: wrap; gap: 12px; color: #576c76; font-size: 11px; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.site-nav a[aria-current="page"] { color: #b9dce9; opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.page-heading { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 65px; padding-block: 40px 85px; }
.page-heading h1, .location-heading h1 { margin: 0; font: 400 clamp(54px, 6.2vw, 94px)/.98 var(--serif); letter-spacing: -.035em; }
.page-heading h1 em { font-weight: 400; color: var(--water-deep); }
.page-lead { font-size: 19px; line-height: 1.7; color: #465f6c; max-width: 780px; margin: 28px 0; }
.page-heading figure { margin: 0; }
.page-heading img { height: 520px; object-fit: cover; }
figcaption { margin-top: 12px; font-size: 10px; color: #5b6f78; }
.text-heading { grid-template-columns: 1fr; }
.text-heading > div { max-width: 900px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 780px) minmax(220px, 1fr); gap: 90px; padding-block: 50px 100px; align-items: start; border-top: 1px solid var(--line); }
.prose-section { margin-bottom: 50px; scroll-margin-top: 110px; }
.prose h2, .faq-group h2, .reading-aside h2, .route-ideas h2, .related-locations h2 { font: 400 40px/1.08 var(--serif); letter-spacing: -.015em; margin: 0 0 22px; }
.prose p { color: #3b5260; line-height: 1.9; }
.reading-aside { padding: 30px; background: var(--sand); position: sticky; top: 104px; }
.reading-aside h2 { font-size: 33px; }
.reading-aside p { font-size: 14px; color: #435c68; }
.reading-aside a { display: block; padding-block: 13px; border-bottom: 1px solid var(--line); font-size: 13px; }
.source-link { padding-top: 25px; border-top: 1px solid var(--line); font-size: 12px; }
.source-link a { text-decoration: underline; text-underline-offset: 3px; }
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 60px; }
.spec-grid > div { padding: 25px; background: var(--sand); }
.spec-grid span, .location-facts span { display: block; text-transform: uppercase; font-size: 10px; letter-spacing: .12em; color: var(--water-deep); margin-bottom: 9px; }
.spec-grid strong { font-size: 18px; font-weight: 500; }
.boat-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; padding-bottom: 100px; }
.boat-gallery figure { margin: 0; }
.boat-gallery img { height: 300px; object-fit: cover; }
.page-cta { padding-block: 100px; background: #0b2a39; color: white; }
.page-cta h2 { font: 400 clamp(50px, 6vw, 85px)/1 var(--serif); margin: 0; }
.page-cta p:not(.eyebrow) { max-width: 670px; color: #b6ccd6; margin-block: 25px; }
.cta-phone { margin-left: 25px; font-size: 13px; }
.faq-group { margin-bottom: 55px; scroll-margin-top: 110px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { padding: 21px 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 17px; font-weight: 500; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span { font-weight: 400; color: var(--water-deep); font-size: 25px; }
.faq-item[open] summary span { transform: rotate(45deg); }
.faq-item > p { margin: 0; padding: 0 24px 25px 0; color: #3b5260; line-height: 1.85; }
.location-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.location-filters button { padding: 11px 20px; border-radius: 25px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; font-size: 13px; }
.location-filters button[aria-pressed="true"] { background: var(--ink); color: white; }
.filter-status { font-size: 12px; color: #526974; margin: 24px 0; }
.destination-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.destination-card { display: flex; flex-direction: column; padding: 30px; background: var(--sand); border: 1px solid transparent; min-height: 285px; transition: border-color .2s, transform .2s; }
.destination-card:hover { border-color: var(--water-deep); transform: translateY(-3px); }
.destination-card[hidden] { display: none; }
.card-topline { display: flex; gap: 20px; justify-content: space-between; color: var(--water-deep); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.destination-card h3 { font: 400 36px/1.08 var(--serif); margin: 35px 0 15px; }
.destination-card p { font-size: 14px; line-height: 1.65; color: #4a606c; margin: 0 0 25px; }
.card-mode { margin-top: auto; border-top: 1px solid var(--line); padding-top: 16px; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.destination-browser { padding-bottom: 85px; }
.route-editorial { padding-block: 60px 100px; border-top: 1px solid var(--line); }
.route-ideas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 35px; }
.route-ideas p { font-size: 15px; color: #455e6b; }
.route-ideas a { font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.route-note { margin-top: 45px; background: var(--sand); padding: 25px; color: #455e6b; font-size: 14px; }
.location-heading { background: #0b2a39; color: white; padding-block: 75px; position: relative; overflow: hidden; }
.location-heading .section-shell { position: relative; }
.location-heading h1 { max-width: 900px; position: relative; z-index: 1; }
.location-heading h1 em { font-weight: 400; color: var(--water); }
.location-heading .page-lead { max-width: 600px; color: #c4d6de; position: relative; z-index: 1; }
.waypoint { position: absolute; font: 400 320px/1 var(--serif); right: 0; bottom: 0; opacity: .07; pointer-events: none; }
.location-facts { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-block: 45px; }
.location-facts strong { font-size: 15px; font-weight: 500; }
.related-locations { padding-bottom: 95px; }
.related-locations > .text-link { margin-top: 30px; }
.homepage-discovery { padding-block: 100px; border-top: 1px solid var(--line); }
.homepage-discovery h2 { font: 400 clamp(48px, 5.5vw, 78px)/1 var(--serif); margin: 0 0 28px; max-width: 800px; }
.homepage-discovery > p:not(.eyebrow) { max-width: 720px; color: #455e6b; }
.homepage-discovery .destination-grid { margin-block: 40px; }
.homepage-faq { padding-block: 90px; border-top: 1px solid var(--line); }
.homepage-faq h2 { font: 400 64px/1 var(--serif); margin: 0 0 30px; }
.homepage-faq .text-link { margin-top: 25px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--water-deep); outline-offset: 5px; }
@media (max-width: 1100px) { .site-nav { gap: 17px; } .article-layout { gap: 40px; } .page-heading { gap: 35px; } }
@media (max-width: 920px) {
  .page-heading { grid-template-columns: 1fr; }
  .page-heading img { height: 430px; }
  .article-layout { grid-template-columns: 1fr; }
  .reading-aside { position: static; }
  .destination-grid, .route-ideas { grid-template-columns: 1fr 1fr; }
  .location-facts { gap: 25px; }
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .boat-gallery { grid-template-columns: 1fr; }
  .boat-gallery img { height: 400px; }
}
@media (max-width: 580px) {
  .inner-page .breadcrumbs { padding-top: 105px; }
  .page-heading { padding-block: 20px 55px; }
  .page-heading h1, .location-heading h1 { font-size: 57px; }
  .page-lead { font-size: 17px; }
  .page-heading img { height: 340px; }
  .destination-grid, .route-ideas, .location-facts { grid-template-columns: 1fr; }
  .location-heading { padding-block: 55px; }
  .waypoint { font-size: 210px; }
  .destination-card { min-height: 0; }
  .location-facts { gap: 20px; }
  .article-layout { padding-bottom: 65px; }
  .cta-phone { display: block; margin: 24px 0 0; }
  .page-cta, .homepage-discovery, .homepage-faq { padding-block: 70px; }
  .homepage-faq h2 { font-size: 49px; }
  .spec-grid > div { padding: 18px; }
  .spec-grid strong { font-size: 15px; }
}