.city-hero{padding:65px 7% 55px;background:linear-gradient(120deg,#f7f0df 65%,#f4d492);border-bottom:1px solid var(--line)}.city-hero h1{font-size:clamp(75px,8vw,125px);margin:25px 0}.city-hero>p:not(.eyebrow){max-width:530px;font-size:15px;line-height:1.8}.city-hero .city-explain{font-size:11px!important;letter-spacing:.5px;margin-top:25px}.directory{padding:65px 7%}.directory-head{display:flex;align-items:end;justify-content:space-between;gap:40px}.directory-head h2{font-size:50px}.directory-head>p{max-width:360px;font-size:12px;line-height:1.8}.search-bar{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin:30px 0}.search-bar label{font-size:11px;font-weight:700;display:grid;gap:10px}.search-bar input,.search-bar select{width:100%;padding:16px;border:1px solid var(--line);background:#fffaf0;color:var(--ink);font:14px 'DM Sans',sans-serif;border-radius:0}#alphabet{display:flex;flex-wrap:wrap;gap:5px}#alphabet button{width:32px;height:34px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:11px}#alphabet button:first-child{width:45px}#alphabet button[aria-pressed=true]{background:var(--teal);color:var(--sand)}.result-line{display:flex;align-items:center;justify-content:space-between;margin:20px 0}.result-line p{font-size:11px}.result-line button{background:none;border:0;font:11px 'DM Sans',sans-serif;cursor:pointer;margin:0}.city-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.city-card{text-align:left;border:1px solid var(--line);background:transparent;padding:20px;min-height:115px;color:var(--ink)}.city-card:hover{border-color:var(--teal);background:#eee8d6}.city-card small{font-size:9px;letter-spacing:1px;color:var(--teal)}.city-card h3{font-size:26px;line-height:1.1;margin:8px 0}.city-card span{font-size:9px;opacity:.65}.source-note{font-size:10px;line-height:1.8;opacity:.75;margin-top:35px}.source-note a{text-decoration:underline}#cityDetail{max-width:600px;padding-top:25px}#cityDetail .close{top:10px;right:10px}@media(max-width:950px){.city-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){.city-hero,.directory{padding:40px 6%}.city-hero h1{font-size:80px}.directory-head{display:block}.directory-head h2{font-size:42px}.search-bar{grid-template-columns:1fr}.city-grid{grid-template-columns:repeat(2,1fr)}.city-card{padding:16px 12px}.city-card h3{font-size:24px}.city-hero>p:not(.eyebrow){font-size:13px}}

.city-hero{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:center}.city-hero-copy>p:not(.eyebrow){max-width:530px;font-size:15px;line-height:1.8}.city-hero-art{margin:0;background:#062e2c;box-shadow:12px 12px 0 #e8d6af;transform:rotate(2deg)}.city-hero-art img{display:block;width:100%;height:auto}.city-hero-art figcaption{display:flex;justify-content:space-between;gap:15px;padding:17px;color:var(--sand);font-size:8px;letter-spacing:1px}.city-hero-art figcaption span{color:var(--yellow)}@media(max-width:750px){.city-hero{grid-template-columns:1fr;gap:30px}.city-hero-art{margin:0 10px 12px 0}.city-hero-art figcaption{font-size:7px}.city-hero-copy>p:not(.eyebrow){font-size:13px}}

.artwork-toggle{display:flex;align-items:center;gap:8px;font-size:12px;margin:20px 0}.artwork-toggle input{accent-color:var(--teal);width:17px;height:17px}.city-card.has-art{background:#f0e5ce}.city-card-art{width:100%;display:block;margin-bottom:15px;aspect-ratio:1.5;object-fit:contain;background:#062e2c}#cityDetail>img{object-fit:contain;height:auto;max-height:65vh}.city-card{align-self:start}

/* Coastal journal: open layouts, artwork first, softer transitions. */
.city-hero{max-width:1440px;margin:auto;background:none;border:0;padding:55px 7% 100px;gap:8%}.city-hero h1{font-size:clamp(65px,6.6vw,99px);letter-spacing:-3px;line-height:1.04;margin:25px 0}.city-hero-copy>p:not(.eyebrow){font-size:14px;line-height:1.9;max-width:340px}.city-hero .city-explain{font-family:var(--serif);font-size:21px!important;font-style:italic;letter-spacing:0;color:var(--teal);transform:rotate(-3deg);margin-top:27px}.city-hero-art{transform:rotate(4deg);border:8px solid #fff9ec;border-bottom-width:0;box-shadow:0 14px 32px #173e3729;border-radius:5px 45px 3px 3px;overflow:hidden;background:#062e2c}.city-hero-art figcaption{background:#fff9ec;color:var(--ink);padding:18px 8px;letter-spacing:.6px}.city-hero-art figcaption span{color:var(--teal)}.directory{padding:75px 7% 90px;border-radius:45% 8% 0 0 / 2% 1% 0 0;background:#eee8d8}.directory-head h2{font-size:clamp(43px,4.6vw,65px);letter-spacing:-1.8px}.directory-head>p{font-size:13px;line-height:1.9;max-width:330px}.search-bar{margin:35px 0 27px;gap:35px}.search-bar input,.search-bar select{background:transparent;border:0;border-bottom:1px solid #173e3760;border-radius:0;padding:15px 0;font-size:14px}.search-bar label{font-size:10px;letter-spacing:.5px;gap:4px}#alphabet{gap:4px;align-items:center}#alphabet button{border:0;width:31px;height:33px;border-radius:50%}#alphabet button:first-child{border-radius:20px}#alphabet button:hover{background:#dfe2cf}#alphabet button[aria-pressed=true]{background:var(--ink);color:var(--sand)}.artwork-toggle{font-size:11px;margin-top:25px}.result-line{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:35px}.result-line p{font-size:10px;letter-spacing:.4px}.city-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:43px 30px;align-items:start}.city-card{border:0;border-bottom:1px solid var(--line);padding:15px 0 20px;background:none;min-height:110px;transition:transform .25s}.city-card:hover{background:none;border-color:var(--teal);transform:translateY(-4px)}.city-card.has-art{background:none;border:0;padding-top:0}.city-card-art{border-radius:5px 40px 5px 5px;box-shadow:0 8px 20px #173e3719;margin-bottom:20px;transition:transform .3s}.city-card.has-art:nth-child(3n+2){margin-top:35px}.city-card.has-art:nth-child(3n+2) .city-card-art{border-radius:40px 5px 5px 5px}.city-card h3{font-size:29px;letter-spacing:-.6px;margin:8px 0 11px}.city-card small{font-size:8px;letter-spacing:1px}.city-card span{font-size:8px;letter-spacing:.3px;opacity:1;color:#46685d}.source-note{color:#52665b;opacity:1;margin-top:50px;max-width:650px}#cityDetail{max-width:800px;padding-top:0}#cityDetail .close{top:15px;right:15px}
@media(max-width:950px){.city-hero{gap:6%}.city-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.city-card.has-art:nth-child(3n+2){margin-top:0}.city-card.has-art:nth-child(even){margin-top:28px}.city-hero-art figcaption{flex-direction:column;gap:7px}}
@media(max-width:750px){.city-hero{grid-template-columns:1fr;padding:35px 7% 70px;gap:35px}.city-hero h1{font-size:clamp(62px,11vw,83px)}.city-hero-art{margin:0 10px;max-width:500px}.city-hero-art figcaption{flex-direction:row;font-size:7px;padding:16px 5px}.city-hero .city-explain{font-size:20px!important;max-width:320px}.directory{padding:55px 6% 70px}.directory-head{display:block}.directory-head h2{font-size:45px}.directory-head>p{max-width:100%}.search-bar{grid-template-columns:1fr;gap:22px;margin-top:28px}.city-grid{gap:30px 20px}.city-card h3{font-size:24px}.city-card-art{border-radius:5px 28px 5px 5px}.city-card span{font-size:7px}.city-card small{font-size:7px}.result-line{gap:15px}.result-line p{line-height:1.8;max-width:235px}#alphabet button{width:29px;height:31px}.city-card.has-art:nth-child(3n+2) .city-card-art{border-radius:28px 5px 5px 5px}}