*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#1e1712;background:#f7f3ee}.hero{min-height:270px;display:flex;align-items:center;background:linear-gradient(90deg,rgba(21,14,8,.92),rgba(21,14,8,.65),rgba(21,14,8,.2)),url("https://images.unsplash.com/photo-1544161515-4ab6ce6db874?auto=format&fit=crop&w=1800&q=80") center/cover}.hero-content{width:min(1180px,calc(100% - 32px));margin:0 auto;color:#fff;padding:38px 0}.eyebrow{color:#d9b45b;text-transform:uppercase;letter-spacing:.04em;font-weight:700;margin:0 0 12px}h1{font-size:clamp(34px,5vw,58px);line-height:1;margin:0 0 14px}.intro{font-size:18px;max-width:720px;margin:0 0 28px}.hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.primary-btn{border:0;border-radius:8px;background:#c79f49;color:#fff;font-weight:700;font-size:16px;padding:16px 24px;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.18)}.primary-btn:hover{background:#b78c37}.status{color:#f7ead6;margin:0;font-weight:600}.status:before{content:"";display:inline-block;width:10px;height:10px;background:#d9b45b;border-radius:50%;margin-right:9px}.page{width:min(1180px,calc(100% - 28px));margin:22px auto 0}.notice{display:flex;gap:14px;align-items:flex-start;background:#fff8ed;border:1px solid #eadac5;border-radius:8px;padding:16px 20px;box-shadow:0 2px 12px rgba(52,38,23,.04);margin-bottom:18px}.notice-icon{color:#a97822;font-size:22px;line-height:1}.toolbar{background:#fff;border:1px solid #e8e1d9;border-radius:10px 10px 0 0;padding:18px 22px;display:flex;justify-content:space-between;gap:16px;align-items:center;box-shadow:0 8px 26px rgba(39,28,18,.06)}.toolbar h2{margin:0;font-size:26px}select{min-width:170px;border:1px solid #d9d0c7;background:#fff;border-radius:8px;padding:12px 14px;font-size:15px}.listings{background:#fff;border:1px solid #e8e1d9;border-top:0;border-radius:0 0 10px 10px;box-shadow:0 8px 26px rgba(39,28,18,.06);overflow:hidden}.card{display:grid;grid-template-columns:410px 1fr 145px;gap:20px;padding:22px;border-top:1px solid #eee7df}.card:first-child{border-top:0}.thumb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.thumb-wrap{position:relative;overflow:hidden;border:0;border-radius:8px;aspect-ratio:1.08/1;background:#eadfd2;cursor:pointer;padding:0}.thumb{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .2s ease}.thumb-wrap:hover .thumb{transform:scale(1.04)}.more-count{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.48);color:#fff;font-size:22px;font-weight:800}.top-line{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:4px}.badge{border:1px solid #e8c165;background:#fff1c8;color:#7a4f00;border-radius:6px;padding:5px 9px;font-weight:700;font-size:14px}.card h3{margin:4px 0 8px;font-size:28px;line-height:1.05}.area{font-weight:700;margin:0 0 10px}.area:before{content:"📍 "}.meta{margin:0 0 10px;color:#3f332c;line-height:1.45}.desc{color:#55483d;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0;line-height:1.5}.card-side{display:flex;flex-direction:column;gap:9px;align-items:stretch}.distance{align-self:flex-end;background:#f2f1f0;padding:9px 12px;border-radius:8px;margin:0 0 10px;font-size:14px}.action-btn{text-align:center;text-decoration:none;border-radius:7px;padding:11px 10px;font-weight:700;border:1px solid #0a9b4b;color:#087a3d;background:#fff}.action-btn.primary{background:#0b9649;color:#fff;border-color:#0b9649}.action-btn.map{border-color:#1677d2;color:#1266b5;background:#f7fbff}.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:50;display:grid;grid-template-rows:1fr auto;align-items:center;justify-items:center;padding:56px 18px 24px}.lightbox[hidden]{display:none}#lightboxImage{max-width:min(1000px,92vw);max-height:70vh;border-radius:8px;object-fit:contain;background:#111}.close{position:fixed;top:22px;right:26px;color:#fff;background:transparent;border:0;font-size:38px;cursor:pointer}.nav-btn{position:fixed;top:50%;transform:translateY(-50%);width:46px;height:70px;border:0;color:#fff;background:rgba(255,255,255,.08);font-size:48px;cursor:pointer;border-radius:8px}.prev{left:24px}.next{right:24px}.lightbox-thumbs{display:flex;gap:8px;max-width:92vw;overflow-x:auto;padding-top:16px}.lightbox-thumb{width:84px;height:62px;object-fit:cover;border-radius:6px;cursor:pointer;opacity:.65;border:2px solid transparent}.lightbox-thumb.active{opacity:1;border-color:#d9b45b}.footer{width:min(1180px,calc(100% - 28px));margin:16px auto 28px;background:#fff;border:1px solid #e8e1d9;border-radius:10px;padding:14px 22px;color:#55483d}.footer p{margin:0}.empty{padding:28px;color:#6a5d52}@media(max-width:920px){.card{grid-template-columns:1fr}.card-side{display:grid;grid-template-columns:1fr}.distance{align-self:auto;text-align:center}}@media(max-width:560px){.hero{min-height:330px}.toolbar{align-items:stretch;flex-direction:column}select{width:100%}.card{padding:16px;gap:14px}.card h3{font-size:23px}.thumb-grid{gap:6px}.nav-btn{width:38px;height:56px;font-size:36px}.prev{left:8px}.next{right:8px}}

/* Top directory navigation */
.top-nav{
  position:sticky;
  top:0;
  z-index:1000;
  background:#ffffff;
  border-bottom:1px solid #e5ddd5;
  box-shadow:0 2px 10px rgba(39,28,18,.06);
}

.top-nav-container{
  width:min(1180px,calc(100% - 28px));
  margin:0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding:10px 0;
}

.nav-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 20px;
  border:2px solid #c79f49;
  border-radius:10px;
  color:#4a3728;
  background:#ffffff;
  text-decoration:none;
  font-weight:700;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}

.nav-tab:hover{
  background:#c79f49;
  color:#ffffff;
  transform:translateY(-1px);
}

.nav-tab.active{
  background:#c79f49;
  color:#ffffff;
}

@media(max-width:560px){
  .top-nav-container{
    width:calc(100% - 16px);
    gap:8px;
  }

  .nav-tab{
    flex:1;
    padding:9px 8px;
    font-size:13px;
    text-align:center;
  }
}
