/* Sal y Piedra — design system carried over from the Claude Design build */
:root{
  --cal:#F7F2E8; --turquesa:#12857F; --deep:#0B6E78; --coral:#E2703F;
  --sol:#BD8A1E; --palma:#4F9B5C; --bloom:#E8547B; --ink:#2B2318;
  --ink-60:rgba(43,35,24,.6); --ink-12:rgba(43,35,24,.12);
  --serif:Newsreader,Georgia,'Times New Roman',serif;
  --body:Optima,Candara,'Segoe UI',system-ui,sans-serif;
  --label:Jost,'Helvetica Neue',Arial,sans-serif;
  --pad:44px; --max:1400px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--cal);color:var(--ink);font-family:var(--body);line-height:1.6;font-size:17px}
img{max-width:100%;display:block}
a{color:inherit}

.label{font-family:var(--label);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* header */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px var(--pad);border-bottom:1px solid var(--ink-12);background:#fff;
  position:sticky;top:0;z-index:20}
.brand{font-family:var(--serif);font-size:23px;letter-spacing:.01em;text-decoration:none}
.brand span{color:var(--turquesa)}
.site-nav{display:flex;gap:26px;align-items:center}
.site-nav a{text-decoration:none;color:var(--ink-60);font-family:var(--label);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--turquesa)}

/* hero */
.hero{padding:88px var(--pad) 72px;max-width:var(--max);margin:0 auto}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,6vw,72px);
  line-height:1.06;letter-spacing:-.015em;max-width:16ch}
.hero p{margin-top:22px;max-width:52ch;font-size:19px;color:var(--ink-60)}

/* property grid */
.grid{display:grid;gap:38px 30px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  padding:0 var(--pad) 96px;max-width:var(--max);margin:0 auto}
.card{text-decoration:none;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--ink-12);border-radius:2px;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(43,35,24,.10)}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card-body{padding:20px 22px 24px}
.card .region{color:var(--turquesa)}
.card h2{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15;margin:8px 0 6px}
.card .headline{color:var(--ink-60);font-size:15px}
.card .meta{margin-top:14px;display:flex;gap:14px;flex-wrap:wrap;color:var(--ink-60);
  font-family:var(--label);font-size:11px;letter-spacing:.1em;text-transform:uppercase}

/* pills */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 0}
.pill{font-family:var(--label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border:1px solid currentColor;border-radius:999px}

/* property page */
/* hero collage: one large + four small, fixed ratio so it can never overlap */
.collage{display:grid;gap:8px;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;
  aspect-ratio:2.4/1;padding:0 var(--pad);max-width:var(--max);margin:0 auto 14px}
.collage img{width:100%;height:100%;object-fit:cover;border-radius:2px;
  background:rgba(43,35,24,.05)}
.collage img:first-child{grid-row:span 2}

.gallery-all{max-width:var(--max);margin:0 auto 56px;padding:0 var(--pad)}
.gallery-all summary{display:inline-block;cursor:pointer;list-style:none;
  font-family:var(--label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:12px 24px;border:1px solid var(--ink);border-radius:2px;background:#fff;
  transition:background .16s,color .16s}
.gallery-all summary::-webkit-details-marker{display:none}
.gallery-all summary:hover{background:var(--ink);color:var(--cal)}
.gallery-all[open] summary{margin-bottom:20px}
.gallery-all .gallery{padding:0}

/* photo tour, after Airbnb's: room tiles, then one section per room */
.tour-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));
  gap:18px 12px;margin-bottom:48px}
.tour-index a{text-decoration:none;color:var(--ink);font-size:14px}
.tour-index img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:2px;margin-bottom:8px;background:rgba(43,35,24,.05)}
.tour-room{display:grid;grid-template-columns:220px 1fr;gap:24px;
  padding-top:28px;margin-bottom:36px;scroll-margin-top:24px}
.tour-room h3{margin:0;font-size:24px}
.tour-room h3 small{display:block;margin-top:6px;font-family:var(--label);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60)}
.tour-room .gallery{columns:2 240px;margin:0;max-width:none}

.gallery{columns:3 300px;column-gap:10px;padding:0 var(--pad);
  max-width:var(--max);margin:0 auto 56px}
.gallery img{width:100%;height:auto;display:block;border-radius:2px;
  margin-bottom:10px;break-inside:avoid;-webkit-column-break-inside:avoid;
  background:rgba(43,35,24,.05)}
.prop-layout{display:grid;gap:56px;grid-template-columns:1fr 380px;
  padding:0 var(--pad) 96px;max-width:var(--max);margin:0 auto;align-items:start}
.prose p{margin-bottom:18px;max-width:66ch}
.prose h3{font-family:var(--serif);font-weight:400;font-size:27px;margin:36px 0 14px}
.spec{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ink-12);
  border:1px solid var(--ink-12);margin:30px 0}
.spec div{background:var(--cal);padding:14px 16px}
.spec dt{font-family:var(--label);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-60)}
.spec dd{font-family:var(--serif);font-size:20px;margin-top:3px}
.amen{columns:3 215px;column-gap:34px;margin:22px 0 8px}
.amen-group{break-inside:avoid;-webkit-column-break-inside:avoid;
  display:inline-block;width:100%;margin-bottom:26px}
.amen-group h4{margin-top:0;font-family:var(--label);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-60);padding-bottom:7px;
  border-bottom:1px solid var(--ink-12);margin-bottom:10px}
.amen-group ul{list-style:none;margin:0;padding:0}
.amen-group li{font-size:15px;line-height:1.5;padding:2px 0;color:var(--ink)}

.booking-rail{position:sticky;top:96px;background:#fff;border:1px solid var(--ink-12);padding:26px 24px}
.booking-rail h3{font-family:var(--serif);font-weight:400;font-size:24px;margin-bottom:6px}
.booking-rail .from{color:var(--ink-60);font-size:15px;margin-bottom:18px}

/* widget slots */
.or-widget{min-height:60px}
.widget-todo{border:1px dashed var(--coral);background:rgba(226,112,63,.06);
  padding:22px;color:var(--coral);font-family:var(--label);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;line-height:1.9}
.widget-todo code{font-family:ui-monospace,Menlo,monospace;text-transform:none;letter-spacing:0;font-size:12px}

/* band + footer */
.band{background:#fff;color:var(--ink);padding:78px var(--pad);
  border-top:1px solid var(--ink-12);border-bottom:1px solid var(--ink-12)}
.band h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,42px);
  max-width:20ch;line-height:1.15}
.band p{margin-top:16px;max-width:56ch;color:var(--ink-60)}
.band .stay-note{margin-top:20px;max-width:64ch;font-size:13.5px;line-height:1.55;
  color:var(--ink-60);padding-top:16px;border-top:1px solid var(--ink-12)}
.site-foot{background:var(--ink);color:rgba(242,235,221,.82);padding:56px var(--pad) 40px}
.site-foot a{color:inherit}
.foot-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  max-width:var(--max);margin:0 auto}
.foot-grid h4{font-family:var(--label);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(242,235,221,.5);margin-bottom:12px}

@media(max-width:900px){
  :root{--pad:22px}
  .prop-layout{grid-template-columns:1fr}
  .amen{columns:2 140px;column-gap:22px}
  .booking-rail{position:static}
  .collage{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1.4/1}
  .collage img:first-child{grid-column:span 2;grid-row:auto}
  .collage img:nth-child(4),.collage img:nth-child(5){display:none}
  .gallery{columns:2 150px;column-gap:6px}
  .gallery img{margin-bottom:6px}
  .tour-room{grid-template-columns:1fr;gap:14px;padding-top:12px}
  .tour-room .gallery{columns:2 150px}
  .tour-index{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:14px 8px}
}

/* ---- photo hero ---- */
.hero-photo{position:relative;min-height:min(76vh,660px);display:flex;align-items:flex-end;
  padding:56px var(--pad);background-size:cover;background-position:center;color:#fff}
.hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(43,35,24,.72),rgba(43,35,24,.42) 46%,rgba(43,35,24,.10) 80%,rgba(43,35,24,0))}
.hero-photo .inner{position:relative;z-index:1;max-width:820px}
.hero-photo .eyebrow{font-family:var(--label);font-size:11.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--cal);opacity:.9;margin-bottom:18px}
.hero-photo h1{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5.6vw,80px);
  line-height:1.08;letter-spacing:-.015em;text-wrap:pretty}
.hero-photo p{margin:22px 0 30px;max-width:54ch;font-size:18px;line-height:1.65;color:rgba(253,248,237,.92)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-family:var(--label);font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;padding:15px 30px;border-radius:2px;
  background:var(--turquesa);color:#fff;border:1px solid var(--turquesa);transition:background .16s}
.btn:hover{background:var(--deep);border-color:var(--deep)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(253,248,237,.75)}
.btn-ghost:hover{background:rgba(253,248,237,.16)}

/* ---- stats strip ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;
  border-bottom:1px solid var(--ink-12)}
.stats div{padding:30px;border-right:1px solid rgba(43,35,24,.1)}
.stats div:last-child{border-right:0}
.stats .n{font-family:var(--serif);font-size:40px;line-height:1;font-weight:300}
.stats .k{font-family:var(--label);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-60);margin-top:6px}

/* ---- story ---- */
.story{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;
  padding:96px var(--pad);max-width:var(--max);margin:0 auto}
.story .eyebrow{font-family:var(--label);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--deep);margin-bottom:20px}
.story h2{font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.2vw,46px);
  line-height:1.25;margin-bottom:24px;text-wrap:pretty}
.story p{margin-bottom:16px;max-width:56ch;color:rgba(43,35,24,.82)}
.story figure{aspect-ratio:4/5;background-size:cover;background-position:center;
  border:1px solid rgba(43,35,24,.14)}

/* ---- section heads ---- */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:0 var(--pad) 20px;max-width:var(--max);margin:0 auto 40px;
  border-bottom:1px solid rgba(43,35,24,.16)}
.sec-head h2{font-family:var(--serif);font-weight:300;font-size:34px}
.sec-head .note{font-family:var(--label);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-60)}
.prop-reviews{padding:0 var(--pad) 90px;max-width:var(--max);margin:0 auto}

@media(max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats div:nth-child(2){border-right:0}
  .story{grid-template-columns:1fr;gap:36px;padding:64px var(--pad)}
  .sec-head{flex-direction:column;align-items:flex-start;gap:8px}
}

/* sticky header would otherwise cover anchor targets on nav jumps */
#stays,#dates,#about,#reviews{scroll-margin-top:86px}
html{scroll-behavior:smooth}