/* ===================================================================
   Pooppallys Heritage Homestay — "The Pampa Ledger" design system
   A heritage homestay's website, styled like the guestbook & visitor
   ledger that has sat on its veranda table since the 1990s: parchment
   pages, ink, postage-style stamps, and handwritten signatures.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,500&family=Source+Sans+3:wght@400;500;600;700&family=Caveat:wght@500;600&display=swap');

:root{
  --ink:        #2A2117;
  --ink-soft:    #4a4034;
  --parchment:  #F1E9D6;
  --parchment-2:#e9dec3;
  --paper:      #FBF6EA;
  --teal:       #1F4E45;
  --teal-deep:  #14342E;
  --clay:       #A8552E;
  --clay-soft:  #c97c52;
  --coir:       #C9A66B;
  --brass:      #B5872E;

  --serif:  "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:   "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hand:   "Caveat", cursive;

  --max: 1080px;
  --radius: 3px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body{
  margin:0;
  background: var(--parchment);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(42,33,23,0.05) 1px, transparent 1.6px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--teal); text-decoration: none; }
a:hover{ color: var(--clay); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2.5px solid var(--clay);
  outline-offset: 2px;
}

img{ max-width:100%; display:block; }

h1,h2,h3,h4{ font-family: var(--serif); color: var(--teal-deep); margin: 0 0 0.4em; font-weight: 600; letter-spacing: 0.005em; }
h1{ font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 500; }
h2{ font-size: clamp(1.5rem, 2.6vw, 2.05rem); }
h3{ font-size: 1.15rem; }
p{ margin: 0 0 1em; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family: var(--sans); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  font-size: .72rem; color: var(--clay);
}
.eyebrow::before{ content:""; width: 22px; height:1px; background: var(--clay); display:inline-block; }

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 28px; }

/* ---------- dotted "dotsep" divider, a nod to the 2006 original ---------- */
.dotsep{ border:0; border-top:2px dotted var(--coir); margin: 2.6rem 0; }

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--teal); color:var(--paper);
  padding:.6em 1em; z-index:200;
}
.skip-link:focus{ left: 8px; top: 8px; }

/* ===================== HEADER / LEDGER TABS NAV ===================== */
.site-header{
  position: sticky; top:0; z-index:100;
  background: var(--paper);
  border-bottom: 1px solid var(--parchment-2);
  box-shadow: 0 1px 0 rgba(42,33,23,.05);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 1.5rem; padding: 10px 28px;
  max-width: var(--max); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand img{ height: 100px; width:auto; }
.brand-text{ display:none; }

nav.primary-nav{ }
.nav-list{ list-style:none; display:flex; gap: 2px; margin:0; padding:0; flex-wrap: wrap; }
.nav-list a{
  position:relative;
  display:inline-block;
  font-family: var(--sans); font-weight:600; font-size:.84rem; letter-spacing:.02em;
  color: var(--ink-soft);
  padding: 10px 12px 12px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.nav-list a:hover{ color: var(--teal); background: var(--parchment); }
.nav-list a[aria-current="page"]{ color: var(--teal-deep); }
.nav-list a[aria-current="page"]::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px; background: var(--clay);
}

.nav-toggle{
  display:none;
  background:none; border:1.5px solid var(--ink-soft); border-radius: var(--radius);
  padding: 8px 10px; cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:20px; height:2px; background: var(--ink); position:relative;
}
.nav-toggle span::before{ top:-6px; position:absolute; }
.nav-toggle span::after{ top:6px; position:absolute; }

@media (max-width: 800px){
  .brand img{ height:90px; }
  .nav-toggle{ display:inline-flex; }
  nav.primary-nav{
    display:none; position:absolute; left:0; right:0; top: 100%;
    background: var(--paper); border-bottom:1px solid var(--parchment-2);
  }
  nav.primary-nav.open{ display:block; }
  .nav-list{ flex-direction:column; padding: 6px 24px 16px; }
  .nav-list a{ display:block; padding: 10px 4px; }
  .nav-list a[aria-current="page"]::after{ bottom:2px; }
}

/* ===================== HERO ===================== */
.hero{
  padding: 64px 0 50px;
  border-bottom: 1px solid var(--parchment-2);
}
.hero.with-band{
  background: linear-gradient(180deg, var(--paper), var(--parchment));
}
.hero h1{ margin-top:.35em; max-width: 18ch; }
.hero .lede{ font-size: 1.1rem; color: var(--ink-soft); max-width: 56ch; }
.hero-meta{
  display:flex; gap: 1.6rem; flex-wrap:wrap; margin-top: 1.6rem;
}
.hero-meta div{ font-family: var(--sans); font-size:.8rem; color: var(--ink-soft); }
.hero-meta strong{ display:block; font-family: var(--serif); font-size:1.25rem; color: var(--teal-deep); font-weight:600; }

.cta-row{ display:flex; gap: .9rem; flex-wrap:wrap; margin-top: 1.8rem; }

.hero-grid{ display:grid; grid-template-columns: 1.08fr 1fr; gap: 2.8rem; align-items:center; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }
.hero-photo{ position:relative; }
.hero-photo img{
  width:100%; display:block; border-radius:4px;
  box-shadow: 0 24px 50px -20px rgba(20,15,8,.45);
}
.hero-photo .stamp-corner{
  position:absolute; right:-14px; bottom:-16px;
  background: var(--paper); border: 1.5px solid var(--clay); border-radius: 50%;
  width: 76px; height:76px; display:flex; align-items:center; justify-content:center;
  font-family: var(--serif); font-weight:600; font-size:.68rem; line-height:1.15; text-align:center;
  color: var(--clay); transform: rotate(-8deg);
  box-shadow: 0 8px 16px -6px rgba(20,15,8,.35);
}
@media (max-width: 500px){ .hero-photo .stamp-corner{ display:none; } }

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--sans); font-weight:700; font-size:.86rem; letter-spacing:.02em;
  padding: 12px 22px; border-radius: var(--radius);
  border: 1.5px solid var(--teal-deep);
  background: var(--teal-deep); color: var(--paper);
  cursor:pointer;
}
.btn:hover{ background: var(--teal); border-color: var(--teal); color:var(--paper); }
.btn.ghost{ background: transparent; color: var(--teal-deep); }
.btn.ghost:hover{ background: var(--teal-deep); color: var(--paper); }
.btn.clay{ background: var(--clay); border-color: var(--clay); }
.btn.clay:hover{ background:#8e4523; border-color:#8e4523; }

/* ===================== SECTIONS ===================== */
.section{ padding: 56px 0; }
.section-head{ max-width: 62ch; margin-bottom: 2rem; }
.section-head p{ color: var(--ink-soft); }
.tight{ padding-top: 0; }

.grid{ display:grid; gap: 1.8rem; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px){ .grid-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .grid-3, .grid-2{ grid-template-columns: 1fr; } }

/* ---------- feature / service cards ---------- */
.card{
  background: var(--paper);
  border: 1px solid var(--parchment-2);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
}
.card .leaf{ color: var(--clay); margin-bottom:.6rem; }
.card h3{ margin-bottom:.4rem; }
.card p{ color: var(--ink-soft); font-size:.96rem; margin-bottom:.3em;}
.card a.more{ font-weight:700; font-size:.84rem; }

/* ---------- activity list (services page) ---------- */
.activity-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap: .35rem 2rem; }
@media (max-width: 700px){ .activity-list{ grid-template-columns: 1fr; } }
.activity-list li{
  display:flex; gap:.7em; align-items:flex-start;
  padding: .55em 0; border-bottom: 1px dashed var(--parchment-2);
  font-size: .98rem;
}
.activity-list li svg{ flex:0 0 auto; margin-top:.25em; color: var(--clay); }

/* ===================== TWO-COL CONTENT (about/profile pages) ===================== */
.split{ display:grid; grid-template-columns: 1.5fr 1fr; gap: 2.6rem; align-items:start; }
@media (max-width: 820px){ .split{ grid-template-columns: 1fr; } }
.prose p{ color: var(--ink-soft); }
.prose strong{ color: var(--ink); }
.pull{
  font-family: var(--serif); font-style: italic; color: var(--teal-deep);
  font-size: 1.25rem; line-height:1.5; border-left: 3px solid var(--clay);
  padding-left: 1rem; margin: 1.6rem 0;
}

/* ===================== POSTCARD / PHOTO PLACEHOLDER ===================== */
.postcard{
  background: var(--paper);
  border: 1px solid var(--parchment-2);
  padding: 10px 10px 14px;
  box-shadow: 0 6px 14px -8px rgba(42,33,23,.35);
  position:relative;
}
.postcard.tilt-l{ transform: rotate(-1.4deg); }
.postcard.tilt-r{ transform: rotate(1.2deg); }
.postcard .frame{
  background:
    repeating-linear-gradient(135deg, var(--parchment-2) 0 10px, var(--parchment) 10px 20px);
  border: 1px dashed var(--coir);
  aspect-ratio: 4/3;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding: 1rem;
}
.postcard .frame.photo{
  background:none; border: 1px solid var(--parchment-2); padding:0; overflow:hidden;
}
.postcard .frame.photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.postcard .frame span{
  font-family: var(--sans); font-size: .74rem; letter-spacing:.04em; text-transform:uppercase;
  color: var(--ink-soft); max-width: 18ch;
}
.postcard figcaption{
  font-family: var(--hand); font-size: 1.15rem; color: var(--ink-soft);
  text-align:center; padding-top:.5rem;
}
.tape{
  position:absolute; top:-10px; left:50%; transform: translateX(-50%) rotate(-2deg);
  width: 64px; height: 22px; background: rgba(168,85,46,.28);
  border: 1px solid rgba(168,85,46,.35);
}

/* ===================== TESTIMONIAL / GUESTBOOK SIGNATURE ELEMENT ===================== */
.guestbook{
  background: var(--paper);
  border: 1px solid var(--parchment-2);
  border-radius: 4px;
  padding: 2rem clamp(1.2rem, 4vw, 3rem);
  position: relative;
  overflow:hidden;
}
.guestbook::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width: 26px;
  background-image: radial-gradient(circle, var(--parchment) 4px, transparent 4.2px);
  background-size: 100% 28px;
  background-position: 7px 6px;
  border-right: 1px dashed var(--parchment-2);
}
.entries{ display:grid; gap: 1.6rem; padding-left: clamp(0px, 2vw, 18px); }
.entry{
  display:grid; grid-template-columns: auto 1fr; gap: 1.1rem;
  padding-bottom: 1.5rem; border-bottom: 1px dotted var(--parchment-2);
}
.entry:last-child{ border-bottom:0; padding-bottom:0; }
.entry .stamp{
  width: 58px; height:58px; flex-shrink:0;
  border: 1.5px solid var(--clay); border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--serif); font-weight:600; font-size:.68rem; letter-spacing:.03em;
  text-align:center; color: var(--clay); transform: rotate(-6deg);
  padding: 4px;
}
.entry blockquote{ margin:0 0 .5rem; font-family: var(--serif); font-size: 1.05rem; color: var(--ink); font-style: italic; }
.entry .signed{ font-family: var(--hand); font-size: 1.4rem; color: var(--teal-deep); }
.entry .place{ font-family: var(--sans); font-size:.78rem; color: var(--ink-soft); letter-spacing:.02em; }

/* ===================== TABLES (tariff) ===================== */
.rate-table{ width:100%; border-collapse: collapse; margin: 1rem 0 0; font-size:.95rem; }
.rate-table caption{ text-align:left; font-family:var(--serif); font-size:1.05rem; color:var(--teal-deep); margin-bottom:.5rem; font-style: italic;}
.rate-table th, .rate-table td{ border: 1px solid var(--parchment-2); padding: .65em .9em; text-align:left; }
.rate-table thead th{ background: var(--parchment); color: var(--teal-deep); font-family: var(--sans); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; }
.rate-table td.cta-cell{ color: var(--clay); font-weight:700; white-space:nowrap; }
.rate-note{ font-size:.85rem; color: var(--ink-soft); margin-top:.6rem; }

.tariff-card{ background: var(--paper); border:1px solid var(--parchment-2); border-radius: var(--radius); padding: 1.6rem 1.7rem; margin-bottom:1.4rem; }
.tariff-card h3{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.tariff-card .ask{ font-family:var(--sans); font-size:.82rem; color:var(--clay); font-weight:700; white-space:nowrap; }

/* ===================== CONTACT ===================== */
.contact-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap: 2.4rem; }
@media (max-width: 820px){ .contact-grid{ grid-template-columns: 1fr; } }
.detail-list{ list-style:none; margin: 1.4rem 0 0; padding:0; display:grid; gap:.9rem; }
.detail-list li{ display:flex; gap:.8em; }
.detail-list strong{ display:block; font-family:var(--sans); font-size:.74rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }
.detail-list a, .detail-list span.val{ font-family: var(--serif); font-size:1.05rem; color: var(--teal-deep); }

.map-frame{ border:1px solid var(--parchment-2); border-radius: var(--radius); overflow:hidden; height: 280px; }
.map-frame iframe{ width:100%; height:100%; border:0; }

form.inquiry{ display:grid; gap: 1rem; }
form.inquiry label{ font-family: var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color: var(--ink-soft); display:block; margin-bottom:.35em; }
form.inquiry input, form.inquiry select, form.inquiry textarea{
  width:100%; font-family: var(--sans); font-size: .98rem; color: var(--ink);
  padding: 11px 12px; border: 1.5px solid var(--parchment-2); border-radius: var(--radius);
  background: var(--paper);
}
form.inquiry input:focus, form.inquiry textarea:focus{ border-color: var(--teal); }
.row-2{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
@media (max-width:560px){ .row-2{ grid-template-columns:1fr; } }
.checks{ display:flex; gap: 1rem 1.4rem; flex-wrap:wrap; font-size:.92rem; }
.checks label{ display:flex; align-items:center; gap:.4em; text-transform:none; font-weight:500; font-size:.92rem; }
.form-note{ font-size:.82rem; color: var(--ink-soft); }

/* ===================== BANNER ===================== */
.banner{
  background: var(--teal-deep); color: var(--paper);
  padding: 50px 0; text-align:center;
}
.banner h2{ color: var(--paper); }
.banner p{ color: #cfe3dd; max-width: 50ch; margin: 0 auto 1.6rem; }

/* ===================== FOOTER ===================== */
footer.site-footer{ background: var(--teal-deep); color: #d9e6e1; padding: 46px 0 24px; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; }
@media (max-width:780px){ .footer-grid{ grid-template-columns: 1fr; gap: 1.8rem; } }
footer.site-footer h4{ color: var(--paper); font-size:.95rem; letter-spacing:.03em; text-transform:uppercase; font-family: var(--sans); font-weight:700; margin-bottom:.8rem; }
footer.site-footer a{ color:#cfe3dd; }
footer.site-footer a:hover{ color: var(--coir); }
footer.site-footer .fnav{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; font-size:.92rem; }
footer.site-footer p{ font-size:.92rem; color:#bcd0c9; }
.foot-bottom{
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.2rem; padding-top: 1.2rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem; color:#a9c0b8;
}

/* ===================== GALLERY ===================== */
.gallery-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem 1.4rem; }
@media (max-width: 860px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .gallery-grid{ grid-template-columns: 1fr; } }