@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800;6..12,900&display=swap');

:root { --ink:#123b5d; --cream:#fffaf3; --paper:#fff6e9; --teal:#3f9297; --sun:#ffae23; --sage:#a6bd72; --line:rgba(18,59,93,.14); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--cream); color:var(--ink); font-family:"Nunito Sans",sans-serif; }
.places-header { display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:auto; padding:26px 32px; }
.brand { color:var(--ink); font-size:20px; font-weight:900; letter-spacing:-.7px; text-decoration:none; }
.header-status,.eyebrow,.directory-heading { font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.header-status { color:#6f8795; }
.places-hero { max-width:1180px; margin:40px auto 0; padding:46px 32px 54px; overflow:hidden; position:relative; }
.places-hero:after { content:""; position:absolute; z-index:-1; width:220px; height:220px; border-radius:50%; right:6%; top:-30px; background:rgba(255,174,35,.14); box-shadow:-54px 107px 0 rgba(63,146,151,.14); }
.eyebrow { margin:0 0 14px; color:var(--teal); font-weight:700; }
h1 { max-width:720px; margin:0; font-size:clamp(49px,7.4vw,93px); line-height:.92; letter-spacing:-.08em; font-weight:900; }
.places-hero > p:last-child { max-width:500px; margin:24px 0 0; color:#58728a; font-size:18px; line-height:1.55; }
.directory { max-width:1180px; margin:auto; padding:0 32px 80px; }
.filters { display:grid; grid-template-columns:minmax(260px,1.8fr) repeat(3,minmax(130px,1fr)) auto; gap:10px; padding:12px; border:1px solid var(--line); border-radius:20px; background:#fffdf9; box-shadow:0 12px 35px rgba(18,59,93,.07); }
input,select,button { min-height:46px; border:0; border-radius:11px; font:inherit; font-size:14px; }
input,select { width:100%; padding:0 13px; color:var(--ink); background:var(--paper); outline-color:var(--teal); }
button { padding:0 18px; background:var(--ink); color:white; font-weight:800; cursor:pointer; }
.directory-heading { display:flex; justify-content:space-between; gap:20px; margin:36px 0 15px; color:#688194; }
.directory-heading p { margin:0; color:var(--teal); font-weight:700; }
.location-list { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.place-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:white; color:inherit; text-decoration:none; transition:transform .16s ease,box-shadow .16s ease; }
.place-card:hover,.place-card:focus-visible { transform:translateY(-3px); box-shadow:0 12px 30px rgba(18,59,93,.12); outline:2px solid var(--teal); outline-offset:2px; }
.place-illustration { height:170px; min-height:0; flex:0 0 170px; overflow:hidden; display:grid; place-items:center; color:var(--ink); background:linear-gradient(130deg,#d8e8d3,#a5bd72); }
.place-illustration img { display:block; width:100%; max-width:none; height:100%; min-width:0; min-height:0; object-fit:cover; object-position:center; }
.place-illustration img.place-logo,.detail-illustration img.place-logo { object-fit:contain; padding:20px; background:linear-gradient(130deg,#d8e8d3,#a5bd72); }
.place-card:nth-child(2n) .place-illustration { background:linear-gradient(130deg,#dae9e6,#71afb0); }.place-card:nth-child(3n) .place-illustration { background:linear-gradient(130deg,#fff1c7,#ffbc4b); }
.place-illustration span { width:67px; height:67px; display:grid; place-items:center; border-radius:50%; background:rgba(255,250,243,.85); font-size:34px; }
.place-content { display:flex; flex:1; flex-direction:column; padding:20px; }
.place-meta { margin:0; color:#58888b; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
.place-card h2 { margin:7px 0 8px; font-size:22px; line-height:1.02; letter-spacing:-.7px; }
.place-summary { margin:0; color:#58728a; font-size:14px; line-height:1.5; }
.tag-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }.tag { padding:5px 8px; border-radius:999px; background:#e9f1e2; color:#496f55; font-size:11px; font-weight:800; }
.amenity-list { display:flex; flex-wrap:wrap; gap:6px 11px; padding:0; margin:17px 0 0; list-style:none; color:#48647b; font-size:11px; }.amenity-list li:before { content:"•"; padding-right:4px; color:var(--sun); }
.loading,.empty-state { grid-column:1/-1; padding:42px 20px; border:1px dashed var(--line); border-radius:18px; color:#5e778d; text-align:center; }.empty-state span { font-size:25px; color:var(--sun); }.empty-state h2 { margin:8px 0; color:var(--ink); font-size:22px; }.empty-state p { margin:0; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.detail-page { max-width:900px; margin:20px auto 80px; padding:0 32px; }
.back-link,.map-link { color:var(--teal); font-weight:800; text-decoration:none; }
.detail-illustration { width:100%; height:clamp(220px,38vw,420px); min-height:0; overflow:hidden; display:grid; place-items:center; margin:20px 0 0; border-radius:24px 24px 0 0; background:linear-gradient(130deg,#d8e8d3,#a5bd72); }
.detail-illustration span { width:100px; height:100px; display:grid; place-items:center; border-radius:50%; background:rgba(255,250,243,.85); font-size:52px; }
.detail-illustration img { display:block; width:100%; max-width:none; height:100%; min-width:0; min-height:0; object-fit:cover; object-position:center; }
.detail-intro { padding:26px 30px 30px; border:1px solid var(--line); border-top:0; border-radius:0 0 24px 24px; background:#fffdf9; }
.detail-intro h1 { margin-top:8px; }
.detail-intro .detail-summary { margin:14px 0 0; }
.detail-intro .tag-row { margin-top:20px; }
.detail-page h1 { max-width:800px; margin:8px 0 0; font-size:clamp(42px,7vw,72px); }
.detail-summary { max-width:680px; color:#58728a; font-size:18px; line-height:1.6; }
.detail-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:16px; margin-top:30px; }
.detail-panel { padding:24px; border:1px solid var(--line); border-radius:18px; background:white; }
.detail-panel h2 { margin:0 0 16px; font-size:21px; }.detail-panel address { margin-bottom:18px; color:#58728a; font-style:normal; line-height:1.6; }
.detail-amenities { display:grid; gap:15px; padding:0; margin:0; list-style:none; }.detail-amenities p { margin:4px 0 0; color:#58728a; line-height:1.5; }
@media (max-width:900px) { .filters { grid-template-columns:repeat(2,1fr); }.search-field { grid-column:span 2; }.location-list { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .detail-page { padding:0 20px; }.detail-illustration { height:220px; }.detail-intro { padding:22px 20px 24px; }.detail-grid { grid-template-columns:1fr; } }
@media (max-width:600px) { .places-header,.places-hero,.directory { padding-left:20px; padding-right:20px; }.places-header { padding-top:21px; padding-bottom:21px; }.header-status { display:none; }.places-hero { margin-top:8px; padding-top:42px; padding-bottom:42px; }.places-hero:after { right:-96px; top:-48px; }.places-hero > p:last-child { font-size:16px; }.filters { grid-template-columns:1fr; border-radius:16px; }.search-field { grid-column:auto; }.directory-heading { margin-top:29px; }.directory-heading span { display:none; }.location-list { grid-template-columns:1fr; } }

/* Compact search and place list sit directly over the sunny landing illustration. */
.sunlit-copy { top:9%; left:10%; width:48%; }
.sunlit-copy h2 { max-width:570px; font-size:clamp(52px,5.6vw,78px); }
.sunlit-copy > p { margin-top:14px; max-width:340px; font-size:16px; }
.hero-directory { position:absolute; z-index:7; left:10%; bottom:62px; width:min(560px,50%); height:48%; min-height:240px; max-height:370px; display:flex; flex-direction:column; gap:8px; padding:14px; overflow:visible; border:1px solid rgba(18,59,93,.12); border-radius:20px; background:rgba(255,253,249,.97); box-shadow:0 15px 42px rgba(18,59,93,.16); }
.hero-directory-heading { display:flex; flex:0 0 auto; align-items:baseline; justify-content:space-between; gap:12px; }
.hero-directory-heading h2 { margin:0; color:var(--ink); font-size:17px; font-weight:900; letter-spacing:-.4px; }
.hero-directory-heading span { color:#688194; font-family:"DM Mono",monospace; font-size:9px; text-transform:uppercase; }
.hero-filters { display:grid; flex:0 0 auto; grid-template-columns:minmax(120px,1fr) 116px auto auto; align-items:center; gap:6px; }
.hero-filters input,.hero-filters select,.hero-filters button { min-width:0; min-height:38px; height:38px; padding:0 9px; border:1px solid rgba(18,59,93,.1); border-radius:9px; font-size:11px; }
.hero-filters input { background:#fff; }
.hero-filters select { background:var(--paper); }
.hero-filters button { padding:0 10px; }
.advanced-filters { position:relative; color:#58728a; font-size:11px; }
.advanced-filters summary { cursor:pointer; white-space:nowrap; }
.advanced-filter-options { position:absolute; z-index:12; top:calc(100% + 7px); left:0; display:grid; width:220px; gap:7px; padding:10px; border:1px solid var(--line); border-radius:12px; background:#fffdf9; box-shadow:0 12px 25px rgba(18,59,93,.16); }
.advanced-filter-options select { width:100%; }
.hero-location-list { min-height:0; flex:1 1 auto; grid-template-columns:minmax(0,1fr); gap:6px; overflow-y:auto; padding:1px 3px 1px 1px; scrollbar-width:thin; }
.hero-location-list .place-card { height:70px; min-height:70px; flex-direction:row; border-radius:12px; }
.hero-location-list .place-illustration { width:78px; height:68px; min-height:68px; flex:0 0 78px; }
.hero-location-list .place-illustration img { width:100%; height:100%; padding:0; }
.hero-location-list .place-illustration img.place-logo { padding:9px; }
.hero-location-list .place-content { min-width:0; justify-content:center; padding:7px 10px; }
.hero-location-list .place-meta { font-size:8px; }
.hero-location-list .place-card h2 { margin:3px 0 0; overflow:hidden; font-size:14px; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.hero-location-list .place-summary,.hero-location-list .tag-row,.hero-location-list .amenity-list { display:none; }
.hero-location-list .loading,.hero-location-list .empty-state { padding:13px; }
.bottom-note { right:5%; left:auto; }
@media (max-width:850px) {
  .sunlit-copy { top:9%; left:8%; width:84%; }
  .sunlit-copy h2 { max-width:490px; }
  .hero-directory { left:8%; bottom:48px; width:84%; height:39%; min-height:245px; max-height:370px; }
  .bottom-note { right:8%; bottom:13px; font-size:10px; }
}
@media (max-width:520px) {
  .sunlit-copy { top:8%; }
  .sunlit-copy h2 { font-size:50px; }
  .sunlit-copy > p { max-width:280px; font-size:14px; }
  .hero-directory { height:39%; min-height:250px; padding:12px; }
  .hero-filters { grid-template-columns:minmax(80px,1fr) 108px auto auto; gap:4px; }
  .hero-filters input,.hero-filters select,.hero-filters button { padding:0 6px; font-size:10px; }
  .advanced-filters { font-size:10px; }
  .hero-location-list .place-illustration { width:66px; flex-basis:66px; }
  .bottom-note { max-width:48%; text-align:right; }
}