:root{
  --cobalt:#0047AB;
  --cobalt-deep:#003580;
  --cream:#F3EEE0;
  --paper:#FBF8F2;
  --ink:#14213D;
  --ink-soft:#4A5670;
  --stone:#DCD5C4;
  --stone-line:#C9C0AA;
  --teal:#2E7D6B;
  --teal-bg:#E4EFEC;
  --ochre:#A66B1E;
  --ochre-bg:#F3E9D8;
  --mono:'IBM Plex Mono', monospace;
  --serif:'Fraunces', serif;
  --sans:'Inter', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}

/* ---------- NAV ---------- */
nav{ position: sticky; top:0; z-index:50; background: var(--paper); border-bottom: 1px solid var(--stone-line); }
nav .wrap{ display:flex; align-items:center; justify-content:space-between; height: 64px; }
.nav-mark{display:flex; align-items:center; gap:10px; text-decoration:none;}
.nav-mark svg{width:28px; height:28px;}
.nav-mark span{ font-family: var(--serif); font-size: 17px; font-weight:500; color: var(--ink); }
.nav-links{ position:relative; display:flex; gap:28px; }
.nav-item{ position:relative; }
.nav-item > a{ text-decoration:none; color: var(--ink-soft); transition: color .15s; cursor:pointer; font-family: var(--mono); font-size: 11px; letter-spacing:0.06em; text-transform:uppercase; }
.nav-item:hover > a{ color: var(--cobalt); }
.nav-dropdown{
  display:none; position:absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid var(--stone-line); border-radius: 6px;
  box-shadow: 0 10px 28px rgba(20,33,61,0.12); padding: 14px 18px; min-width: 190px; z-index: 60;
}
.nav-item:hover .nav-dropdown{ display:block; }
.nav-dropdown .region-group{ margin-bottom: 10px; }
.nav-dropdown .region-group:last-child{ margin-bottom: 0; }
.nav-dropdown .region-name{ font-family: var(--mono); font-size: 9.5px; letter-spacing:0.06em; text-transform:uppercase; color: var(--ink-soft); margin-bottom: 5px; }
.nav-dropdown a.sub-link{ display:block; text-decoration:none; color: var(--ink); font-family: var(--sans); font-size: 13.5px; padding: 4px 0; }
.nav-dropdown a.sub-link:hover{ color: var(--cobalt); }
.nav-simple a{ text-decoration:none; color: var(--ink-soft); font-family: var(--mono); font-size: 11px; letter-spacing:0.06em; text-transform:uppercase; }
.nav-simple a:hover{ color: var(--cobalt); }

/* ---------- HERO (homepage) ---------- */
.hero{ background: linear-gradient(180deg, var(--cobalt) 0%, var(--cobalt-deep) 100%); color: var(--cream); padding: 96px 0 84px; text-align:center; }
.hero .mark{width:70px; height:70px; margin: 0 auto 22px;}
.hero h1{ font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 6vw, 60px); letter-spacing: -0.5px; line-height: 1.05; }
.hero .tagline{ font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(16px, 2vw, 19px); color: #C9D8EA; margin-top: 12px; }
.hero p.sub{ max-width: 560px; margin: 24px auto 0; font-size: 15px; color: #D7E2EE; }
.hero .criteria{ display:flex; justify-content:center; gap: 28px; margin-top: 34px; flex-wrap: wrap; }
.hero .criteria div{ font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform:uppercase; color: #A9C1DC; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.25); max-width: 150px; }

/* ---------- PAGE HERO (subpages) ---------- */
.page-hero{ background: var(--cobalt-deep); color: var(--cream); padding: 56px 0 44px; text-align:center; }
.page-hero .eyebrow{ font-family: var(--mono); font-size: 11px; letter-spacing:0.08em; text-transform:uppercase; color: #8FB4E0; }
.page-hero h1{ font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4.5vw, 44px); margin-top: 10px; }
.page-hero p{ max-width: 560px; margin: 16px auto 0; font-size: 15px; color: #D7E2EE; }

/* ---------- INTRO / SECTION HEAD ---------- */
.intro{ padding: 64px 0 40px; text-align:center; }
.eyebrow{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform:uppercase; color: var(--cobalt); }
.intro h2{ font-family: var(--serif); font-weight: 500; font-size: 30px; max-width: 620px; margin: 14px auto 0; color: var(--ink); }
.intro p{ max-width: 520px; margin: 16px auto 0; color: var(--ink-soft); font-size: 15px; }

/* ---------- DESTINATION SELECTOR ---------- */
.destination-bar{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; padding: 4px 0 24px; }
.destination-bar select{ font-family: var(--mono); font-size: 12px; letter-spacing:0.03em; background: var(--paper); border: 1px solid var(--cobalt); color: var(--cobalt-deep); padding: 10px 14px; border-radius: 4px; cursor:pointer; min-width: 150px; }
.destination-bar select:disabled{ border-color: var(--stone-line); color: var(--ink-soft); cursor:default; }

/* ---------- FILTERS ---------- */
#filter-bar{ padding-bottom: 8px; }
.filter-group{ margin-bottom: 14px; }
.filter-group-label{ font-family: var(--mono); font-size: 10px; letter-spacing:0.08em; text-transform:uppercase; color: var(--ink-soft); text-align:center; margin-bottom: 10px; }
.filter-group.secondary{ opacity: 0.82; }
.filter-group.secondary .filter-btn{ font-size: 10px; padding: 7px 13px; }
.filter-group.secondary .filter-group-label{ font-size: 9.5px; }
.filters{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.filter-btn{ font-family: var(--mono); font-size: 11px; letter-spacing:0.05em; text-transform:uppercase; background: var(--paper); border: 1px solid var(--stone-line); color: var(--ink-soft); padding: 9px 16px; border-radius: 999px; cursor:pointer; transition: all .15s; }
.filter-btn:hover{ border-color: var(--cobalt); color: var(--cobalt); }
.filter-btn.active{ background: var(--cobalt); border-color: var(--cobalt); color: var(--cream); }

/* ---------- REGION SECTIONS ---------- */
.country-block{ padding: 8px 0 8px; }
.country-head{ display:flex; align-items:baseline; gap:14px; padding: 28px 0 6px; }
.country-head h2{ font-family: var(--serif); font-weight:500; font-size: 30px; }
.country-head .flag-count{ font-family: var(--mono); font-size: 11px; color: var(--ink-soft); letter-spacing:0.05em; text-transform:uppercase; }
.region{ padding: 8px 0 40px; }
.region-head{ display:flex; align-items:baseline; justify-content:space-between; border-bottom: 1px solid var(--stone-line); padding-bottom: 14px; margin-bottom: 20px; flex-wrap: wrap; gap: 8px; }
.region-head h3{ font-family: var(--serif); font-weight:500; font-size: 24px; }
.region-head .count{ font-family: var(--mono); font-size: 11px; color: var(--ink-soft); letter-spacing:0.05em; text-transform:uppercase; }
.subregion-head{ padding: 6px 0 4px; }
.subregion-head h4{ font-family: var(--mono); font-size: 12px; letter-spacing:0.06em; text-transform:uppercase; color: var(--cobalt); font-weight:500; }

/* ---------- CARDS ---------- */
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-bottom: 26px; }
.card{
  background: #fff; border: 1px solid var(--stone-line); border-radius: 4px; padding: 22px 22px 20px;
  display:flex; flex-direction:column; gap: 12px; transition: transform .15s, box-shadow .15s;
  text-decoration:none; color: var(--ink); cursor:pointer;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20,33,61,0.08); }
.card.has-photo{ padding-top: 0; overflow: hidden; }
.card-thumb{ width: calc(100% + 44px); margin: 0 -22px 4px; height: 190px; overflow: hidden; background: var(--cobalt-deep); display:flex; align-items:center; justify-content:center; }
.card-thumb img{ width: 100%; height: 100%; object-fit: contain; }
.card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.card h4{ font-family: var(--serif); font-weight:500; font-size: 19px; line-height:1.25; }
.card .town{ font-family: var(--mono); font-size: 10.5px; letter-spacing:0.05em; text-transform:uppercase; color: var(--ink-soft); margin-top: 4px; }
.card .hook{ font-size: 14px; color: var(--ink); line-height:1.5; }
.tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:6px; }
.tag{ font-family: var(--mono); font-size: 10px; letter-spacing:0.04em; text-transform:uppercase; padding: 4px 9px; border-radius: 999px; }
.tag.category{ background: var(--cream); color: var(--cobalt-deep); border: 1px solid var(--stone-line); }
.tag.coast-sandy{ background: var(--teal-bg); color: var(--teal); }
.tag.coast-rocky{ background: var(--ochre-bg); color: var(--ochre); }
.tag.coast-mixed{ background: #E7E1F5; color: #5B3FA6; }

/* ---------- HOTEL DETAIL PAGE ---------- */
.hotel-hero{ position: relative; height: 62vh; min-height: 380px; overflow: hidden; background: var(--cobalt-deep); }
.hotel-hero img{ width: 100%; height: 100%; object-fit: cover; }
.hotel-hero .placeholder{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.hotel-hero .placeholder svg{ width:70px; height:70px; }
.hotel-hero .placeholder div{ font-family: var(--mono); font-size: 11px; letter-spacing:0.05em; text-transform:uppercase; color: var(--cream); opacity:0.8; }
.hotel-hero::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,53,128,0.1) 0%, rgba(0,53,128,0.05) 40%, rgba(0,35,85,0.8) 100%); }
.hotel-hero-content{ position:absolute; left:0; right:0; bottom:0; padding: 0 28px 40px; max-width: 1080px; margin: 0 auto; color: var(--cream); }
.hotel-hero-eyebrow{ font-family: var(--mono); font-size: 11px; letter-spacing:0.08em; text-transform:uppercase; color: #C9D8EA; margin-bottom: 10px; }
.hotel-hero-content h1{ font-family: var(--serif); font-weight:500; font-size: clamp(30px, 5vw, 46px); letter-spacing: -0.5px; }
.hotel-hero-tags{ display:flex; gap:10px; margin-top: 16px; flex-wrap:wrap; }
.hotel-hero-tags .tag{ font-size: 10.5px; padding: 5px 11px; }
.hotel-hero-tags .tag.category{ background: var(--cream); color: var(--cobalt-deep); border:none; }

.detail-body{ padding: 48px 0; }
.detail-body .lede{ font-family: var(--serif); font-size: 20px; line-height:1.55; max-width: 660px; }
.back-link{ font-family: var(--mono); font-size: 11px; letter-spacing:0.05em; text-transform:uppercase; color: var(--ink-soft); text-decoration:none; display:inline-flex; align-items:center; gap:6px; margin-bottom: 20px; }
.back-link:hover{ color: var(--cobalt); }

.carousel{ display:flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; margin-top: 32px; }
.carousel .frame{ flex: 0 0 auto; width: 300px; height: 220px; border-radius: 4px; background: var(--cobalt-deep); overflow:hidden; display:flex; align-items:center; justify-content:center; cursor: zoom-in; }
.carousel img{ width: 100%; height: 100%; object-fit: cover; }

.book-btn{ display:inline-block; margin-top: 28px; font-family: var(--mono); font-size: 12px; letter-spacing:0.05em; text-transform:uppercase; background: var(--cobalt); color: var(--cream); padding: 13px 26px; border-radius: 4px; text-decoration:none; }
.book-btn:hover{ background: var(--cobalt-deep); }

/* ---------- LIGHTBOX ---------- */
.lightbox-overlay{ display:none; position: fixed; inset: 0; z-index: 200; background: rgba(8,16,32,0.88); align-items:center; justify-content:center; padding: 40px; cursor: zoom-out; }
.lightbox-overlay.open{ display:flex; }
.lightbox-overlay img{ max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.lightbox-close{ position: fixed; top: 20px; right: 24px; z-index: 201; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; border: none; font-size: 20px; cursor: pointer; display:flex; align-items:center; justify-content:center; }

/* ---------- GUIDES ---------- */
.guide-list{ display:flex; flex-direction:column; gap: 24px; padding-bottom: 60px; }
.guide-card{ display:block; text-decoration:none; color: var(--ink); background: #fff; border: 1px solid var(--stone-line); border-radius: 6px; padding: 26px 28px; transition: box-shadow .15s, transform .15s; }
.guide-card:hover{ box-shadow: 0 8px 22px rgba(20,33,61,0.08); transform: translateY(-2px); }
.guide-card .guide-eyebrow{ font-family: var(--mono); font-size: 10px; letter-spacing:0.06em; text-transform:uppercase; color: var(--ink-soft); }
.guide-card h3{ font-family: var(--serif); font-weight:500; font-size: 22px; margin-top: 8px; }
.guide-card p{ font-size: 14px; color: var(--ink-soft); margin-top: 10px; line-height:1.6; }

.guide-body{ max-width: 720px; margin: 0 auto; padding: 44px 28px 70px; }
.guide-body .guide-title{ font-family: var(--serif); font-weight:500; font-size: clamp(28px, 4.5vw, 40px); line-height:1.15; }
.guide-body .guide-meta{ font-family: var(--mono); font-size: 11px; letter-spacing:0.05em; text-transform:uppercase; color: var(--ink-soft); margin-top: 14px; }
.guide-body .guide-content{ margin-top: 32px; font-size: 16px; line-height:1.75; }
.guide-body .guide-content p{ margin-bottom: 20px; }
.guide-body .guide-content h2{ font-family: var(--serif); font-weight:500; font-size: 24px; margin: 36px 0 14px; }
.guide-body .guide-content a{ color: var(--cobalt); text-decoration: underline; text-decoration-color: var(--stone-line); }
.guide-body .guide-content a:hover{ text-decoration-color: var(--cobalt); }
.guide-pick{ background: var(--cream); border-radius: 6px; padding: 20px 22px; margin: 22px 0; }
.guide-pick .pick-number{ font-family: var(--mono); font-size: 10.5px; letter-spacing:0.06em; text-transform:uppercase; color: var(--cobalt); }
.guide-pick h3{ font-family: var(--serif); font-weight:500; font-size: 19px; margin-top: 6px; }
.guide-pick p{ font-size: 14px; color: var(--ink-soft); margin-top: 8px; margin-bottom:0; }
.guide-pick a.pick-link{ display:inline-block; margin-top: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing:0.05em; text-transform:uppercase; color: var(--cobalt-deep); text-decoration: none; }
.guide-pick a.pick-link:hover{ text-decoration: underline; }

/* ---------- ABOUT ---------- */
.about-body{ max-width: 680px; margin: 0 auto; padding: 48px 28px 70px; font-size: 16px; line-height:1.75; }
.about-body p{ margin-bottom: 20px; }
.about-body h2{ font-family: var(--serif); font-weight:500; font-size: 24px; margin: 32px 0 12px; }

/* ---------- FOOTER ---------- */
footer{ background: var(--cobalt-deep); color: #C9D8EA; padding: 56px 0 40px; margin-top: 40px; text-align:center; }
footer .mark{ width:50px; height:50px; margin: 0 auto 16px; }
footer .word{ font-family: var(--serif); font-size: 18px; color: var(--cream); }
footer .tag{ font-family: var(--serif); font-style:italic; font-size:13px; color:#9FB8D4; margin-top:6px; }
footer .footer-links{ display:flex; justify-content:center; gap:22px; margin-top: 22px; }
footer .footer-links a{ text-decoration:none; color:#C9D8EA; font-family: var(--mono); font-size: 11px; letter-spacing:0.05em; text-transform:uppercase; }
footer .footer-links a:hover{ color:#fff; }
footer .note{ font-family: var(--mono); font-size: 10.5px; color:#7994B8; margin-top:28px; letter-spacing:0.03em; }

@media (max-width: 640px){
  .hero{padding: 72px 0 60px;}
  .criteria{gap:18px;}
}