/* Area navigation and listing-page presentation. */
.area-heading{position:relative;margin-top:24px;padding:clamp(24px,4vw,48px);background:linear-gradient(115deg,#fff8d8 0%,#fffdf1 68%,#e5f7fc 100%);border-radius:20px;border:1px solid #eee5b6;border-top:6px solid var(--brand-primary,#ffdc4a)}
.area-heading h1{max-width:1000px;line-height:1.5}
.area-heading>p:last-child{max-width:980px;line-height:2;color:var(--ink,#24334a)}
.area-heading .eyebrow{color:#536777}
.area-directory.section{padding-top:36px}
.area-group+.area-group{margin-top:40px}
.area-group .preference-title,.area-listings>.preference-title{font-size:clamp(1.2rem,2vw,1.65rem);border-left:5px solid var(--brand-primary,#ffdc4a);padding-left:14px}
.area-group p{color:#52616b;margin:0 0 18px;line-height:1.8}
.area-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.area-links a{display:flex;align-items:center;gap:12px;min-width:0;min-height:68px;padding:16px 18px;border:1px solid #d7e4e9;border-radius:12px;background:#fff;color:var(--ink,#24334a);font-size:1rem;font-weight:700;transition:background .15s,border-color .15s}
.area-links a:hover{background:#fff8d8;border-color:#c6a82b}
.area-link-name{overflow-wrap:anywhere;flex:1}
.area-link-count{font-size:.875rem;font-weight:500;white-space:nowrap;color:#36536b;background:#e5f7fc;padding:3px 9px;border-radius:99px}
.area-links a>span:last-child{color:#176c8a}
.area-links a:focus-visible,.area-actions a:focus-visible{outline:3px solid #176c8a;outline-offset:4px}
.area-guide.section{padding-top:32px;padding-bottom:0}
.area-guide>div{border-left:4px solid #44b9db;border-radius:0 14px 14px 0;padding:24px 28px;background:#eef9fc}
.area-guide h2{margin:0 0 12px;font-size:1.3rem}
.area-guide p{margin:0;line-height:2;max-width:1000px}
.area-actions,.related-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:28px 0 0}
.area-listings>.area-group{margin-top:44px}
.area-actions .button,.related-actions .button{white-space:normal;text-align:center}
.site-footer .brand-reading{margin:2px 0 8px;font-size:.8125rem}
@media(max-width:600px){
 .area-heading{margin-top:18px;padding:24px 20px;border-radius:14px}
 .area-heading h1{font-size:1.65rem}
 .area-heading>p:last-child{font-size:1rem;line-height:1.9}
 .area-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .area-links a{padding:14px 12px;gap:6px;flex-wrap:wrap;align-content:center}
 .area-link-name{flex-basis:100%}
 .area-links a>span:last-child{margin-left:auto}
 .area-guide>div{padding:20px}
 .area-directory.section{padding-top:28px}
 .area-actions .button,.related-actions .button{width:100%}
}