/* White paper and ocean ink. All controls stay visible before interaction. */
body { --ink:var(--catalog-ink); --muted:var(--catalog-muted); --line:var(--catalog-rule); --surface-air:var(--catalog-panel); --seafoam:var(--catalog-tint); background:var(--catalog-paper); }
.catalog-header { height:96px; }
.home-link { padding:12px 20px; border:1px solid var(--line); border-radius:30px; font-size:14px; transition:background .2s; }
.country-hero { height:min(660px,73svh); min-height:480px; border-radius:28px; isolation:isolate; }
.country-panorama { animation:panorama-in 1.4s var(--catalog-ease) both; }
.country-hero::after { background:linear-gradient(180deg,rgb(3 37 45 / .23),transparent 32%,rgb(3 37 45 / .3) 57%,rgb(3 37 45 / .78)); }
.hero-location { position:absolute; z-index:1; top:32px; inset-inline:40px; display:flex; justify-content:space-between; color:white; font-size:13px; letter-spacing:.03em; }
.country-heading { inset:auto 48px 40px; animation:heading-in .9s .15s var(--catalog-ease) both; }
.country-heading > p { font-size:12px; letter-spacing:.16em; margin:0 0 12px; }
.country-heading h1 { font-size:clamp(70px,10.5vw,150px); line-height:1.04; letter-spacing:-.055em; margin:0 0 26px; }
.country-bottom { align-items:center; justify-content:flex-start; gap:36px; }
.country-bottom .explore-hotels { order:-1; }
.country-bottom > span { font-size:17px; line-height:1.6; }
.country-bottom .explore-hotels { display:inline-flex; align-items:center; gap:28px; padding:16px 18px 16px 25px; border:0; border-radius:36px; background:white; color:var(--ink); text-decoration:none; transition:transform .3s,background .3s; }
.explore-hotels span { display:grid; place-items:center; width:32px; height:32px; background:var(--catalog-tint); border-radius:50%; font-size:13px; }
.collection { padding-block:88px 40px; }
.collection-heading { margin-bottom:40px; }
.eyebrow { font-size:12px; letter-spacing:.12em; margin:0 0 20px; }
.collection-heading h2 { font-size:clamp(38px,4.2vw,60px); line-height:1.08; letter-spacing:-.04em; }
.collection-heading > p { font-size:16px; line-height:1.75; margin:0 0 3px; }
.island-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.island-tabs button { background:transparent; border:1px solid var(--line); border-radius:28px; min-height:48px; padding:10px 23px; font-size:15px; transition:background .25s,color .25s,border-color .25s; }
.island-tabs button[aria-pressed=true] { background:var(--ink); border-color:var(--ink); color:white; }
.catalog-filters { grid-template-columns:1fr 280px; gap:24px; padding-block:20px; border-block:1px solid var(--line); margin:0; }
.search-field,.select-field { display:flex; align-items:center; gap:14px; min-height:40px; padding:0; background:transparent; border:0; border-radius:0; }
.search-field input { padding:8px; height:44px; }
.select-field { padding-left:24px; border-left:1px solid var(--line); }
.select-field > span { font-size:12px; }
.select-field select { padding-block:8px; }
.results-line { min-height:72px; margin:0; }
.results-line p { font-size:14px; }
.hotel-grid { gap:32px; }
.hotel-card { position:relative; background:var(--catalog-panel); border-radius:24px; padding:10px; transition:box-shadow .35s,transform .35s; }
.hotel-cover { border-radius:17px; aspect-ratio:1.52; background:var(--catalog-tint); }
.hotel-cover img { transition:transform .85s var(--catalog-ease); }
.photo-count { background:white; border-radius:24px; font-size:12px; }
.card-body { display:flex; flex-direction:column; flex-grow:1; padding:22px 18px 16px; }
.card-meta { margin:0 0 12px; font-size:13px; }
.hotel-card h3 { font-size:clamp(23px,2vw,29px); line-height:1.22; letter-spacing:-.03em; }
.hotel-title-button { text-decoration:none; }
/* Photo, title and action are independent links; typography cannot shrink their hit areas. */
.hotel-cover,.card-more { text-decoration:none; }
.hotel-card p { font-size:15px; line-height:1.7; margin:14px 0 24px; max-width:54ch; }
.card-bottom { gap:12px; padding-top:18px; border-top:1px solid var(--line); }
.card-score { font-size:12px; }
.card-score strong { display:block; font-size:18px; margin-bottom:2px; }
.card-more { display:inline-flex; align-items:center; justify-content:center; padding:12px 20px; border:1px solid var(--line); background:var(--catalog-tint); border-radius:30px; font-size:14px; white-space:nowrap; transition:background .3s,color .3s,border-color .3s; }
dialog { background:var(--catalog-panel); border-radius:28px; }
dialog[open] { animation:dialog-in .4s var(--catalog-ease) both; }
dialog::backdrop { background:rgb(6 28 33 / .68); }
dialog[open]::backdrop { animation:backdrop-in .3s ease-out both; }
.dialog-top { background:var(--catalog-panel); padding:16px 28px; }
#close-hotel { gap:16px; background:var(--catalog-tint); border-radius:24px; padding:6px 16px; font-size:14px; }
.hotel-detail { padding:0 28px 32px; }
.hotel-photo-stage { background:var(--catalog-tint); border-radius:18px; }
.detail-copy h2 { font-size:clamp(28px,2.5vw,36px); line-height:1.2; }
.hotel-description { font-size:17px; line-height:1.7; }
.review-detail { background:var(--catalog-tint); }
.photo-thumbnails button { transition:opacity .2s; }
.quiet-button { border-radius:28px; font-size:14px; }
@keyframes panorama-in { from { transform:scale(1.045); opacity:.65; } to { transform:scale(1); opacity:1; } }
@keyframes heading-in { from { transform:translateY(20px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes dialog-in { from { transform:translateY(16px) scale(.985); opacity:0; } to { transform:none; opacity:1; } }
@keyframes backdrop-in { from { opacity:0; } to { opacity:1; } }
@media(hover:hover) {
  .hotel-card:hover { box-shadow:var(--catalog-shadow); transform:translateY(-4px); }
  .hotel-card:hover .hotel-cover img { transform:scale(1.035); }
  .hotel-card:hover .card-more { background:var(--ink); border-color:var(--ink); color:white; }
  .island-tabs button:not([aria-pressed=true]):hover,.home-link:hover { background:var(--catalog-tint); }
  .explore-hotels:hover { transform:translateY(-3px); background:var(--catalog-tint); }
  .photo-thumbnails button:hover { opacity:1; }
}
.hotel-card:focus-within .card-more { background:var(--ink); color:white; }
@media(max-width:900px) {
  .country-heading { inset-inline:32px; }
  .collection-heading > p br { display:none; }
  .collection-heading > p { max-width:32ch; }
  .hotel-grid { gap:24px; }
  .card-body { padding:18px 12px 12px; }
  .card-bottom { align-items:start; flex-direction:column; }
  .card-more { width:100%; }
  .search-field { grid-column:auto; }
}
@media(max-width:600px) {
  .catalog-header { height:78px; }
  .catalog-brand { font-size:13px; }
  .catalog-brand img { width:34px; height:30px; }
  .home-link { font-size:12px; padding:10px 14px; }
  .country-hero { width:calc(100% - 24px); height:520px; min-height:0; max-height:78svh; border-radius:22px; }
  .hero-location { inset-inline:24px; top:24px; font-size:11px; }
  .hero-location span:last-child { display:none; }
  .country-heading { inset:auto 24px 28px; }
  .country-heading > p { font-size:10px; letter-spacing:.12em; }
  .country-heading h1 { font-size:clamp(44px,12vw,70px); margin-bottom:20px; }
  .country-bottom { align-items:start; gap:24px; }
  .country-bottom > span { font-size:15px; }
  .country-bottom .explore-hotels { order:initial; padding:12px 14px 12px 20px; gap:22px; font-size:15px; }
  .explore-hotels span { width:28px; height:28px; font-size:12px; }
  .collection { padding-top:52px; }
  .collection-heading { margin-bottom:28px; }
  .collection-heading h2 { font-size:40px; }
  .collection-heading > p { margin-top:22px; font-size:15px; max-width:35ch; }
  .eyebrow { font-size:10px; margin-bottom:16px; }
  .island-tabs { gap:7px; margin-bottom:24px; }
  .island-tabs button { padding:9px 16px; font-size:13px; min-height:44px; }
  .catalog-filters { grid-template-columns:1fr; gap:6px; padding-block:10px; }
  .select-field { border:0; padding-left:0; min-height:44px; flex-direction:row; }
  .select-field > span { min-width:82px; }
  .select-field select { font-size:14px; height:auto; }
  .results-line { min-height:60px; }
  .hotel-card { padding:8px; border-radius:22px; }
  .hotel-cover { border-radius:16px; aspect-ratio:1.2; }
  .photo-count { right:12px; bottom:12px; }
  .card-body { padding:20px 12px 14px; }
  .hotel-card h3 { font-size:25px; }
  .card-meta { font-size:12px; }
  .hotel-card p { font-size:15px; margin-bottom:20px; }
  .card-bottom { flex-direction:row; align-items:center; gap:8px; }
  .card-score { font-size:11px; }
  .card-score strong { font-size:17px; }
  .card-more { width:auto; padding:11px 14px; font-size:12px; }
  dialog { border-radius:22px; }
  .dialog-top { padding:10px 16px; }
  .dialog-top > span { font-size:10px; }
  .hotel-detail { padding:0 16px 24px; }
  .hotel-photo-stage { border-radius:16px; }
  .detail-copy h2 { font-size:28px; }
  .hotel-description { font-size:16px; }
}
@media(max-width:360px) {
  .results-line p { font-size:13px; white-space:nowrap; }
  .results-line button { font-size:12px; padding-inline:0; white-space:nowrap; }
  .card-bottom { flex-direction:column; align-items:stretch; gap:16px; }
  .country-heading { inset-inline:20px; }
  .country-heading h1 { font-size:41px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .hotel-card:hover,.hotel-card:hover .hotel-cover img,.explore-hotels:hover { transform:none; }
}