:root{
  --bg:#f7f8f9; --card:#ffffff; --ink:#1f2328; --muted:#5c6b70;
  --accent:#0a8f3e; --border:#e6e3de; --radius:14px;
  --shadow:0 2px 6px rgba(0,0,0,.06), 0 12px 24px rgba(0,0,0,.06);
  --green:#009639; --red:#ce1126;
}
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif }
a{ color:inherit; text-decoration:none }
.wrap{ max-width:1260px; margin:0 auto; padding:14px 16px }
header{ position:sticky; top:0; z-index:100; background:#fff; border-bottom:2px solid var(--accent); box-shadow:0 1px 0 var(--border) }
.topbar{ display:flex; gap:12px; align-items:center; justify-content:space-between }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink) }
.brand .logo{ width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--accent),#22c55e); display:grid; place-items:center; color:#fff; font-weight:700; box-shadow:var(--shadow) }
.brand span{ font-weight:650; letter-spacing:.2px }
.search{ flex:1; position:relative }
.search input{ width:100%; padding:12px 44px 12px 14px; border:1px solid var(--border); background:var(--card); border-radius:999px; outline:none; font-size:15px }
.search .kbd{ position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--muted); background:#f3f2ef; border:1px solid var(--border); padding:2px 6px; border-radius:6px }
.actions{ display:flex; gap:8px }
.btn{ appearance:none; border:1px solid var(--border); background:var(--card); padding:10px 12px; border-radius:10px; cursor:pointer; font-weight:600 }
.btn.primary{ background:var(--accent); color:#fff; border-color:transparent }
.btn.primary:active{ transform:translateY(1px) }
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow) }

/* Left Focus */
.layout{ display:grid; grid-template-columns: minmax(0,1fr) 340px; gap:16px }
@media (max-width: 1000px){ .layout{ grid-template-columns: 1fr } aside{ order:2 } main{ order:1 } }
main .primary{ padding:0; overflow:hidden }
.hero-media{ position:relative; aspect-ratio: 16 / 9; background:#ddd }
.hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hero-badges{ position:absolute; left:10px; bottom:10px; display:flex; gap:8px; flex-wrap:wrap }
.badge{ background:rgba(0,0,0,.65); color:#fff; padding:6px 10px; border-radius:999px; font-size:13px }
.badge a.badge-link{ color:#fff; text-decoration:none }
.badge a.badge-link:hover{ text-decoration:underline }
.head{ padding:14px 16px 8px; border-bottom:1px solid var(--border) }
.crumbs{ color:var(--muted); font-size:14px; margin-bottom:6px }
.crumbs a{ color:inherit; text-decoration:underline }
h1{ margin:0 0 4px; font-size:28px }
.sub{ color:var(--muted); font-size:14px }

.tabs{ display:flex; gap:6px; padding:8px 10px 0 10px; border-bottom:1px solid var(--border) }
.tab{ border:none; background:transparent; padding:10px 12px; border-radius:999px 999px 0 0; cursor:pointer; font-weight:600 }
.tab.active{ background:#eef6f0; color:#0a5f2e }
.tabpanes{ padding:14px 16px 18px }
.pane{ display:none } .pane.active{ display:block }

.meta-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:10px; margin:10px 0 14px }
.chip{ background:#eef6f0; border:1px solid var(--border); border-radius:999px; padding:8px 10px; font-size:14px; color:#0a5f2e }
.text{ color:#2b3137 }
.gallery{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:10px }
.gallery img{ width:100%; height:120px; object-fit:cover; border-radius:10px; border:1px solid var(--border) }
.mapbox{ background:#e9edf0; height:380px; border-radius:12px; border:1px solid var(--border); display:grid; place-items:center; color:#556; font-weight:600 }

aside .card{ padding:12px; position:sticky; top:86px }
.facts{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.fact{ background:#f6faf7; border:1px solid var(--border); border-radius:10px; padding:10px; font-size:14px }
.near .item{ display:grid; grid-template-columns:64px 1fr; gap:10px; padding:8px; border-radius:10px }
.near .item:hover{ background:#f5f7f6 }
.near img{ width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--border) }
.near .name{ font-weight:600; margin:2px 0 4px }
.near .dist{ font-size:12px; color:var(--muted) }

.bottom{ padding:4px 0 28px }
.bottom-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px }
@media (max-width: 1100px){ .bottom-grid{ grid-template-columns: 1fr } }
.mini h3{ margin:0 0 10px; font-size:16px; color:#111 }
.taglist{ display:flex; flex-wrap:wrap; gap:8px }
.tag{ background:#eef1f4; border:1px solid var(--border); border-radius:999px; padding:6px 10px; font-size:13px }
.rel-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap:10px }
.rel{ display:flex; gap:8px; align-items:center; padding:8px; border:1px solid var(--border); border-radius:10px; background:#fff }
.rel img{ width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--border) }
.rel .name{ font-size:14px; font-weight:600 }

footer{ border-top:1px solid var(--border); background:#fff; color:var(--muted) }
footer .wrap{ display:flex; justify-content:space-between; gap:12px; font-size:14px }
.footer-notes{ display:flex; flex-direction:column; gap:6px; }
.footer-note-line{ font-size:14px; }
.footer-note-green a{ color:var(--green); text-decoration:underline; }
.footer-note-green{ color:var(--green); }
.footer-note-red a{ color:var(--red); text-decoration:underline; }
.footer-note-red{ color:var(--red); }