diff --git a/t20-project-2/index.html b/t20-project-2/index.html
index 3fb66a4..839219a 100644
--- a/t20-project-2/index.html
+++ b/t20-project-2/index.html
@@ -2,9 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>t20-project-2</title>
+    <meta
+      name="description"
+      content="Discover cities around the world with Country Boys, a searchable world city catalog."
+    />
+    <meta name="theme-color" content="#f5f7f4" />
+    <title>Country Boys – World City Catalog</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/t20-project-2/src/App.tsx b/t20-project-2/src/App.tsx
index 9ca8e8d..b9a73a1 100644
--- a/t20-project-2/src/App.tsx
+++ b/t20-project-2/src/App.tsx
@@ -1,122 +1,370 @@
-import { useState } from 'react'
-import heroImg from './assets/hero.png'
-import reactLogo from './assets/react.svg'
-import viteLogo from './assets/vite.svg'
-import './App.css'
+import { useEffect, useState } from 'react'
 
-function App() {
-  const [count, setCount] = useState(0)
+type City = {
+  id: string
+  name: string
+  country: string
+  continent: string
+  description: string
+  rating: string
+  reviews: number
+  population: string
+  elevation: string
+  image: string
+  imageAlt: string
+}
+
+const cities: City[] = [
+  {
+    id: 'copenhagen',
+    name: 'Copenhagen',
+    country: 'Denmark',
+    continent: 'Europe',
+    description: 'Bike-friendly streets, Nordic design, and long summer evenings by the water.',
+    rating: '4.8',
+    reviews: 248,
+    population: '653,000 residents',
+    elevation: '14 m above sea level',
+    image:
+      'https://images.unsplash.com/photo-1513622470522-26c3c8a854bc?auto=format&fit=crop&w=420&q=78',
+    imageAlt: 'Colorful houses along Nyhavn in Copenhagen',
+  },
+  {
+    id: 'lisbon',
+    name: 'Lisbon',
+    country: 'Portugal',
+    continent: 'Europe',
+    description: 'Pastel facades, steep hills, and the salty Atlantic breeze.',
+    rating: '4.9',
+    reviews: 391,
+    population: '545,000 residents',
+    elevation: '2 m above sea level',
+    image:
+      'https://images.unsplash.com/photo-1555881400-74d7acaacd8b?auto=format&fit=crop&w=420&q=78',
+    imageAlt: 'Yellow tram on a street in Lisbon',
+  },
+  {
+    id: 'kyoto',
+    name: 'Kyoto',
+    country: 'Japan',
+    continent: 'Asia',
+    description: 'Timber houses, peaceful temple gardens, and a city in constant motion.',
+    rating: '4.7',
+    reviews: 184,
+    population: '1.46 million residents',
+    elevation: '50 m above sea level',
+    image:
+      'https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?auto=format&fit=crop&w=420&q=78',
+    imageAlt: 'Traditional Kyoto street with a pagoda in the background',
+  },
+]
+
+const storageKey = 'country-boys:saved-cities'
+
+function readSavedCities(): string[] {
+  try {
+    const stored = window.localStorage.getItem(storageKey)
+    const parsed: unknown = stored ? JSON.parse(stored) : []
 
+    if (!Array.isArray(parsed)) return []
+
+    return parsed.filter(
+      (id): id is string =>
+        typeof id === 'string' && cities.some((city) => city.id === id),
+    )
+  } catch {
+    return []
+  }
+}
+
+function BookmarkIcon({ filled }: { filled: boolean }) {
   return (
-    <>
-      <section id="center">
-        <div className="hero">
-          <img src={heroImg} className="base" width="170" height="179" alt="" />
-          <img src={reactLogo} className="framework" alt="React logo" />
-          <img src={viteLogo} className="vite" alt="Vite logo" />
-        </div>
-        <div>
-          <h1>Get started</h1>
-          <p>
-            Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
-          </p>
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="M6.5 4.8c0-.7.5-1.3 1.2-1.3h8.6c.7 0 1.2.6 1.2 1.3v16l-5.5-3.5-5.5 3.5v-16Z"
+        fill={filled ? 'currentColor' : 'none'}
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+function CityCard({
+  city,
+  saved,
+  onToggleSaved,
+}: {
+  city: City
+  saved: boolean
+  onToggleSaved: (cityId: string) => void
+}) {
+  return (
+    <li className="city-card" id={city.id}>
+      <img
+        className="city-image"
+        src={city.image}
+        alt={city.imageAlt}
+        loading="lazy"
+      />
+      <div className="city-content">
+        <div className="city-title-row">
+          <div>
+            <p className="city-country">
+              {city.country} <span>·</span> {city.continent}
+            </p>
+            <h3>{city.name}</h3>
+          </div>
+          <button
+            className="save-button"
+            type="button"
+            aria-label={`${saved ? 'Remove' : 'Save'} ${city.name} ${saved ? 'from' : 'to'} saved cities`}
+            aria-pressed={saved}
+            onClick={() => onToggleSaved(city.id)}
+          >
+            <BookmarkIcon filled={saved} />
+          </button>
         </div>
-        <button
-          type="button"
-          className="counter"
-          onClick={() => setCount((count) => count + 1)}
-        >
-          Count is {count}
-        </button>
-      </section>
-
-      <div className="ticks"></div>
-
-      <section id="next-steps">
-        <div id="docs">
-          <svg className="icon" role="presentation" aria-hidden="true">
-            <use href="/icons.svg#documentation-icon"></use>
-          </svg>
-          <h2>Documentation</h2>
-          <p>Your questions, answered</p>
-          <ul>
-            <li>
-              <a href="https://vite.dev/" target="_blank">
-                <img className="logo" src={viteLogo} alt="" />
-                Explore Vite
-              </a>
-            </li>
-            <li>
-              <a href="https://react.dev/" target="_blank">
-                <img className="button-icon" src={reactLogo} alt="" />
-                Learn more
-              </a>
-            </li>
-          </ul>
+        <p className="city-description">{city.description}</p>
+        <div className="city-meta">
+          <span className="rating">
+            <span aria-hidden="true">★</span> {city.rating}{' '}
+            <span className="rating-count">({city.reviews})</span>
+          </span>
+          <span className="meta-divider" />
+          <span>{city.population}</span>
+          <span className="meta-divider" />
+          <span>{city.elevation}</span>
         </div>
-        <div id="social">
-          <svg className="icon" role="presentation" aria-hidden="true">
-            <use href="/icons.svg#social-icon"></use>
-          </svg>
-          <h2>Connect with us</h2>
-          <p>Join the Vite community</p>
-          <ul>
-            <li>
-              <a href="https://github.com/vitejs/vite" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#github-icon"></use>
-                </svg>
-                GitHub
-              </a>
-            </li>
-            <li>
-              <a href="https://chat.vite.dev/" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#discord-icon"></use>
-                </svg>
-                Discord
-              </a>
-            </li>
-            <li>
-              <a href="https://x.com/vite_js" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#x-icon"></use>
-                </svg>
-                X.com
-              </a>
-            </li>
-            <li>
-              <a href="https://bsky.app/profile/vite.dev" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#bluesky-icon"></use>
-                </svg>
-                Bluesky
+        <a className="details-link" href={`#${city.id}`}>
+          View city details <span aria-hidden="true">→</span>
+        </a>
+      </div>
+    </li>
+  )
+}
+
+function App() {
+  const [savedCities, setSavedCities] = useState<string[]>(readSavedCities)
+  const [activeView, setActiveView] = useState<'home' | 'saved'>('home')
+
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(storageKey, JSON.stringify(savedCities))
+    } catch {
+      // Bookmarks remain available for this session if browser storage is disabled.
+    }
+  }, [savedCities])
+
+  const toggleSavedCity = (cityId: string) => {
+    setSavedCities((current) =>
+      current.includes(cityId)
+        ? current.filter((savedId) => savedId !== cityId)
+        : [...current, cityId],
+    )
+  }
+
+  const visibleCities =
+    activeView === 'saved'
+      ? cities.filter((city) => savedCities.includes(city.id))
+      : cities
+  const isSavedView = activeView === 'saved'
+
+  return (
+    <>
+      <header className="site-header">
+        <a className="brand" href="#top" aria-label="Country Boys home">
+          <span className="brand-mark" aria-hidden="true">
+            <svg viewBox="0 0 40 40" fill="none">
+              <circle cx="20" cy="20" r="17" stroke="currentColor" strokeWidth="1.7" />
+              <path d="m25.8 13.8-3.1 9-8.5 3.4 3.2-9 8.4-3.4Z" fill="currentColor" />
+              <circle cx="20" cy="20" r="1.5" fill="#F5F7F4" />
+            </svg>
+          </span>
+          <span>Country Boys<span className="brand-period">.</span></span>
+        </a>
+
+        <nav className="main-nav" aria-label="Main navigation">
+          <button
+            className={`nav-link${!isSavedView ? ' nav-link-active' : ''}`}
+            type="button"
+            aria-current={!isSavedView ? 'page' : undefined}
+            onClick={() => setActiveView('home')}
+          >
+            Home
+          </button>
+          <a className="nav-link" href="#map-preview">Map</a>
+          <button
+            className={`nav-link${isSavedView ? ' nav-link-active' : ''}`}
+            type="button"
+            aria-current={isSavedView ? 'page' : undefined}
+            onClick={() => setActiveView('saved')}
+          >
+            Saved{savedCities.length > 0 && <span className="saved-count">{savedCities.length}</span>}
+          </button>
+        </nav>
+
+        <a className="login-link" href="#login">
+          <span className="login-icon" aria-hidden="true">
+            <svg viewBox="0 0 20 20" fill="none">
+              <circle cx="10" cy="6.2" r="3" stroke="currentColor" strokeWidth="1.5" />
+              <path d="M4.3 16.4c.4-2.7 2.7-4.4 5.7-4.4s5.3 1.7 5.7 4.4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+            </svg>
+          </span>
+          Log in
+        </a>
+      </header>
+
+      <main id="top" className="page-shell">
+        <section className="intro" id="discover" aria-labelledby="page-title">
+          <div className="intro-copy">
+            <p className="eyebrow"><span className="eyebrow-dot" />THE WORLD IS CLOSER THAN YOU THINK</p>
+            <h1 id="page-title">Find the city that<br /><span>speaks to you.</span></h1>
+            <p className="intro-description">From quiet coastal towns to lively capitals. Your next discovery starts here.</p>
+          </div>
+          <div className="intro-image" role="img" aria-label="Colorful buildings and waterfront in Lisbon">
+            <span className="image-caption"><span className="caption-dot" />Lisbon, Portugal</span>
+          </div>
+        </section>
+
+        <form className="search-form" action="#cities" method="get" role="search">
+          <label className="search-field" htmlFor="city-search">
+            <svg className="search-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <circle cx="10.8" cy="10.8" r="6.8" stroke="currentColor" strokeWidth="1.8" />
+              <path d="m16 16 4.2 4.2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+            </svg>
+            <span className="visually-hidden">Search for a city or country</span>
+            <input id="city-search" name="q" type="search" placeholder="Search for a city, country, or feeling …" />
+            <kbd aria-hidden="true">⌘ K</kbd>
+          </label>
+          <button className="search-button" type="submit">Search cities</button>
+        </form>
+
+        <div className={`explore-layout${isSavedView ? ' saved-view' : ''}`} id="cities">
+          {!isSavedView && (
+            <aside className="filter-panel" aria-labelledby="filter-title">
+              <div className="filter-heading">
+                <h2 id="filter-title">Filters</h2>
+                <a href="#discover" className="reset-link">Reset</a>
+              </div>
+              <fieldset className="filter-group">
+                <legend>Continent</legend>
+                <label className="check-option"><input type="checkbox" name="region" value="europe" defaultChecked /><span className="checkmark" aria-hidden="true" /><span>Europe</span><span className="option-count">8,420</span></label>
+                <label className="check-option"><input type="checkbox" name="region" value="asia" /><span className="checkmark" aria-hidden="true" /><span>Asia</span><span className="option-count">12,560</span></label>
+                <label className="check-option"><input type="checkbox" name="region" value="africa" /><span className="checkmark" aria-hidden="true" /><span>Africa</span><span className="option-count">5,180</span></label>
+                <label className="check-option"><input type="checkbox" name="region" value="north-america" /><span className="checkmark" aria-hidden="true" /><span>North America</span><span className="option-count">4,280</span></label>
+                <label className="check-option"><input type="checkbox" name="region" value="south-america" /><span className="checkmark" aria-hidden="true" /><span>South America</span><span className="option-count">3,640</span></label>
+              </fieldset>
+              <fieldset className="filter-group population-group">
+                <legend>Population</legend>
+                <label className="select-label" htmlFor="population">Choose a range</label>
+                <select id="population" name="population">
+                  <option>Any population</option>
+                  <option>Under 100,000</option>
+                  <option>100,000–1 million</option>
+                  <option>Over 1 million</option>
+                </select>
+              </fieldset>
+              <fieldset className="filter-group last-filter-group">
+                <legend>City type</legend>
+                <label className="check-option"><input type="checkbox" name="capital" value="true" /><span className="checkmark" aria-hidden="true" /><span>Capital city</span><span className="option-count">195</span></label>
+              </fieldset>
+              <a className="map-promo" href="#map-preview">
+                <span className="map-promo-icon" aria-hidden="true">
+                  <svg viewBox="0 0 24 24" fill="none">
+                    <path d="m3 6 6-3 6 3 6-3v15l-6 3-6-3-6 3V6Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+                    <path d="M9 3v15m6-12v15" stroke="currentColor" strokeWidth="1.5" />
+                  </svg>
+                </span>
+                <span className="map-promo-text"><strong>Explore the map</strong><span>Find cities around the world</span></span>
+                <span className="map-arrow" aria-hidden="true">↗</span>
               </a>
-            </li>
-          </ul>
+            </aside>
+          )}
+
+          <section className="results-section" aria-labelledby="results-title" aria-live="polite">
+            <div className="results-topline">
+              <div>
+                <p className="results-kicker">{isSavedView ? 'YOUR BOOKMARKS' : 'YOUR NEXT DESTINATION'}</p>
+                <h2 id="results-title">
+                  {isSavedView ? 'Saved cities' : 'Cities to explore'}{' '}
+                  <span className="result-count">{isSavedView ? savedCities.length : '24,080'}</span>
+                </h2>
+              </div>
+              {!isSavedView && (
+                <label className="sort-control" htmlFor="sort-by">
+                  <span>Sort by</span>
+                  <select id="sort-by" name="sort">
+                    <option>Recommended</option>
+                    <option>Largest population</option>
+                    <option>Highest rated</option>
+                    <option>Alphabetical</option>
+                  </select>
+                </label>
+              )}
+            </div>
+
+            {!isSavedView && (
+              <div className="active-filters" aria-label="Active filters">
+                <span className="filter-chip">Europe <span aria-hidden="true">×</span></span>
+                <a className="clear-filters" href="#discover">Clear all</a>
+              </div>
+            )}
+
+            {visibleCities.length > 0 ? (
+              <ol className="city-list" aria-label={isSavedView ? 'Saved cities' : 'City results'}>
+                {visibleCities.map((city) => (
+                  <CityCard
+                    key={city.id}
+                    city={city}
+                    saved={savedCities.includes(city.id)}
+                    onToggleSaved={toggleSavedCity}
+                  />
+                ))}
+              </ol>
+            ) : (
+              <div className="empty-state">
+                <span className="empty-bookmark" aria-hidden="true"><BookmarkIcon filled={false} /></span>
+                <h3>No saved cities yet</h3>
+                <p>Save a city with the bookmark icon and it will appear here.</p>
+                <button type="button" onClick={() => setActiveView('home')}>Explore cities</button>
+              </div>
+            )}
+
+            {visibleCities.length > 0 && (
+              <div className="results-footer">
+                <span>{isSavedView ? `${visibleCities.length} saved ${visibleCities.length === 1 ? 'city' : 'cities'}` : 'Showing 3 of 24,080 cities'}</span>
+                {!isSavedView && <a href="#cities">Show more cities <span aria-hidden="true">↓</span></a>}
+              </div>
+            )}
+          </section>
         </div>
-      </section>
 
-      <div className="ticks"></div>
-      <section id="spacer"></section>
+        <section className="map-preview" id="map-preview" aria-labelledby="map-title">
+          <div className="map-preview-copy">
+            <p className="results-kicker">SEE THE WORLD FROM A NEW PERSPECTIVE</p>
+            <h2 id="map-title">Where will curiosity take you?</h2>
+            <p>Every pin is a city with a story of its own. Find it on the map.</p>
+            <a href="#cities" className="map-link">Open the world map <span aria-hidden="true">↗</span></a>
+          </div>
+          <div className="map-visual" role="img" aria-label="Stylized world map with marked cities">
+            <span className="map-land land-one" /><span className="map-land land-two" />
+            <span className="map-land land-three" /><span className="map-land land-four" />
+            <span className="map-pin pin-one" /><span className="map-pin pin-two" />
+            <span className="map-pin pin-three" /><span className="map-pin pin-four" />
+            <span className="map-pin pin-five" />
+          </div>
+        </section>
+
+        <footer className="site-footer">
+          <a className="footer-brand" href="#top">Country Boys<span>.</span></a>
+          <p>A world of places to discover.</p>
+          <span className="footer-note">Made for the curious</span>
+        </footer>
+      </main>
     </>
   )
 }
 
-export default App
+export default App
\ No newline at end of file
diff --git a/t20-project-2/src/index.css b/t20-project-2/src/index.css
index 5fb3313..9afc521 100644
--- a/t20-project-2/src/index.css
+++ b/t20-project-2/src/index.css
@@ -1,111 +1,263 @@
-:root {
-  --text: #6b6375;
-  --text-h: #08060d;
-  --bg: #fff;
-  --border: #e5e4e7;
-  --code-bg: #f4f3ec;
-  --accent: #aa3bff;
-  --accent-bg: rgba(170, 59, 255, 0.1);
-  --accent-border: rgba(170, 59, 255, 0.5);
-  --social-bg: rgba(244, 243, 236, 0.5);
-  --shadow:
-    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
-
-  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --mono: ui-monospace, Consolas, monospace;
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
 
-  font: 18px/145% var(--sans);
-  letter-spacing: 0.18px;
-  color-scheme: light dark;
-  color: var(--text);
-  background: var(--bg);
+:root {
+  font-family: 'DM Sans', sans-serif;
+  color: #1c2c28;
+  background: #f5f7f4;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
-  @media (max-width: 1024px) {
-    font-size: 16px;
-  }
+  --ink: #1c2c28;
+  --muted: #697671;
+  --soft-muted: #89938e;
+  --green: #21745c;
+  --green-dark: #185844;
+  --green-pale: #e9f1ec;
+  --line: #e4e9e5;
+  --paper: #fff;
+  --sun: #f0aa5d;
+  --serif: 'Manrope', sans-serif;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text: #9ca3af;
-    --text-h: #f3f4f6;
-    --bg: #16171d;
-    --border: #2e303a;
-    --code-bg: #1f2028;
-    --accent: #c084fc;
-    --accent-bg: rgba(192, 132, 252, 0.15);
-    --accent-border: rgba(192, 132, 252, 0.5);
-    --social-bg: rgba(47, 48, 58, 0.5);
-    --shadow:
-      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
-  }
+* { box-sizing: border-box; }
+html { min-width: 320px; scroll-behavior: smooth; }
+body { margin: 0; min-width: 320px; }
+button, input, select { font: inherit; }
+a { color: inherit; }
+button, a, input, select { -webkit-tap-highlight-color: transparent; }
+:focus-visible { outline: 3px solid #e29444; outline-offset: 3px; }
+.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
 
-  #social .button-icon {
-    filter: invert(1) brightness(2);
-  }
-}
-
-#root {
-  width: 1126px;
-  max-width: 100%;
-  margin: 0 auto;
-  text-align: center;
-  border-inline: 1px solid var(--border);
-  min-height: 100svh;
+.site-header {
+  height: 76px;
+  padding: 0 max(32px, calc((100vw - 1260px) / 2));
   display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+  background: rgba(255,255,255,.94);
+  border-bottom: 1px solid #e8ece8;
 }
+.brand, .footer-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font: 800 23px/1 var(--serif); letter-spacing: 0; }
+.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; color: var(--green); }
+.brand-mark svg { width: 33px; height: 33px; }
+.brand-period, .footer-brand span { color: #e29a4d; }
+.main-nav { height: 100%; display: flex; align-items: center; gap: 38px; margin-left: -28px; }
+.nav-link { position: relative; height: 100%; display: inline-flex; align-items: center; color: #66716c; font-size: 14px; text-decoration: none; }
+.main-nav button { padding: 0; border: 0; background: transparent; cursor: pointer; }
+.nav-link:hover, .nav-link-active { color: var(--green-dark); }
+.nav-link-active { font-weight: 700; }
+.nav-link-active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--green); }
+.saved-count { min-width: 17px; height: 17px; display: inline-grid; place-items: center; margin-left: 6px; padding: 0 4px; border-radius: 9px; background: #e9f1ec; color: var(--green-dark); font-size: 9px; font-weight: 700; }
+.login-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border: 1px solid #dce4df; border-radius: 6px; background: #fff; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; transition: border-color .2s, background-color .2s; }
+.login-link:hover { border-color: #a7bdb1; background: #f8faf8; }
+.login-icon, .login-icon svg { display: block; width: 18px; height: 18px; }
 
-body {
-  margin: 0;
-}
+.page-shell { width: min(1184px, calc(100% - 64px)); margin: 0 auto; }
+.intro { position: relative; min-height: 230px; margin-top: 34px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; }
+.intro-copy { position: relative; z-index: 1; padding: 15px 0 19px; }
+.eyebrow, .results-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: 1.45px; }
+.eyebrow-dot, .caption-dot { width: 7px; height: 7px; border-radius: 50%; background: #e5a151; }
+h1, h2, h3, p { margin-top: 0; }
+h1 { margin-bottom: 10px; color: var(--ink); font: 700 42px/1.15 var(--serif); letter-spacing: 0; }
+h1 span { color: var(--green); }
+.intro-description { margin: 0; color: #697671; font-size: 14px; }
+.intro-image { position: absolute; top: 0; right: 0; width: 45%; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #f5f7f4 0%, rgba(245,247,244,.08) 37%, rgba(22,44,36,.03) 100%), url('https://images.unsplash.com/photo-1555881400-74d7acaacd8b?auto=format&fit=crop&w=1100&q=82') center 48% / cover; }
+.image-caption { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; color: white; background: rgba(23,43,36,.74); border: 1px solid rgba(255,255,255,.26); border-radius: 4px; font-size: 10px; font-weight: 600; }
+.caption-dot { background: #f6bd76; }
 
-h1,
-h2 {
-  font-family: var(--heading);
-  font-weight: 500;
-  color: var(--text-h);
-}
+.search-form { position: relative; z-index: 2; display: flex; gap: 10px; max-width: 785px; margin: 0 0 42px; padding: 8px; background: white; border: 1px solid #e2e9e3; border-radius: 7px; box-shadow: 0 8px 22px rgba(38,67,53,.06); }
+.search-field { min-width: 0; min-height: 44px; flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 11px; }
+.search-icon { width: 21px; height: 21px; flex: 0 0 auto; color: var(--green); }
+.search-field input { width: 100%; min-width: 0; height: 42px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 13px; }
+.search-field input::placeholder { color: #929b96; opacity: 1; }
+.search-field:focus-within { outline: 2px solid #d29657; outline-offset: 2px; border-radius: 3px; }
+.search-field kbd { flex: 0 0 auto; padding: 3px 6px; border: 1px solid #e6eae7; border-radius: 3px; color: #808a85; font: 10px 'DM Sans', sans-serif; }
+.search-button { flex: 0 0 auto; min-height: 44px; padding: 0 20px; border: 0; border-radius: 5px; background: var(--green); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .2s; }
+.search-button:hover { background: var(--green-dark); }
 
-h1 {
-  font-size: 56px;
-  letter-spacing: -1.68px;
-  margin: 32px 0;
-  @media (max-width: 1024px) {
-    font-size: 36px;
-    margin: 20px 0;
-  }
-}
-h2 {
-  font-size: 24px;
-  line-height: 118%;
-  letter-spacing: -0.24px;
-  margin: 0 0 8px;
-  @media (max-width: 1024px) {
-    font-size: 20px;
-  }
+.explore-layout { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 42px; align-items: start; }
+.filter-panel { padding: 0 22px 0 0; border-right: 1px solid var(--line); }
+.filter-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
+.filter-heading h2 { margin: 0; color: var(--ink); font: 700 17px var(--serif); }
+.reset-link, .clear-filters { color: var(--green); font-size: 11px; font-weight: 600; text-decoration: none; }
+.reset-link:hover, .clear-filters:hover { text-decoration: underline; }
+.filter-group { min-width: 0; margin: 0; padding: 20px 0 17px; border: 0; border-bottom: 1px solid var(--line); }
+.filter-group legend { margin-bottom: 14px; padding: 0; color: #31433b; font-size: 12px; font-weight: 700; }
+.check-option { position: relative; min-height: 31px; display: flex; align-items: center; gap: 9px; color: #53615b; font-size: 11px; cursor: pointer; }
+.check-option input { position: absolute; width: 17px; height: 17px; margin: 0; opacity: 0; cursor: pointer; }
+.checkmark { width: 16px; height: 16px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid #cbd5ce; border-radius: 3px; background: white; }
+.check-option input:checked + .checkmark { border-color: var(--green); background: var(--green); }
+.check-option input:checked + .checkmark::after { content: ''; width: 7px; height: 4px; margin-top: -2px; border: solid white; border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); }
+.check-option input:focus-visible + .checkmark { outline: 3px solid #e29444; outline-offset: 2px; }
+.option-count { margin-left: auto; color: #929c96; font-size: 10px; font-variant-numeric: tabular-nums; }
+.population-group { padding-bottom: 20px; }
+.population-group legend { margin-bottom: 8px; }
+.select-label { display: block; margin-bottom: 7px; color: #758079; font-size: 10px; }
+.filter-group select, .sort-control select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='m3 4.5 3 3 3-3' stroke='%23697671' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
+.filter-group select { width: 100%; height: 35px; padding: 0 29px 0 10px; border: 1px solid #dce4de; border-radius: 4px; color: #52615a; background-color: white; font-size: 10px; }
+.last-filter-group { padding: 20px 0 15px; }
+.last-filter-group legend { margin-bottom: 5px; }
+.map-promo { display: flex; align-items: center; gap: 11px; margin-top: 23px; padding: 13px 11px; border: 1px solid #e0e8e1; border-radius: 5px; background: #edf3ee; text-decoration: none; transition: border-color .2s, transform .2s; }
+.map-promo:hover { border-color: #a8c2b1; transform: translateY(-1px); }
+.map-promo-icon { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 4px; background: #dce9df; color: var(--green); }
+.map-promo-icon svg { width: 19px; height: 19px; }
+.map-promo-text { display: grid; gap: 3px; }
+.map-promo-text strong { color: #2d4539; font-size: 10px; }
+.map-promo-text span { color: #75827b; font-size: 9px; }
+.map-arrow { margin-left: auto; color: var(--green); font-size: 16px; }
+
+.results-section { min-width: 0; }
+.results-topline { min-height: 52px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
+.results-kicker { margin-bottom: 7px; font-size: 9px; letter-spacing: 1.2px; }
+.results-topline h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; color: var(--ink); font: 700 20px/1.25 var(--serif); letter-spacing: 0; }
+.result-count { padding: 4px 7px; border-radius: 3px; background: #e9f1ec; color: #4b6a5b; font: 600 9px 'DM Sans', sans-serif; }
+.sort-control { display: flex; align-items: center; gap: 9px; color: #87918b; font-size: 10px; white-space: nowrap; }
+.sort-control select { height: 33px; min-width: 119px; padding: 0 26px 0 10px; border: 1px solid #e1e6e2; border-radius: 4px; color: #394b42; background-color: white; font-size: 10px; }
+.active-filters { min-height: 50px; display: flex; align-items: center; gap: 10px; }
+.filter-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid #d8e4dc; border-radius: 3px; background: #edf3ee; color: #42614f; font-size: 10px; }
+.filter-chip span { color: #658270; font-size: 14px; line-height: 10px; }
+
+.city-list { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
+.city-card { min-height: 174px; display: grid; grid-template-columns: 198px minmax(0, 1fr); overflow: hidden; border: 1px solid #e5e9e5; border-radius: 6px; background: white; transition: border-color .2s, box-shadow .2s; }
+.city-card:hover { border-color: #c8d7cd; box-shadow: 0 7px 18px rgba(38,67,53,.06); }
+.city-image { width: 100%; height: 100%; min-height: 174px; object-fit: cover; background: #e5ebe6; }
+.city-content { min-width: 0; padding: 15px 17px 12px 19px; }
+.city-title-row { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
+.city-country { margin-bottom: 4px; color: #738078; font-size: 8px; font-weight: 700; letter-spacing: 1.05px; }
+.city-country span { padding: 0 3px; color: #d09a5e; }
+.city-title-row h3 { margin: 0; color: #20342b; font: 700 19px/1.2 var(--serif); letter-spacing: 0; }
+.save-button { width: 30px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid #e5eae6; border-radius: 4px; background: white; color: #75827b; cursor: pointer; transition: color .2s, border-color .2s; }
+.save-button:hover { color: var(--green); border-color: #9cb5a5; }
+.save-button[aria-pressed="true"] { color: var(--green); border-color: #c6d8cb; background: #edf4ef; }
+.save-button svg { width: 17px; height: 17px; }
+.city-description { margin: 10px 0 12px; color: #68756e; font-size: 10px; line-height: 1.5; }
+.city-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #67746d; font-size: 9px; font-variant-numeric: tabular-nums; }
+.rating { color: #314a3c; font-weight: 700; }
+.rating > span { color: #e7a44e; }
+.rating-count { color: #8a948e; font-weight: 400; }
+.meta-divider { width: 3px; height: 3px; border-radius: 50%; background: #bbc5bd; }
+.details-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--green); font-size: 10px; font-weight: 700; text-decoration: none; }
+.details-link span, .map-link span { transition: transform .2s; }
+.details-link:hover { text-decoration: underline; }
+.details-link:hover span { transform: translateX(3px); }
+.results-footer { display: flex; align-items: center; justify-content: space-between; padding: 17px 2px 0; color: #88928c; font-size: 10px; }
+.results-footer a { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-weight: 700; text-decoration: none; }
+.results-footer a:hover { text-decoration: underline; }
+.saved-view { grid-template-columns: minmax(0, 1fr); }
+.empty-state { display: grid; justify-items: center; padding: 42px 20px; border: 1px dashed #d5dfd7; border-radius: 6px; background: rgba(255,255,255,.55); text-align: center; }
+.empty-bookmark { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 50%; background: #e9f1ec; color: var(--green); }
+.empty-bookmark svg { width: 20px; height: 20px; }
+.empty-state h3 { margin: 0 0 5px; color: var(--ink); font: 700 16px var(--serif); }
+.empty-state p { margin: 0 0 15px; color: var(--muted); font-size: 11px; }
+.empty-state button { padding: 9px 13px; border: 0; border-radius: 4px; background: var(--green); color: white; font-size: 11px; font-weight: 700; cursor: pointer; }
+.empty-state button:hover { background: var(--green-dark); }
+
+.map-preview { min-height: 235px; display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 30px; margin-top: 58px; padding: 28px 32px; overflow: hidden; border-radius: 7px; background: #eaf1eb; }
+.map-preview-copy .results-kicker { margin-bottom: 10px; }
+.map-preview-copy h2 { max-width: 350px; margin-bottom: 8px; color: #20372c; font: 700 22px/1.25 var(--serif); }
+.map-preview-copy > p:not(.results-kicker) { margin-bottom: 15px; color: #6a786f; font-size: 11px; line-height: 1.5; }
+.map-link { display: inline-flex; align-items: center; gap: 8px; color: var(--green-dark); font-size: 11px; font-weight: 700; text-decoration: none; }
+.map-link:hover { text-decoration: underline; }
+.map-link:hover span { transform: translate(2px,-2px); }
+.map-visual { position: relative; height: 176px; overflow: hidden; background-image: radial-gradient(#b9cabe 0.8px, transparent .8px); background-position: 0 0; background-size: 12px 12px; }
+.map-land { position: absolute; display: block; background: #b8ccb9; opacity: .88; filter: drop-shadow(0 2px 2px rgba(81,119,92,.08)); }
+.land-one { top: 19%; left: 8%; width: 28%; height: 47%; border-radius: 55% 32% 49% 39% / 31% 40% 57% 55%; transform: rotate(-15deg); clip-path: polygon(0 20%,22% 0,48% 12%,63% 4%,100% 23%,82% 47%,91% 66%,64% 100%,42% 75%,18% 82%,4% 56%); }
+.land-two { top: 21%; left: 37%; width: 16%; height: 30%; border-radius: 42% 58% 35% 65%; transform: rotate(9deg); clip-path: polygon(9% 12%,44% 0,71% 15%,100% 44%,73% 72%,62% 100%,39% 84%,22% 64%,0 46%); }
+.land-three { top: 22%; right: 8%; width: 38%; height: 48%; border-radius: 50% 47% 35% 55% / 36% 40% 59% 51%; transform: rotate(7deg); clip-path: polygon(5% 18%,30% 7%,52% 0,83% 12%,100% 31%,88% 57%,65% 49%,58% 81%,39% 100%,23% 79%,18% 52%,0 42%); }
+.land-four { bottom: 3%; left: 45%; width: 16%; height: 31%; border-radius: 44% 50% 59% 43%; transform: rotate(-14deg); clip-path: polygon(15% 0,74% 9%,100% 38%,76% 66%,64% 100%,42% 80%,33% 52%,0 33%); }
+.map-pin { position: absolute; z-index: 1; width: 10px; height: 10px; border: 2px solid white; border-radius: 50%; background: #df9251; box-shadow: 0 1px 5px rgba(39,69,49,.28); }
+.pin-one { top: 39%; left: 27%; }.pin-two { top: 31%; left: 48%; }.pin-three { top: 45%; left: 55%; }.pin-four { top: 37%; right: 22%; }.pin-five { bottom: 22%; left: 49%; }
+.site-footer { min-height: 83px; display: flex; align-items: center; gap: 17px; margin-top: 25px; border-top: 1px solid var(--line); }
+.footer-brand { font-size: 16px; }
+.site-footer p { margin: 0; color: #87928b; font-size: 10px; }
+.footer-note { margin-left: auto; color: #87928b; font-size: 10px; }
+
+@media (min-width: 1440px) { .page-shell { width: min(1184px, calc(100% - 96px)); } }
+@media (max-width: 820px) {
+  .site-header { height: 68px; padding: 0 24px; }
+  .main-nav { gap: 23px; margin-left: 0; }
+  .page-shell { width: calc(100% - 48px); }
+  .intro { min-height: 220px; }
+  .intro-image { width: 48%; opacity: .88; }
+  .explore-layout { grid-template-columns: 195px minmax(0,1fr); gap: 25px; }
+  .filter-panel { padding-right: 16px; }
+  .city-card { grid-template-columns: 150px minmax(0,1fr); }
+  .city-content { padding: 13px 12px; }
+  .city-meta { gap: 6px; }
+  .city-description { margin: 8px 0 10px; }
+  .map-preview { padding: 25px; gap: 16px; }
 }
-p {
-  margin: 0;
+@media (max-width: 620px) {
+  .site-header { height: 62px; padding: 0 18px; }
+  .brand { gap: 6px; font-size: 20px; }
+  .brand-mark, .brand-mark svg { width: 29px; height: 29px; }
+  .main-nav { gap: 16px; }
+  .nav-link { font-size: 11px; }
+  .login-link { width: 34px; height: 34px; justify-content: center; padding: 0; font-size: 0; }
+  .login-icon, .login-icon svg { width: 19px; height: 19px; }
+  .page-shell { width: calc(100% - 36px); }
+  .intro { min-height: 246px; align-items: end; margin-top: 18px; }
+  .intro-copy { padding: 0 0 22px; }
+  .intro-image { top: 0; right: -18px; width: 78%; height: 164px; border-radius: 5px 0 0 5px; opacity: .72; }
+  .intro-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #f5f7f4 0%, rgba(245,247,244,.1) 72%); }
+  .image-caption { z-index: 1; right: 28px; bottom: 10px; padding: 5px 8px; font-size: 9px; }
+  .eyebrow { margin-bottom: 8px; font-size: 8px; letter-spacing: 1.1px; }
+  h1 { margin-bottom: 7px; font-size: 34px; }
+  .intro-description { max-width: 310px; font-size: 11px; }
+  .search-form { gap: 5px; margin-bottom: 31px; padding: 6px; }
+  .search-field { gap: 8px; padding: 0 6px; }
+  .search-field input { font-size: 11px; }
+  .search-field input::placeholder { text-overflow: ellipsis; }
+  .search-field kbd { display: none; }
+  .search-button { min-height: 40px; padding: 0 11px; font-size: 10px; }
+  .explore-layout { display: flex; flex-direction: column; gap: 26px; }
+  .filter-panel { width: 100%; padding: 0; border-right: 0; }
+  .filter-heading { padding-bottom: 12px; }
+  .filter-group { padding: 14px 0 11px; }
+  .filter-group legend { margin-bottom: 9px; }
+  .filter-group:not(.population-group):not(.last-filter-group) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 12px; }
+  .filter-group:not(.population-group):not(.last-filter-group) legend { grid-column: 1 / -1; }
+  .check-option { min-height: 29px; }
+  .population-group { display: inline-block; width: calc(62% - 8px); vertical-align: top; border: 0; }
+  .last-filter-group { display: inline-block; width: 38%; vertical-align: top; border: 0; padding-top: 14px; }
+  .last-filter-group .check-option { align-items: start; }
+  .last-filter-group .option-count { display: none; }
+  .filter-group select { height: 33px; }
+  .map-promo { display: none; }
+  .results-topline { align-items: start; }
+  .results-topline h2 { gap: 7px; font-size: 18px; }
+  .sort-control { flex-direction: column; align-items: end; gap: 4px; font-size: 9px; }
+  .sort-control select { min-width: 105px; height: 30px; font-size: 9px; }
+  .active-filters { min-height: 43px; }
+  .city-list { gap: 11px; }
+  .city-card { grid-template-columns: 112px minmax(0,1fr); min-height: 158px; }
+  .city-image { min-height: 158px; }
+  .city-content { padding: 11px 10px; }
+  .city-title-row h3 { font-size: 16px; }
+  .city-country { font-size: 7px; letter-spacing: .7px; }
+  .save-button { width: 26px; height: 26px; }
+  .city-description { margin: 7px 0 8px; font-size: 9px; }
+  .city-meta { column-gap: 5px; row-gap: 4px; font-size: 8px; }
+  .meta-divider { width: 2px; height: 2px; }
+  .details-link { margin-top: 9px; font-size: 9px; }
+  .results-footer { font-size: 9px; }
+  .map-preview { min-height: 0; grid-template-columns: 1fr; gap: 12px; margin-top: 38px; padding: 20px; }
+  .map-preview-copy h2 { font-size: 19px; }
+  .map-preview-copy > p:not(.results-kicker) { margin-bottom: 10px; }
+  .map-visual { height: 130px; }
+  .site-footer { min-height: 68px; gap: 10px; }
+  .site-footer p, .footer-note { font-size: 8px; }
 }
-
-code,
-.counter {
-  font-family: var(--mono);
-  display: inline-flex;
-  border-radius: 4px;
-  color: var(--text-h);
+@media (max-width: 390px) {
+  .main-nav { gap: 11px; }
+  .nav-link { font-size: 10px; }
+  .city-card { grid-template-columns: 94px minmax(0,1fr); }
+  .city-content { padding: 9px 8px; }
+  .city-description { line-height: 1.35; }
+  .city-meta { font-size: 7px; }
+  .sort-control { max-width: 100px; }
 }
-
-code {
-  font-size: 15px;
-  line-height: 135%;
-  padding: 4px 8px;
-  background: var(--code-bg);
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
 }