/* Destination guide pages. Builds on style.css tokens. */
.guide{padding:12px 0 clamp(64px,8vw,104px)}
.guide-back{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--brass);text-underline-offset:4px}
.guide-back::before{content:'';width:8px;height:8px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-right:2px}
.guide-back:hover{color:var(--navy)}
.guide-head{max-width:46em;margin-top:24px}
.guide-head h1{font-size:clamp(44px,6vw,84px);line-height:1.02;letter-spacing:-.02em}
.guide-lede{margin-top:18px;max-width:34em;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--slate)}
.guide-where{margin-top:10px;font-size:15px;font-weight:500}

.guide-photo{margin:36px 0 0}
.guide-photo img{display:block;width:100%;height:clamp(300px,42vw,580px);object-fit:cover;border-radius:var(--radius);background:var(--wash)}
.guide-photo figcaption{margin-top:10px;font-size:13px;color:var(--slate);line-height:1.5}
.guide-photo figcaption a{text-underline-offset:3px}

.guide-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(300px,4fr);gap:clamp(40px,6vw,88px);align-items:start;margin-top:clamp(40px,5vw,64px)}
.guide-text{max-width:36em}
.guide-text>p{font-size:19px;line-height:1.7}
.guide-text>p+p{margin-top:1.1em}
.guide-text h2{margin:48px 0 18px;font-size:clamp(28px,2.6vw,34px)}
.guide-facts{margin:-6px 0 0;padding:0;list-style:none}
.guide-facts li{position:relative;padding:5px 0 5px 26px;font-size:16px;line-height:1.5}
/* The yellow "places to go" pin from the map */
.guide-facts li::before{content:'';position:absolute;left:2px;top:11px;width:11px;height:11px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 1.5px var(--navy)}
.guide-card .guide-card-sub{font-family:var(--text);font-size:14px;font-weight:600}
.guide-good{margin-top:6px}
.guide-text .guide-sources-title{margin:44px 0 10px;font-family:var(--text);font-size:14px;font-weight:600}
.guide-sources{margin:0;padding-left:1.4em;font-size:14px;color:var(--slate)}
.guide-sources li{padding:3px 0;overflow-wrap:anywhere}
.guide-sources a{text-underline-offset:3px}

.guide-card{position:sticky;top:24px;display:flex;flex-direction:column;gap:16px;padding:28px;background:var(--wash);border-radius:var(--radius)}
.guide-card h2{font-size:26px}
.guide-dock{display:flex;flex-direction:column;gap:2px;padding:14px 0;border-block:1px solid var(--line);font-size:15px;color:var(--slate)}
.guide-dock strong{font-family:var(--display);font-weight:400;font-size:21px;color:var(--navy);line-height:1.25}
.guide-visit{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 20px;border:1.5px solid var(--navy);border-radius:999px;font-weight:600;text-decoration:none;transition:background-color .15s,color .15s}
.guide-visit .icon{width:18px;height:18px}
.guide-visit:hover{background:var(--navy);color:var(--hull)}
.guide-card .fine{line-height:1.5}

.guide-more{padding:clamp(56px,7vw,88px) 0;background:var(--wash)}
.guide-more h2{font-size:clamp(30px,3vw,40px)}
.more-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:32px 0 0;padding:0;list-style:none}
.more-list a{display:block;text-decoration:none}
.more-list img{display:block;width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;border-radius:var(--radius);background:var(--line)}
.more-name{display:block;margin-top:14px;font-family:var(--display);font-size:24px;line-height:1.15}
.more-list a:hover .more-name{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.more-list p{margin-top:6px;color:var(--slate);font-size:16px}

@media (max-width:900px){
  .guide-body{grid-template-columns:1fr}
  .guide-card{position:static;order:-1}
  .more-list{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .guide-photo{margin-top:24px}
  .guide-photo img{height:auto;aspect-ratio:4/3}
  .guide-text>p{font-size:17px}
  .guide-card{padding:22px 18px}
  .more-list{grid-template-columns:1fr;gap:28px}
}