/* Palette derived from hero-bg.png (Sydney harbour blues) */
:root{
  --ink:#1C2B2E;
  --ink-soft:#45585c;
  --muted:#7c8f93;
  --paper:#F3F8FA;
  --card:#FFFFFF;
  --line:#d8e6ea;
  --accent:#4e96a4;
  --accent-dark:#2f5c68;
  --accent-soft:#dcedf1;
  --fav:#C9A227;
  /* hero overlay palette: warm sand against the cool harbour photo */
  --hero-text:#F5F3EE;
  --hero-accent:#D8C6A1;
  --hero-overlay:#1a2c36;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:'DM Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:300; background:var(--paper); color:var(--ink); line-height:1.4;
}
a{color:inherit; text-decoration:none}
header{
  padding:22px 20px 0; display:flex; align-items:baseline; gap:10px;
}
header h1{
  margin:0; font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:500;
  cursor:pointer; color:var(--accent-dark);
}
main{max-width:900px; margin:0 auto; padding:20px}

/* home is a full-bleed hero; header floats transparent on top of it */
body.home main{max-width:none; padding:0; margin:0}
body.home header{
  position:fixed; top:0; left:0; right:0; z-index:5; background:transparent;
  border-bottom:none; color:var(--hero-text);
}
body.home header h1{color:var(--hero-text)}

/* ---- home splash ---- */
.splash{
  position:relative; width:100%; min-height:100vh;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:url('/hero-bg.jpg') center 60%/cover no-repeat;
}
.splash::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,44,54,.55) 0%, rgba(26,44,54,.35) 45%, rgba(26,44,54,.75) 100%);
}
.splash-content{
  position:relative; z-index:1; text-align:center; padding:24px; width:min(640px, 92vw);
}
.splash-content h2{
  margin:0 0 40px; font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(40px,6vw,64px); color:var(--hero-text); letter-spacing:-.01em;
}
.hero-picker{
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:28px; flex-wrap:wrap;
}
.hero-select{
  background:transparent; border:none; border-bottom:1px solid rgba(245,243,238,.35);
  color:var(--hero-text); font-family:'DM Sans',sans-serif; font-size:1rem; font-weight:300;
  padding:8px 2px; outline:none; width:200px; text-align:center; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:border-color .25s ease;
}
.hero-select:focus, .hero-select:hover{border-bottom-color:var(--hero-accent)}
.hero-select:disabled{opacity:.35; cursor:not-allowed; border-bottom-style:dashed}
.hero-select:disabled:hover{border-bottom-color:rgba(245,243,238,.35)}
.hero-select option{color:#1a2c36}
.hero-go{
  background:transparent; border:1px solid var(--hero-accent); color:var(--hero-accent);
  font-family:'DM Sans',sans-serif; font-size:.72rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; padding:12px 26px; cursor:pointer; transition:background .25s ease, color .25s ease;
}
.hero-go:not(:disabled):hover{background:var(--hero-accent); color:var(--hero-overlay)}
.hero-go:disabled{opacity:.3; cursor:default; border-color:rgba(245,243,238,.3); color:rgba(245,243,238,.3)}
@media (max-width:600px){
  .hero-picker{flex-direction:column; gap:18px}
  .hero-select{width:100%}
}

/* ---- guide ---- */
.guide-header{margin-bottom:18px; padding-top:6px}
.dest-nav-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:12px; font-size:.8rem; color:var(--muted);
}
.dest-nav-also{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.dest-nav-home{color:var(--accent); font-weight:500}
.dest-nav-home:hover{text-decoration:underline}
.dest-nav-label{color:var(--muted)}
.dest-nav-link{
  color:var(--accent-dark); border:1px solid var(--line); border-radius:999px;
  padding:2px 10px; background:var(--card);
}
.dest-nav-link:hover{background:var(--accent-dark); color:#fff; border-color:var(--accent-dark)}
.guide-header h1{margin:0 0 2px; font-family:'Cormorant Garamond',serif; font-size:2.4rem; font-weight:500; color:var(--ink)}
.connection-line{color:var(--accent-dark); font-size:.85rem; font-weight:600; margin-bottom:12px}
.lead-box{
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:10px; padding:16px 20px; margin-bottom:10px;
}
.lead-text{font-size:1rem; color:var(--ink-soft); margin:0}
.tips{margin:10px 0 0; padding-left:18px; color:var(--ink-soft); font-size:.9rem}
.lead-box .lead-text + .tips{margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.tips li{margin-bottom:4px}

/* search */
.search-wrap{margin:16px 0}
.search-input{
  width:100%; padding:11px 14px; font-size:.95rem; border:1px solid var(--line);
  border-radius:10px; background:var(--card); color:var(--ink); font-family:inherit; outline:none;
}
.search-input:focus{border-color:var(--accent)}
.search-input::placeholder{color:var(--muted)}

.tabs{display:flex; gap:6px; flex-wrap:wrap; margin:16px 0 12px}
.tab{
  padding:6px 14px; border-radius:999px; border:1px solid var(--line); background:var(--card);
  cursor:pointer; font-size:.88rem;
}
.tab.active{background:var(--accent); color:#fff; border-color:var(--accent)}

/* region + neighborhood drilldown (multi-select chips) */
.region-picker{margin-bottom:14px}
.hood-label{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  margin:10px 0 6px;
}
.hood-label:first-child{margin-top:0}
.hood-chips{display:flex; flex-wrap:wrap; gap:6px}
.hood-chip{
  padding:5px 12px; border-radius:999px; border:1px solid var(--line); background:transparent;
  color:var(--muted); font-size:.78rem; cursor:pointer; transition:all .15s ease;
}
.hood-chip .chip-n{opacity:.6; margin-left:2px}
.hood-chip.active{background:var(--accent-dark); border-color:var(--accent-dark); color:#fff}

.meta-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.rec-count{color:var(--muted); font-size:.85rem}
.toggle-group{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.view-switch{
  display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--card);
}
.view-switch-opt{padding:7px 16px; font-size:.82rem; color:var(--ink-soft); cursor:pointer}
.view-switch-opt.active{background:var(--accent-dark); color:#fff}
.fav-toggle{
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); cursor:pointer; font-size:.82rem; color:var(--ink-soft);
}
.fav-toggle svg{width:12px; height:12px}
.fav-toggle.active{background:var(--fav); border-color:var(--fav); color:#fff}
.clear-filters{font-size:.82rem; color:var(--accent); cursor:pointer}

.rec-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:10px}
.rec-card{
  background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px;
}
.rec-card .card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px}
.rec-card .card-name{
  font-family:'Cormorant Garamond',serif; font-size:1.15rem; font-weight:500; margin:0;
  display:flex; align-items:center; gap:6px; line-height:1.25; color:var(--ink);
}
.rec-card .star{color:var(--fav); flex:0 0 auto}
.rec-card .visited-check{color:var(--accent); flex:0 0 auto; display:inline-flex}
.rec-card .card-hood{
  font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-top:3px;
}
.rec-card .card-note{margin:8px 0 0; font-size:.86rem; color:var(--ink-soft); line-height:1.45}
.rec-card .not-visited{font-size:.76rem; color:var(--muted); font-style:italic; margin:6px 0 0}
.rec-card .tag-row{margin-top:8px; display:flex; flex-wrap:wrap; gap:5px}
.rec-card .tag{font-size:.72rem; color:var(--accent-dark); background:var(--accent-soft); padding:2px 8px; border-radius:6px}
.maps-btn{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; color:var(--ink-soft); border:1px solid var(--line); border-radius:50%;
  transition:all .15s ease;
}
.maps-btn svg{width:13px; height:13px}
.maps-btn:hover{background:var(--accent-dark); color:#fff; border-color:var(--accent-dark)}

.empty, .loading{color:var(--muted); padding:40px 0; text-align:center}
.splash .loading{color:rgba(245,243,238,.75)}

.map-view{
  display:none; height:560px; border-radius:14px; overflow:hidden; border:none;
  box-shadow:0 1px 3px rgba(28,43,46,.08), 0 8px 24px rgba(28,43,46,.08);
}
.map-popup{font-family:'DM Sans',sans-serif; min-width:180px}
.map-popup strong{font-family:'Cormorant Garamond',serif; font-size:1.05rem; color:var(--ink)}
.map-popup-meta{font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-top:2px}
.map-popup p{font-size:.82rem; color:var(--ink-soft); margin:6px 0}
.map-popup a{color:var(--accent); font-size:.8rem}