/* A travel atlas: two landscape spreads, followed by a readable destination index. */
#guide-library{padding-top:100px;padding-bottom:112px}
#guide-library .section-heading{margin-bottom:28px;align-items:end}
#guide-library .section-heading p{padding-bottom:6px}
#guide-library .guide-filters{gap:24px;border-bottom:1px solid var(--line);margin:0 0 44px}
#guide-library .guide-filters button{border:0;border-bottom:2px solid transparent;border-radius:0;padding:12px 0 16px;min-width:44px;background:none;color:var(--muted);font-size:14px}
#guide-library .guide-filters button[aria-pressed=true]{border-bottom-color:var(--travel);color:var(--ink);background:none}
#guide-library .group-title{border:0;padding:0;margin:0 0 24px;font-size:21px;line-height:1.4}
#guide-library .group-title>span{font-size:12px}
#guide-library .guide-group:not([hidden])~.guide-group:not([hidden]){margin-top:88px}
#guide-library .guide-collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:40px;row-gap:0;align-items:start}
#guide-library .guide-postcard{margin:0;width:auto;min-width:0;grid-column:span 6;align-self:start}
#guide-library .guide-postcard[hidden],#guide-library .guide-group[hidden]{display:none}
#guide-library .guide-postcard[data-layout=feature]{grid-column:span 7;margin-bottom:40px}
#guide-library .guide-postcard[data-layout=feature]:nth-child(2){grid-column:span 5}
#guide-library .postcard-photo{border-radius:3px;background:var(--surface);height:clamp(260px,30vw,410px);aspect-ratio:auto}
#guide-library .postcard-photo img{transition:transform .6s var(--ease-out)}
#guide-library .postcard-caption{padding-top:20px;gap:16px}
#guide-library .postcard-caption h3{font-size:clamp(26px,2.7vw,40px);line-height:1.15;overflow-wrap:anywhere}
#guide-library .guide-arrow{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border:1px solid var(--line);border-radius:50%;font:400 21px var(--font-body);transition:transform .24s var(--ease-out),background-color .24s var(--ease-out)}
#guide-library .guide-meta{display:flex;align-items:baseline;gap:14px;font-size:12px;line-height:1.6;color:var(--muted);margin:6px 0 0;font-variant-numeric:tabular-nums}
#guide-library .guide-meta span+span{padding-left:14px;border-left:1px solid var(--line)}
#guide-library .guide-postcard[data-layout=index]{border-top:1px solid var(--line);padding:22px 0}
#guide-library .guide-postcard[data-layout=index]>a{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:24px}
#guide-library .guide-postcard[data-layout=index] .postcard-photo{width:112px;height:100px;aspect-ratio:auto}
#guide-library .guide-postcard[data-layout=index] .postcard-caption{padding:0}
#guide-library .guide-postcard[data-layout=index] h3{font-size:27px}
#guide-library .guide-postcard[data-layout=index] .guide-arrow{border:0}
#guide-library .guide-postcard[data-layout=index] .guide-meta{margin-top:10px}
#guide-library .guide-postcard[data-status=planned]{grid-column:1/-1;margin-bottom:32px}
#guide-library .guide-postcard[data-status=planned]>a{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center}
#guide-library .guide-postcard[data-status=planned] .postcard-photo{height:360px}
#guide-library .guide-postcard[data-status=planned] .guide-details{padding:20px 30px}
#guide-library .guide-postcard[data-status=planned] h3{font-size:clamp(40px,5vw,68px)}
#guide-library a:focus-visible{outline:3px solid var(--travel);outline-offset:6px;border-radius:3px}
#guide-library a:active{scale:.97}
@media(hover:hover) and (pointer:fine){
 #guide-library .guide-postcard>a:hover .postcard-photo img{transform:scale(1.045)}
 #guide-library .guide-postcard>a:hover .guide-arrow{transform:rotate(45deg);background:var(--surface)}
}
@media(min-width:768px) and (max-width:1023px){
 #guide-library .guide-collage{column-gap:28px}
 #guide-library .guide-postcard[data-layout=index]>a{grid-template-columns:88px minmax(0,1fr);gap:16px}
 #guide-library .guide-postcard[data-layout=index] .postcard-photo{width:88px;height:88px}
 #guide-library .guide-postcard[data-layout=index] h3{font-size:24px}
}
@media(max-width:767px),(max-height:500px) and (pointer:coarse){
 #guide-library{padding:64px max(20px,env(safe-area-inset-left)) 72px max(20px,env(safe-area-inset-right))}
 #guide-library .section-heading{margin-bottom:20px}
 #guide-library .section-heading h2{font-size:40px}
 #guide-library .section-heading p{margin:14px 0 0;font-size:13px}
 #guide-library .guide-filters{gap:20px;flex-wrap:wrap;margin-bottom:28px}
 #guide-library .guide-filters button{font-size:13px;padding:10px 0 12px;min-height:46px}
 #guide-library .group-title{font-size:19px;margin-bottom:20px}
 #guide-library .group-title>span{font-size:11px}
 #guide-library .guide-collage{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
 #guide-library .guide-postcard,#guide-library .guide-postcard[data-layout=feature],#guide-library .guide-postcard[data-layout=feature]:nth-child(2){grid-column:1;width:100%;align-self:start}
 #guide-library .guide-postcard[data-layout=feature]{margin-bottom:28px!important}
 #guide-library .postcard-photo{height:auto;aspect-ratio:5/4}
 #guide-library .postcard-caption{padding-top:12px}
 #guide-library .postcard-caption h3{font-size:30px}
 #guide-library .guide-meta{font-size:12px;margin:2px 0 0}
 #guide-library .guide-postcard[data-layout=index]{padding:18px 0}
 #guide-library .guide-postcard[data-layout=index]>a{grid-template-columns:88px minmax(0,1fr);gap:18px}
 #guide-library .guide-postcard[data-layout=index] .postcard-photo{width:88px;height:88px}
 #guide-library .guide-postcard[data-layout=index] h3{font-size:25px}
 #guide-library .guide-postcard[data-layout=index] .guide-meta{gap:8px;flex-wrap:wrap;margin-top:4px}
 #guide-library .guide-postcard[data-layout=index] .guide-meta span+span{padding-left:8px}
 #guide-library .guide-group:not([hidden])~.guide-group:not([hidden]){margin-top:52px}
 #guide-library .guide-postcard[data-status=planned]>a{display:block}
 #guide-library .guide-postcard[data-status=planned] .postcard-photo{height:auto;aspect-ratio:5/4}
 #guide-library .guide-postcard[data-status=planned] .guide-details{padding:0}
 #guide-library .guide-postcard[data-status=planned] h3{font-size:30px}
}
@media(max-height:500px) and (pointer:coarse){#guide-library .postcard-photo,#guide-library .guide-postcard[data-status=planned] .postcard-photo{height:65svh;aspect-ratio:auto}}
@media(prefers-reduced-motion:reduce){#guide-library .postcard-photo img,#guide-library .guide-arrow{transition:none}}