:root{
  --bg:#0f1724;
  --paper:#fffdf8;
  --muted:#9aa4b2;
  --accent:#d6452a;
  --accent-2:#111827;
}

*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Arial,-apple-system,Segoe UI,Roboto,"Helvetica Neue";background:var(--paper);color:var(--accent-2)}

/* ── Nav clearance ── */
.hero-mag{background:linear-gradient(180deg,rgba(0,0,0,0.02),transparent);padding:7rem 4rem 2.5rem}

/* Dark nav text on light background — desktop only */
@media(min-width:769px){
  .nav-link{color:var(--accent-2)}
  .nav-link:hover{color:var(--accent)}
}
.hero-inner{display:grid;grid-template-columns:1fr;gap:1rem;align-items:center}
.hero-text{text-align:center}
.hero-text h1{font-family:'Playfair Display',serif;font-size:3.4rem;margin:0;color:var(--accent-2);letter-spacing:-1px}
.lead{color:var(--muted);margin:0.6rem auto 0;font-weight:500;max-width:420px}

.container{padding:0 4rem 3rem}

.recommendations-layout{max-width:820px;margin:0 auto}

/* Results */
.results-header{display:flex;align-items:end;justify-content:space-between;border-bottom:2px solid rgba(17,24,39,0.08);padding-bottom:0.6rem;margin:0 0 1rem}
.results-header h2{margin:0;font-size:1.35rem;text-transform:uppercase;letter-spacing:1px}
.results-count{color:var(--muted);font-weight:600}
.stay-header{margin-top:2.5rem}

.listing{background:#fff;border:1px solid rgba(17,24,39,0.08);margin-bottom:1rem;transition:box-shadow 0.2s,transform 0.2s,border-color 0.2s}
.listing:hover{box-shadow:0 18px 40px rgba(17,24,39,0.12);transform:translateY(-2px);border-color:var(--accent)}
.listing-link{display:grid;grid-template-columns:180px 1fr;gap:1rem;color:inherit;text-decoration:none;align-items:stretch}
.listing-image{min-height:140px;height:100%;background-size:cover;background-position:center}
.listing-body{padding:0.9rem 1rem}
.listing-title{font-weight:700;font-size:1.1rem;margin-bottom:0.35rem}
.listing-meta{color:var(--muted);font-size:0.9rem;margin-bottom:0.45rem}
.listing-desc{margin:0 0 0.8rem;color:#3f4752}
.listing-actions{display:inline-block;color:var(--accent);font-weight:700}

.site-footer{text-align:center;padding:3rem 2rem;background-color:var(--accent-2);color:#fff;font-family:'Playfair Display',serif;font-size:0.9rem}

@media(max-width:1100px){
  .listing-link{grid-template-columns:140px 1fr}
}

@media(max-width:700px){
  .listing-link{grid-template-columns:1fr}
  .listing-image{height:200px}
  .container{padding:0 1.25rem 2.5rem}
  .hero-mag{padding:6.5rem 1.25rem 2rem}
  .hero-text h1{font-size:2.2rem}
}