/* Interactive controls */
.button { display:inline-flex; align-items:center; justify-content:center; gap:22px; min-height:48px; padding:0 21px; border:1px solid transparent; border-radius:999px; font-size:11px; font-weight:700; transition:transform .25s var(--ease),background .25s ease,color .25s ease; }
.button:hover { transform:translateY(-2px); }
.button span { font-size:15px; }
.button-light { background:#f7f8f4; color:var(--ink); }
.button-light:hover { background:var(--lime); }
.button-dark { background:var(--forest); color:white; }
.button-dark:hover { background:var(--forest-deep); }
.text-link { display:inline-flex; align-items:center; gap:16px; padding:0; border:0; background:none; color:inherit; font-size:11px; font-weight:700; }
.text-link span { font-size:16px; transition:transform .2s ease; }
.text-link:hover span { transform:translate(3px,-2px); }
.dark-link { color:var(--forest); }
.icon-button { display:grid; place-content:center; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); }
.menu-toggle { display:none; gap:5px; }
.menu-toggle span { display:block; width:16px; height:1px; background:currentColor; }
.search-field { display:flex; align-items:center; gap:13px; min-height:44px; }
.field-icon { color:var(--forest); font-size:30px; line-height:1; }
.search-field input { flex:1; min-width:0; padding:8px 0; border:0; outline:0; color:var(--ink); background:transparent; font-size:14px; }
.search-field input::placeholder { color:#9aa49b; }
.search-field input:focus-visible { outline:none; }
.search-hint { color:#9aa49b; font-size:8px; font-weight:700; letter-spacing:.16em; }
.filter-row { display:flex; flex-wrap:wrap; gap:8px; padding-top:13px; border-top:1px solid #edf0ea; }
.filter-chip { padding:7px 13px; border:1px solid transparent; border-radius:999px; background:#f2f4ef; color:#6b786f; font-size:10px; transition:all .2s ease; }
.filter-chip:hover { border-color:#c5d1c2; color:var(--forest); }
.filter-chip.is-active { border-color:var(--forest); background:var(--forest); color:white; }
/* Destination cards */
.destination-card { min-width:0; }
.destination-media { position:relative; }
.destination-photo { position:relative; display:block; width:100%; aspect-ratio:1.16; overflow:hidden; border:0; border-radius:13px; background:#dce2d8; text-align:left; }
.destination-photo img { width:100%; height:100%; object-fit:cover; transition:transform .65s var(--ease); }
.destination-photo:hover img { transform:scale(1.06); }
.photo-number { position:absolute; top:15px; left:15px; padding:6px 9px; border-radius:999px; background:rgba(247,248,244,.92); color:var(--ink); font-size:9px; font-weight:700; letter-spacing:.1em; }
.save-button { position:absolute; top:12px; right:12px; display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:50%; background:rgba(247,248,244,.94); color:var(--forest); font-size:18px; transition:transform .2s ease,background .2s ease; }
.save-button:hover { transform:scale(1.08); }
.save-button.is-saved { background:var(--forest); color:white; }
.destination-info { display:flex; justify-content:space-between; align-items:start; gap:12px; padding:17px 2px 0; }
.destination-info h3 { margin:0 0 5px; font-family:var(--display); font-size:19px; letter-spacing:-.04em; }
.destination-info p { margin:0; color:var(--muted); font-size:11px; }
.destination-tag { flex:0 0 auto; padding:5px 8px; border-radius:999px; background:#e4eadd; color:var(--forest); font-size:8px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
/* Experience and editorial cards */
.experience-card { position:relative; min-height:330px; overflow:hidden; display:flex; align-items:end; padding:22px; border-radius:13px; color:white; background:#344a3c; }
.experience-card::after { position:absolute; inset:0; content:""; background:linear-gradient(0deg,rgba(9,28,21,.82),rgba(9,28,21,.02) 75%); }
.experience-card .experience-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.experience-card:hover .experience-photo { transform:scale(1.06); }
.experience-card>div { position:relative; z-index:1; }
.experience-card .experience-kicker { margin-bottom:9px; color:#dce9b9; font-size:8px; font-weight:700; letter-spacing:.16em; }
.experience-card h3 { margin:0 0 8px; font-family:var(--display); font-size:22px; letter-spacing:-.04em; }
.experience-card p { margin:0; color:rgba(255,255,255,.78); font-size:11px; line-height:1.6; }
.note-card { padding:28px 25px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.55); }
.note-number { display:block; margin-bottom:28px; color:var(--orange); font-size:10px; font-weight:700; letter-spacing:.14em; }
.note-card h3 { margin-bottom:12px; font-family:var(--display); font-size:20px; letter-spacing:-.04em; }
.note-card p { margin:0; color:var(--ink-soft); font-size:12px; line-height:1.85; }
/* Detail dialog and feedback */
.destination-dialog { position:fixed; width:min(760px,calc(100% - 32px)); max-width:none; max-height:min(88vh,900px); padding:0; overflow:auto; border:0; border-radius:20px; background:var(--paper); color:var(--ink); box-shadow:0 30px 100px rgba(0,0,0,.3); }
.destination-dialog::backdrop { background:rgba(12,27,21,.68); backdrop-filter:blur(5px); }
.dialog-image { height:300px; overflow:hidden; background:#dce2d8; }
.dialog-image img { width:100%; height:100%; object-fit:cover; }
.dialog-content { padding:32px 38px 38px; }
.dialog-content h2 { margin-bottom:15px; font-size:42px; }
.dialog-content>p:not(.eyebrow) { color:var(--ink-soft); line-height:1.8; }
.dialog-meta { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 25px; }
.dialog-meta span { padding:7px 11px; border-radius:999px; background:#e7ece2; color:var(--forest); font-size:10px; font-weight:600; }
.dialog-close { position:absolute; z-index:2; top:15px; right:15px; border:0; background:rgba(255,255,255,.92); font-size:25px; }
.toast { position:fixed; z-index:100; right:24px; bottom:24px; max-width:min(360px,calc(100% - 48px)); padding:13px 18px; transform:translateY(20px); border-radius:10px; background:var(--forest-deep); color:white; font-size:12px; opacity:0; pointer-events:none; transition:opacity .25s ease,transform .25s ease; box-shadow:var(--shadow); }
.toast.is-visible { transform:translateY(0); opacity:1; }