:root { --blue:#315f4b; --dark:#203c32; --sand:#f4f0e6; --accent:#c66b43; --ink:#2e332d; --sage:#dfe7d8; --gold:#d5ad67; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:system-ui,Segoe UI,Roboto,sans-serif; color:var(--ink); background:var(--sand); line-height:1.6; }
.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:.7rem 1.2rem; background:transparent; transition:background .3s, box-shadow .3s; animation:fadeDown .8s both; }
.top.solid { background:rgba(32,60,50,.96); box-shadow:0 5px 20px rgba(30,45,35,.16); backdrop-filter:blur(10px); }
.brand { color:#fff; font-weight:700; font-size:1.3rem; text-decoration:none; transition:color .3s; text-shadow:0 1px 6px rgba(0,0,0,.5); }
nav a { color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.5); margin-left:1rem; text-decoration:none; font-size:.95rem; position:relative; font-weight:600; transition:color .3s; }
.top.solid .brand, .top.solid nav a { color:#fff; }
nav a::after { content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0; background:var(--gold); transition:width .3s; }
nav a:hover::after { width:100%; }
#tripCount { background:var(--accent); color:#fff; border-radius:999px; padding:0 .45rem; font-size:.8rem; }
@keyframes fadeDown { from { opacity:0; transform:translateY(-20px); } }
@keyframes fadeUp { from { opacity:0; transform:translateY(30px); } }

.hero { margin-top:0; position:relative; overflow:hidden; text-align:center; color:#fff; min-height:700px; padding:9rem 1rem 12rem; background:#314b3e; }
.scene { position:absolute; inset:0; pointer-events:none; }
.scene > * { position:absolute; }
.photo { inset:0; background:url("hero.jpeg") center 55%/cover no-repeat,radial-gradient(ellipse at 76% 24%,rgba(213,173,103,.35),transparent 34%),linear-gradient(125deg,#637354,#314b3e 55%,#827050); animation:riverDrift 38s ease-in-out infinite alternate; transform:translateY(calc(var(--py,0px) * .4)); }
.photo::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(28,48,39,.68),rgba(51,70,52,.35) 52%,rgba(35,49,39,.64)); }
@keyframes riverDrift { from { scale:1.02; } to { scale:1.08; translate:-.6% -.4%; } }
.waves { left:0; right:0; bottom:0; height:130px; overflow:hidden; }
.w { left:0; width:200%; height:100%; animation:wave linear infinite; }
.w1 { bottom:20px; animation-duration:14s; }
.w2 { bottom:0; animation-duration:9s; animation-direction:reverse; }
.w3 { bottom:-30px; animation-duration:18s; }
@keyframes wave { to { transform:translateX(-50%); } }

.hero-inner { position:relative; z-index:2; }
.kicker { text-transform:uppercase; letter-spacing:.25em; font-size:.8rem; font-weight:700; color:#ffd9a0; margin:0 0 .6rem; animation:fadeUp .9s .1s both; }
.hero h1 { margin:0 0 1rem; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.3rem,6vw,4.8rem); font-weight:500; line-height:1.08; color:#fff; text-shadow:0 3px 14px 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:#253e32; background:var(--gold); padding:0 .5rem; border-radius:3px; text-shadow:none; }
.lead { max-width:640px; margin:0 auto 2.8rem; color:#fff; font-size:1.1rem; text-shadow:0 2px 8px rgba(0,0,0,.45); animation:fadeUp .9s .85s both; }
#searchForm { display:flex; max-width:760px; margin:0 auto; box-shadow:0 12px 34px rgba(27,43,34,.28); border-radius:6px; overflow:hidden; animation:fadeUp .9s 1s both; transition:transform .3s; }
#searchForm:focus-within { transform:scale(1.02); }
#searchForm input { flex:1; padding:1.1rem 1.2rem; border:0; font-size:1rem; min-width:0; outline:none; }
button { cursor:pointer; font:inherit; }
#searchForm button { background:var(--accent); color:#fff; border:0; padding:0 1.8rem; font-weight:700; transition:filter .2s; }
#searchForm button:hover { filter:brightness(1.1); }
.chips { max-width:760px; margin:1.1rem auto 0; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; animation:fadeUp .9s 1.2s both; }
.chips button { background:rgba(32,60,50,.32); color:#fff; backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.55); border-radius:3px; padding:.35rem .9rem; font-size:.85rem; transition:transform .2s, background .2s, color .2s; }
.chips button:hover { background:var(--gold); color:#253e32; 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.2rem; scroll-margin-top:80px; }
h2 { color:var(--dark); border-bottom:2px solid var(--accent); display:inline-block; padding-bottom:.2rem; font-family:Georgia,"Times New Roman",serif; font-weight:500; }
.summary { color:#456; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; }
.group { margin-bottom:1.6rem; }
.group h3 { margin:.5rem 0; color:var(--blue); }
.card { background:#fff; border-radius:5px; overflow:hidden; box-shadow:0 2px 8px rgba(35,48,37,.07); display:flex; flex-direction:column; gap:.3rem; padding:0 1rem 1rem; }
.card:hover { transform:translateY(-4px); box-shadow:0 14px 28px rgba(32,60,50,.15); }
.card .art { position:relative; height:110px; margin:0 -1rem .4rem; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#718b72,#315f4b); overflow:hidden; }
.card .art svg { position:absolute; bottom:-1px; left:0; width:100%; height:26px; }
.art-icon { font-size:3.2rem; animation:floaty 5s ease-in-out infinite; filter:drop-shadow(0 4px 6px rgba(0,0,0,.24)); 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,#c58d5d,#98684c); }
.cat-meat .art { background:linear-gradient(135deg,#b86d59,#783f37); }
.cat-fish .art { background:linear-gradient(135deg,#729c96,#416e68); }
.cat-food .art { background:linear-gradient(135deg,#d4ad67,#a7793e); }
.cat-park .art { background:linear-gradient(135deg,#8ca47b,#496c4c); }
.cat-activity .art { background:linear-gradient(135deg,#8d9b78,#596b4d); }
.cat-shop .art { background:linear-gradient(135deg,#96917d,#625e50); }
.cards3 article { position:relative; overflow:hidden; transition:transform .3s, box-shadow .3s; }
.cards3 article:hover { transform:translateY(-5px) !important; box-shadow:0 16px 30px rgba(32,60,50,.15); }
.cards3 article i { display:block; font-style:normal; font-size:2.6rem; animation:floaty 5s ease-in-out infinite; }
.cards3 article::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--blue),var(--gold)); }
.history { border-left:6px solid var(--accent); max-width:none; }
.legacy { background:var(--sage); border-radius:5px; padding:.8rem 1rem; }
.tl-title { margin:2rem 0 1rem; color:var(--dark); font-size:1.4rem; }
.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(--blue),var(--gold)); }
.timeline li { position:relative; margin-bottom:1.6rem; }
.timeline li::before { content:""; position:absolute; left:-2.05rem; top:.55rem; width:18px; height:18px; border-radius:50%; background:#fff; border:4px solid var(--accent); box-shadow:0 0 0 4px rgba(198,107,67,.18); }
.timeline li.today::before { background:var(--accent); animation:pulseDot 2s infinite; }
@keyframes pulseDot { 50% { box-shadow:0 0 0 10px rgba(198,107,67,0); } }
.year { display:inline-block; background:var(--blue); color:#fff; font-weight:700; border-radius:999px; padding:.1rem .8rem; margin-bottom:.4rem; }
.tl-card { background:#fff; border-radius:5px; padding:.8rem 1.1rem 1.1rem; box-shadow:0 2px 8px rgba(35,48,37,.07); transition:transform .25s, box-shadow .25s; }
.tl-card:hover { transform:translateX(4px); box-shadow:0 10px 24px rgba(32,60,50,.15); }
.tl-card h4 { margin:.2rem 0; color:var(--dark); font-size:1.15rem; }
.tl-card p { margin:.3rem 0; }
.tl-photo { margin:.7rem 0 0; overflow:hidden; border-radius:10px; }
.tl-photos { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:.8rem; margin-top:.7rem; }
.tl-photos .tl-photo { margin:0; }
.tl-photo figcaption { font-size:.8rem; color:#567; padding:.3rem .2rem 0; font-style:italic; }
.tl-photo img { background:#e9eef1; }
.tl-photo.contain img { object-fit:contain; background:var(--sage); }
.timeline .tl-photo.contain { max-width:420px; }
.tl-photo img { display:block; width:100%; max-height:380px; object-fit:cover; transition:transform .6s; }
.tl-card:hover .tl-photo img { transform:scale(1.05); }
.church-photo { max-width:480px; }
.church-photo img { max-height:300px; }
.history p:first-child::first-letter { font-size:3rem; float:left; line-height:1; padding-right:.4rem; color:var(--blue); font-weight:700; }
.filters button { transition:transform .2s, background .2s; }
.filters button:hover { transform:translateY(-2px); }
.card button { transition:transform .2s, background .2s; }
.card button:hover { transform:scale(1.06); }
h2 { font-size:1.9rem; }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } .reveal { opacity:1; transform:none; } }
.card h4 { margin:0; }
.card .meta { font-size:.85rem; color:#567; }
.badge { display:inline-block; background:#e5ebdf; color:var(--blue); border-radius:3px; padding:.05rem .45rem; font-size:.75rem; margin-right:.3rem; }
.card button { margin-top:auto; align-self:flex-start; background:var(--blue); color:#fff; border:0; border-radius:6px; padding:.4rem .8rem; }
.card button.added { background:#2e8b57; }
.card a { color:var(--blue); }
.filters { display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 1rem; }
.filters button { background:#fff; border:1px solid #c8d0c2; border-radius:3px; padding:.3rem .9rem; }
.filters button.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.cards3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.cards3 article { background:#fff; padding:1rem 1.2rem; border-radius:5px; box-shadow:0 2px 8px rgba(35,48,37,.07); }
.cards3 h3 { margin:0 0 .3rem; }
.history { background:#fff; padding:1rem 1.5rem; border-radius:5px; max-width:820px; }
.note { background:#f3ead7; border-left:4px solid var(--gold); padding:.6rem .8rem; font-size:.9rem; }
.secondary { margin-top:1rem; background:#fff; border:1px solid var(--blue); color:var(--blue); border-radius:6px; padding:.4rem .9rem; }
button:focus-visible, a:focus-visible, input:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
footer { text-align:center; padding:1.5rem 1rem calc(4.5rem + env(safe-area-inset-bottom)); background:var(--dark); color:#e1e5d8; font-size:.9rem; }
footer p { margin:.2rem 0; }
footer a { color:var(--gold); font-weight:600; text-decoration:none; }
footer a:hover { text-decoration:underline; }
@media (max-width:600px) {
  .top { padding:.6rem .8rem; }
  .top nav { display:flex; width:100%; justify-content:space-between; align-items:center; gap:.4rem; }
  nav a { margin-left:0; font-size:.82rem; white-space:nowrap; }
  .hero { min-height:660px; padding:8rem .8rem 10rem; }
  .lead { margin-bottom:2.2rem; }
  #searchForm button { padding:0 1rem; }
}
@media print { .top,.hero,#directory,#todo,#history,#plan,#list-your-business,footer,.secondary,.card button { display:none !important; } }