/* ============================================================
   Around the hacienda — the guide page
   Uses the site palette from styles.css; nothing is redefined here.
   ============================================================ */

nav#nav.solid{background:var(--stone-50); border-bottom:1px solid var(--stone-200)}
.nav-links a.here{color:var(--terracotta-dark); border-bottom-color:var(--terracotta-dark)}

.page-head{padding:clamp(6.5rem,12vw,9rem) 0 clamp(2rem,4vw,3rem); text-align:center}
.page-head h1{
  font-family:var(--serif); font-weight:300; color:var(--green);
  font-size:clamp(2.2rem,6vw,3.6rem); line-height:1.06; margin:.4rem 0 0;
  letter-spacing:-.01em; text-wrap:balance;
}
.page-lede{color:var(--ink-soft); max-width:58ch; margin:1.3rem auto 0}

.note-card h3{font-size:1.15rem}
.note-card p{font-size:.9rem; margin-bottom:0}
.grid.narrow-ish{max-width:1000px; margin-left:auto; margin-right:auto}

/* ---------- layout ---------- */
.guide-split{
  display:grid; gap:clamp(1.5rem,3.5vw,3rem);
  grid-template-columns:minmax(300px,.86fr) minmax(0,1.14fr);
  align-items:start;
}
.guide-map{position:sticky; top:5.5rem}

.mapcard{
  background:var(--stone-50); border:1px solid var(--stone-200);
  border-radius:1rem; padding:.6rem;
}
section:nth-of-type(even) .mapcard{background:#fff}
#atlas{display:block; width:100%; height:auto; touch-action:manipulation}
#atlas .pin{cursor:pointer}
#atlas .pin .disc{transition:transform .18s cubic-bezier(.2,.8,.3,1);
  transform-box:fill-box; transform-origin:center}
#atlas .pin:hover .disc{transform:scale(1.15)}
#atlas .pin:focus{outline:none}
#atlas .pin:focus-visible .disc{stroke:var(--marigold); stroke-width:3.5}
#atlas .pin.dim{opacity:.26}
#atlas .pin.on .disc{stroke:var(--marigold); stroke-width:3.5}

.mapbar{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; justify-content:center}
.chip{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; padding:.5rem .9rem; border-radius:999px; cursor:pointer;
  border:1px solid var(--stone-300); background:transparent; color:var(--ink-soft);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.chip:hover{border-color:var(--terracotta); color:var(--terracotta-dark)}
.chip[aria-pressed="true"]{
  background:var(--terracotta-dark); border-color:var(--terracotta-dark); color:var(--stone-50);
}
.maphint{font-size:.8rem; color:var(--ink-faint); text-align:center; margin:1rem auto 0; max-width:40ch}

/* ---------- list ---------- */
.guide-head{
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  border-bottom:1px solid var(--stone-300); padding-bottom:.6rem; margin-bottom:1.3rem;
}
.guide-head h2{font-family:var(--serif); font-weight:400; color:var(--green);
  font-size:clamp(1.5rem,3vw,2rem); margin:0}
.guide-count{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); margin-left:auto;
}

.place{margin-bottom:2.2rem; scroll-margin-top:5.5rem}
.place.hidden{display:none}
.place-head{display:flex; align-items:center; gap:.8rem; margin-bottom:.3rem}
.pnum{
  flex:none; width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center;
  background:var(--terracotta-dark); color:var(--stone-50);
  font-family:var(--sans); font-size:.85rem; font-weight:600;
  transition:box-shadow .3s ease;
}
.pnum.home{background:var(--green)}
.place.flash .pnum{box-shadow:0 0 0 6px rgba(197,127,34,.22)}
.place-head h3{font-family:var(--serif); font-weight:400; color:var(--green);
  font-size:1.35rem; margin:0; flex:1; line-height:1.2}
.place-when{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--marigold-deep)}

.entry{
  display:grid; grid-template-columns:3.5rem 1fr; gap:.15rem .9rem;
  padding:.85rem 0; border-bottom:1px solid var(--stone-200);
}
.entry.hidden{display:none}
.entry:last-child{border-bottom:0}
.stars{
  font-family:var(--serif); font-size:1.15rem; color:var(--terracotta-dark);
  line-height:1.1; font-variant-numeric:tabular-nums;
}
.stars small{display:block; font-family:var(--sans); font-size:.6rem;
  color:var(--ink-faint); letter-spacing:.04em; margin-top:.15rem}
.stars.none{font-family:var(--sans); font-size:.66rem; color:var(--ink-faint);
  line-height:1.35; letter-spacing:.04em}
.entry h4{font-family:var(--serif); font-weight:500; font-size:1.1rem;
  color:var(--ink); margin:0; line-height:1.25}
.entry h4 .kind{
  font-family:var(--sans); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); margin-right:.5rem; vertical-align:.18em; font-weight:600;
}
.entry p{margin:.25rem 0 0; font-size:.9rem; color:var(--ink-soft); line-height:1.55; max-width:60ch}
.entry-meta{grid-column:2; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:.5rem}
.pill{
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:var(--ink-faint); border:1px solid var(--stone-300); border-radius:999px;
  padding:.16rem .55rem;
}
.pill.hi{color:var(--terracotta-dark); border-color:var(--terracotta-light)}
.pill.warn{color:var(--marigold-deep); border-color:var(--marigold-light)}
.golink{
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--terracotta-dark); text-decoration:none; border-bottom:1px solid transparent;
  margin-left:auto; white-space:nowrap;
}
.golink:hover{border-bottom-color:var(--terracotta-dark)}

.fine{font-size:.85rem; color:var(--ink-faint); text-align:center; line-height:1.65}
#fineprint{padding-top:0}

@media(max-width:980px){
  .guide-split{grid-template-columns:1fr}
  .guide-map{position:static; max-width:560px; margin:0 auto}
}
@media(max-width:520px){
  .entry{grid-template-columns:2.9rem 1fr}
  .golink{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  #atlas .pin .disc, .pnum{transition:none}
}