:root { --navy:#0f3a5c; --deep:#0a2740; --teal:#1d8fa8; --orange:#ff7a1a; --amber:#ffb347; --mist:#f6f9fb; --ink:#1c2b38; --line:#d5e2ea; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif; color:var(--ink); background:var(--mist); line-height:1.6; }
button { cursor:pointer; font:inherit; }

.top { position:fixed; left:0; right:0; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; padding:.8rem 1.4rem; transition:background .3s, box-shadow .3s; animation:fadeDown .8s both; }
.top.solid { background:rgba(10,39,64,.96); box-shadow:0 5px 20px rgba(0,0,0,.25); backdrop-filter:blur(10px); }
.brand { color:#fff; font-weight:300; font-size:1.5rem; letter-spacing:.04em; text-decoration:none; }
.brand b { color:var(--amber); font-weight:800; }
nav a { color:#fff; margin-left:1.1rem; text-decoration:none; font-size:.9rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; position:relative; }
nav a::after { content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:var(--orange); transition:width .3s; }
nav a:hover::after { width:100%; }
#tripCount { background:var(--orange); color:#fff; border-radius:999px; padding:0 .45rem; font-size:.75rem; }
@keyframes fadeDown { from { opacity:0; transform:translateY(-20px); } }
@keyframes fadeUp { from { opacity:0; transform:translateY(30px); } }

.hero { position:relative; overflow:hidden; color:#fff; min-height:720px; padding:9rem 1.5rem 12rem; background:var(--deep) url("hero.jpeg") center 55% / cover no-repeat; }
.scene { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(10,39,64,.78),rgba(10,39,64,.48) 52%,rgba(10,39,64,.18)),linear-gradient(0deg,rgba(10,39,64,.48),transparent 55%); }
.scene > :not(.waves) { display:none; }
.waves { position:absolute; left:0; bottom:-1px; width:200%; height:120px; overflow:hidden; }
.waves .w { position:absolute; left:0; bottom:0; width:100%; height:100%; animation:waveDrift 18s linear infinite; }
.waves .w2 { animation-duration:24s; animation-direction:reverse; }
.waves .w3 { animation-duration:15s; }
@keyframes waveDrift { to { transform:translateX(-50%); } }

.hero-inner { position:relative; z-index:2; max-width:1100px; margin:0 auto; text-align:left; }
.kicker { display:inline-block; border:1px solid rgba(255,255,255,.6); border-radius:999px; padding:.25rem 1rem; text-transform:uppercase; letter-spacing:.2em; font-size:.75rem; font-weight:700; margin:0 0 1.2rem; animation:fadeUp .9s .1s both; }
.hero h1 { margin:0 0 1rem; max-width:720px; font-size:clamp(2.4rem,6vw,4.6rem); font-weight:800; line-height:1.08; text-shadow:0 3px 18px rgba(0,0,0,.35); }
.hero h1 span { display:inline-block; animation:fadeUp .9s both; }
.hero h1 span:nth-child(1) { animation-delay:.25s; }
.hero h1 span:nth-child(2) { animation-delay:.45s; }
.hero h1 .hl { animation-delay:.65s; color:var(--amber); }
.lead { max-width:560px; margin:0 0 2.2rem; font-size:1.1rem; text-shadow:0 2px 8px rgba(0,0,0,.4); animation:fadeUp .9s .85s both; }
#searchForm { display:flex; max-width:720px; box-shadow:0 14px 36px rgba(0,0,0,.35); border-radius:999px; overflow:hidden; background:#fff; animation:fadeUp .9s 1s both; transition:transform .3s; }
#searchForm:focus-within { transform:scale(1.02); }
#searchForm input { flex:1; padding:1.1rem 1.5rem; border:0; font-size:1rem; min-width:0; outline:none; }
#searchForm button { background:var(--orange); color:#fff; border:0; padding:0 2rem; font-weight:700; transition:filter .2s; }
#searchForm button:hover { filter:brightness(1.1); }
.chips { max-width:720px; margin:1.1rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem; animation:fadeUp .9s 1.2s both; }
.chips button { background:rgba(10,39,64,.45); color:#fff; backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:.35rem .9rem; font-size:.82rem; transition:transform .2s, background .2s; }
.chips button:hover { background:var(--orange); transform:translateY(-2px); }

.reveal { opacity:0; transform:translateY(36px) scale(.98); transition:opacity .8s ease, transform .8s ease; }
.reveal.in { opacity:1; transform:none; }
.card.reveal.in { transition:transform .25s, box-shadow .25s; transition-delay:0s !important; }
main { max-width:1100px; margin:0 auto; padding:1rem 1rem 3rem; }
section { margin-top:2.6rem; scroll-margin-top:80px; }
h2 { color:var(--navy); font-size:1.9rem; font-weight:800; margin-bottom:.8rem; padding-left:.8rem; border-left:6px solid var(--orange); }
.summary { color:#456; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.1rem; }
.group { margin-bottom:1.6rem; }
.group h3 { margin:.5rem 0; color:var(--teal); }

.card { background:#fff; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:0 4px 14px rgba(15,58,92,.08); display:flex; flex-direction:column; gap:.3rem; padding:0 1rem 1rem; }
.card:hover { transform:translateY(-5px); box-shadow:0 16px 30px rgba(15,58,92,.18); }
.card .art { position:relative; height:100px; margin:0 -1rem .4rem; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--teal),var(--navy)); overflow:hidden; }
.card .art svg { position:absolute; bottom:-1px; left:0; width:100%; height:26px; }
.art-icon { font-size:3rem; animation:floaty 5s ease-in-out infinite; filter:drop-shadow(0 4px 6px rgba(0,0,0,.3)); transition:transform .3s; }
.card:hover .art-icon { transform:scale(1.12) rotate(-4deg); }
@keyframes floaty { 50% { translate:0 -5px; } }
.cat-stay .art { background:linear-gradient(135deg,#ff9a3c,#d9531e); }
.cat-meat .art { background:linear-gradient(135deg,#e5484d,#8f1d2c); }
.cat-fish .art { background:linear-gradient(135deg,#2bb3c0,#0f6c8c); }
.cat-food .art { background:linear-gradient(135deg,#ffc447,#e08a00); }
.cat-park .art { background:linear-gradient(135deg,#3fb68b,#18795c); }
.cat-activity .art { background:linear-gradient(135deg,#5b7cfa,#2b3f9e); }
.cat-shop .art { background:linear-gradient(135deg,#8a6fd1,#4b3a8f); }
.card h4 { margin:0; color:var(--navy); }
.card .meta { font-size:.85rem; color:#567; }
.badge { display:inline-block; background:#e3f1f6; color:var(--navy); border-radius:999px; padding:.05rem .6rem; font-size:.75rem; margin-right:.3rem; }
.card button { margin-top:auto; align-self:flex-start; background:var(--navy); color:#fff; border:0; border-radius:999px; padding:.45rem 1rem; transition:transform .2s, background .2s; }
.card button:hover { transform:scale(1.06); background:var(--orange); }
.card button.added { background:#1f9d6b; }
.card a { color:var(--teal); }
.filters { display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 1rem; }
.filters button { background:#fff; border:1px solid var(--line); border-radius:999px; padding:.3rem 1rem; transition:transform .2s; }
.filters button:hover { transform:translateY(-2px); }
.filters button.active { background:var(--orange); color:#fff; border-color:var(--orange); }

.cards3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.cards3 article { position:relative; overflow:hidden; background:var(--navy); color:#e8f3f8; padding:1.2rem 1.3rem; border-radius:16px; transition:transform .3s, box-shadow .3s; }
.cards3 article:hover { transform:translateY(-5px) !important; box-shadow:0 16px 30px rgba(15,58,92,.3); }
.cards3 article::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--orange),var(--amber)); }
.cards3 article i { display:block; font-style:normal; font-size:2.6rem; animation:floaty 5s ease-in-out infinite; }
.cards3 h3 { margin:.3rem 0; color:var(--amber); }

.about { background:#fff; padding:1.2rem 1.6rem; border-radius:16px; border:1px solid var(--line); max-width:860px; }
.history-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.4rem 0; }
.history-gallery figure { margin:0; overflow:hidden; border-radius:12px; background:var(--mist); border:1px solid var(--line); }
.history-gallery img { display:block; width:100%; height:220px; object-fit:cover; }
.history-gallery figcaption { padding:.65rem .8rem; color:#456; font-size:.88rem; }
.tl-title { margin:1.6rem 0 1rem; color:var(--navy); font-size:1.3rem; }
.timeline { list-style:none; margin:0; padding:0 0 0 2.2rem; position:relative; }
.timeline::before { content:""; position:absolute; left:.55rem; top:.5rem; bottom:.5rem; width:4px; border-radius:4px; background:linear-gradient(var(--teal),var(--orange)); }
.timeline li { position:relative; margin-bottom:1.4rem; }
.timeline li::before { content:""; position:absolute; left:-2.05rem; top:.55rem; width:18px; height:18px; border-radius:50%; background:#fff; border:4px solid var(--orange); }
.year { display:inline-block; background:var(--orange); color:#fff; font-weight:700; border-radius:999px; padding:.1rem .8rem; margin-bottom:.4rem; }
.tl-card { background:var(--mist); border-radius:12px; padding:.8rem 1.1rem 1.1rem; border:1px solid var(--line); transition:transform .25s; }
.tl-card:hover { transform:translateX(4px); }
.tl-card h4 { margin:.2rem 0; color:var(--navy); font-size:1.1rem; }
.tl-card p { margin:.3rem 0; }
.history-note { margin:1.4rem 0 0; background:#fff3e2; border-left:4px solid var(--orange); padding:.8rem 1rem; font-size:.95rem; border-radius:6px; }

.secondary { margin-top:1rem; background:#fff; border:1px solid var(--navy); color:var(--navy); border-radius:999px; padding:.4rem 1.1rem; }
button:focus-visible, a:focus-visible, input:focus-visible { outline:3px solid var(--amber); outline-offset:3px; }
footer { text-align:center; padding:1.6rem 1rem; background:var(--deep); color:#cfe0ea; font-size:.9rem; border-top:4px solid var(--orange); }
footer p { margin:.2rem 0; }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } .reveal { opacity:1; transform:none; } }
@media (max-width:600px) {
  .top { padding:.6rem .8rem; }
  .top nav { display:flex; width:100%; justify-content:space-between; gap:.4rem; }
  nav a { margin-left:0; font-size:.72rem; white-space:nowrap; letter-spacing:.03em; }
  .hero { min-height:680px; padding:8rem 1rem 10rem; }
  .sun { width:160px; height:160px; right:5%; }
  #searchForm button { padding:0 1.1rem; }
  .about { padding:1rem; }
  .history-gallery { grid-template-columns:1fr; }
  .history-gallery img { height:200px; }
}
@media print { .top,.hero,#directory,#todo,#about,#plan,#list-your-business,footer,.secondary,.card button { display:none !important; } }