/* ============================================================
   Compass Rose — shared inner-page styles
   Used by: terms.html, privacy.html, contact.html,
            locations.html, faq.html, listings.html
   Requires css/site.css to be loaded first.
   ============================================================ */

/* ---------- page banner ---------- */
.pg-banner{
  background:var(--deep);color:#fff;
  padding:clamp(3rem,6vw,5rem) 0 clamp(2.5rem,5vw,4rem);
  position:relative;overflow:hidden;
}
.pg-banner-art{
  position:absolute;right:-4%;top:-10%;width:min(44vw,420px);
  color:#fff;opacity:.12;pointer-events:none;
}
.pg-banner-art svg{width:100%;height:auto;display:block}
.pg-banner .shell{position:relative;z-index:2}
.pg-banner h1{
  font-size:clamp(2.1rem,4.6vw,3.6rem);letter-spacing:-.032em;
  line-height:1.06;color:#fff;max-width:22ch;
}
.pg-banner p{
  margin-top:.9rem;color:rgba(255,255,255,.72);
  font-size:clamp(.97rem,1.3vw,1.07rem);max-width:54ch;line-height:1.6;
}
.pg-breadcrumb{
  display:flex;align-items:center;gap:.5rem;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.5);margin-bottom:1.1rem;
}
/* The hit area is expanded to 44px and pulled back with a negative block
   margin, so the link is comfortably tappable without the breadcrumb row
   growing taller than the 19px text it shows. */
.pg-breadcrumb a{
  color:var(--amber);text-decoration:none;transition:opacity .25s;
  display:inline-flex;align-items:center;min-height:44px;margin-block:-12px;
}
.pg-breadcrumb a:hover{opacity:.8}
.pg-breadcrumb span{opacity:.45}

/* Inner-nav active state lives in site.css — the nav is now identical on
   every page including the homepage, which does not load this stylesheet. */

/* ---------- legal prose ---------- */
.pg-legal{padding:clamp(3rem,6vw,5rem) 0}
.pg-legal-wrap{
  display:grid;
  grid-template-columns:minmax(200px,220px) 1fr;
  gap:clamp(2.5rem,5vw,5rem);
  align-items:start;
}
.pg-toc{
  position:sticky;top:140px;
  background:var(--fog);border-radius:var(--r);
  padding:1.4rem 1.3rem;
}
.pg-toc h3{
  font-family:var(--d-body);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:.9rem;
}
.pg-toc ul{display:grid;gap:.35rem}
.pg-toc a{
  font-size:.87rem;color:var(--deep);line-height:1.4;
  display:inline-flex;min-height:44px;align-items:center;
  transition:color .25s ease;
}
.pg-toc a:hover{color:var(--amber-ink)}

.prose{max-width:72ch}
.prose h2{
  font-size:clamp(1.3rem,2.2vw,1.65rem);letter-spacing:-.022em;
  color:var(--deep);margin:2.8rem 0 1rem;padding-top:.4rem;
  border-top:2px solid var(--tint);
}
.prose h2:first-child{margin-top:0;border-top:none;padding-top:0}
.prose p{margin-bottom:1.1rem;color:var(--ink);line-height:1.7}
.prose ul,.prose ol{
  margin:.6rem 0 1.2rem;padding-left:1.5rem;color:var(--ink);
  display:grid;gap:.5rem;
}
.prose li{line-height:1.65}
.prose a{color:var(--amber-ink);text-decoration:underline;text-underline-offset:3px}
.prose strong{font-weight:700;color:var(--deep)}
.prose .prose-date{
  display:inline-block;background:var(--tint);
  color:var(--muted);font-size:.8rem;font-weight:600;
  padding:.3rem .7rem;border-radius:999px;margin-bottom:2rem;
}

/* ---------- contact page ---------- */
.pg-contact{padding:clamp(3rem,6vw,5.5rem) 0}
.contact-grid{
  display:grid;
  grid-template-columns:minmax(260px,.85fr) 1.15fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
.contact-info{position:sticky;top:140px}
.contact-info h2{
  font-size:clamp(1.6rem,2.8vw,2.2rem);letter-spacing:-.025em;
  color:var(--deep);margin-bottom:1.2rem;
}
.contact-info > p{color:var(--muted);line-height:1.7;margin-bottom:2rem}
.cinfo-list{display:grid;gap:1.1rem;margin-bottom:2.2rem}
.cinfo-row{
  display:flex;align-items:flex-start;gap:.9rem;
  font-size:.96rem;color:var(--ink);
}
.cinfo-ico{
  width:44px;height:44px;flex:none;border-radius:var(--r-sm);
  background:var(--tint);color:var(--deep);
  display:grid;place-items:center;transition:background-color .3s ease,color .3s ease;
}
.cinfo-ico svg{width:22px;height:22px}
.cinfo-row:hover .cinfo-ico{background:var(--deep);color:var(--amber)}
.cinfo-label{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}
.cinfo-val{display:block;color:var(--ink);line-height:1.45}
/* The email and phone rows ARE the anchors, so they need the tap height
   themselves — 22px of text is the hardest thing on the page to hit on a
   phone, and it is the page's primary action. The address stays a plain
   block <span> and is unaffected. */
a.cinfo-val{display:inline-flex;align-items:center;min-height:44px}
.cinfo-val a{color:var(--deep);transition:color .25s ease}
.cinfo-val a:hover{color:var(--amber-ink)}

.contact-form-wrap{
  background:var(--fog);border-radius:var(--r);
  padding:clamp(1.8rem,3vw,2.6rem);
}
.contact-form-wrap h3{
  font-size:1.4rem;letter-spacing:-.022em;color:var(--deep);margin-bottom:.5rem
}
.contact-form-wrap > p{font-size:.95rem;color:var(--muted);margin-bottom:1.8rem;line-height:1.6}
.cf-grid{display:grid;gap:1.1rem}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cf-fld{display:flex;flex-direction:column;gap:.45rem}
.cf-fld label{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cf-fld input,.cf-fld textarea,.cf-fld select{
  font:inherit;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:.75rem 1rem;
  font-size:.95rem;
  transition:border-color .25s ease,box-shadow .25s ease;
  width:100%;
}
.cf-fld input:hover,.cf-fld textarea:hover{border-color:var(--amber)}
.cf-fld input:focus,.cf-fld textarea:focus{
  outline:none;border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(252,99,39,.25);
}
.cf-fld textarea{resize:vertical;min-height:120px;line-height:1.55}
.cf-submit{margin-top:.6rem}
.cf-note{margin-top:.9rem;font-size:.8rem;color:var(--muted);line-height:1.55}
.cf-success{
  text-align:center;padding:2.4rem 1.4rem;
  color:var(--deep);display:none;
}
.cf-success svg{width:48px;height:48px;color:var(--amber);margin:0 auto 1rem;display:block}
.cf-success h3{font-size:1.3rem;margin-bottom:.6rem}
.cf-success p{color:var(--muted);font-size:.95rem}

/* ---------- locations page ---------- */
.pg-locs{padding:clamp(2.4rem,5vw,4rem) 0}

/* Top jump bar — was a sticky sidebar; moved above the list so the page reads
   top-to-bottom in one column and each area section can go full-width. */
.loc-topnav{
  display:flex;flex-wrap:wrap;gap:.55rem;
  padding-bottom:1.6rem;margin-bottom:2rem;
  border-bottom:1px solid var(--line);
}
.loc-chip{
  display:inline-flex;align-items:center;gap:.55rem;min-height:44px;
  padding:.5rem .9rem;border-radius:999px;
  font-size:.87rem;font-weight:500;color:var(--deep);
  background:var(--fog);border:1.5px solid var(--line);
  cursor:pointer;transition:all .25s ease;text-decoration:none;
}
.loc-chip svg{width:16px;height:16px;color:var(--deep);flex:none}
.loc-chip:hover{border-color:var(--amber);background:var(--tint);color:var(--deep)}
.loc-chip.is-active{background:var(--deep);border-color:var(--deep);color:#fff}
.loc-chip.is-active svg{color:var(--amber)}
.loc-chip--all{background:var(--paper);margin-left:auto}

.loc-count-badge{
  font-size:.72rem;font-weight:700;
  background:var(--tint);color:var(--muted);
  padding:.1rem .5rem;border-radius:999px;min-width:22px;text-align:center;
  transition:background-color .25s,color .25s;
}
.loc-chip.is-active .loc-count-badge{background:rgba(255,255,255,.2);color:#fff}

.locs-main{display:grid;gap:clamp(2.2rem,5vw,3.2rem)}

.loc-section{
  position:relative;scroll-margin-top:140px;
  padding:clamp(1.8rem,3.4vw,2.4rem);
  background:var(--paper);border-radius:var(--r);
  box-shadow:0 3px 10px -4px rgba(61,5,42,.1),0 16px 40px -24px rgba(61,5,42,.3);
  overflow:hidden;
}
.loc-section::before{
  content:'';position:absolute;inset:0;left:0;top:0;
  width:5px;background:var(--amber);border-radius:var(--r) 0 0 var(--r);
}
.loc-art{
  position:absolute;right:-3%;bottom:-8%;width:min(24vw,220px);
  color:var(--deep);opacity:.05;pointer-events:none;z-index:0;
}
.loc-art svg{width:100%;height:auto;display:block}

/* Photo | content — was a single stacked column; two columns is both more
   compact per area (photo and copy read side by side, not one above the
   other) and gets more areas above the fold. */
.loc-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(220px,34%) 1fr;
  gap:clamp(1.4rem,3vw,2.2rem);align-items:start;
}
.loc-left{display:flex;flex-direction:column;gap:1.1rem}
.loc-photo{aspect-ratio:4/3}
.loc-top{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.loc-ico{
  width:46px;height:46px;flex:none;border-radius:var(--r-sm);
  background:var(--tint);color:var(--deep);
  display:grid;place-items:center;
}
.loc-ico svg{width:23px;height:23px}
.loc-title-wrap{flex:1}
.loc-tagline{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink);margin-bottom:.25rem}
.loc-section h2{font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.025em;color:var(--deep)}
.loc-body{min-width:0}
.loc-desc{color:var(--muted);line-height:1.65;font-size:.97rem;margin-bottom:1.1rem}

/* Rendered by JS from data/properties.js (see the script at the bottom of this
   page) rather than hand-written, so property names, counts and amenities can
   never drift out of sync with the data every other page already reads from. */
.loc-facts{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-bottom:1.3rem;font-size:.85rem;color:var(--muted);font-weight:600}
.loc-fact{display:inline-flex;align-items:center;gap:.4rem}
.loc-fact svg{width:15px;height:15px;color:var(--deep)}

.loc-plist-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.loc-plist{display:grid;gap:.6rem;margin-bottom:1.2rem}
.loc-prop{
  display:flex;align-items:center;justify-content:space-between;gap:.9rem;
  padding:.8rem 1rem;border-left:3px solid var(--amber);
  background:var(--fog);color:var(--deep);text-decoration:none;
  font-weight:500;font-size:.96rem;transition:all .3s ease;
}
.loc-prop:hover{background:var(--tint);border-left-color:var(--amber);transform:translateX(4px)}
.loc-prop span{flex:1}
.loc-prop svg{width:16px;height:16px;color:var(--deep);flex:none}

.loc-amen-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:1rem 0 .6rem}
.loc-amen-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.loc-amen{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--muted)}
.loc-amen svg{width:15px;height:15px;color:var(--deep);flex:none}

.loc-props{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding-top:1.4rem;border-top:1px solid var(--line);
}
.loc-props-label{font-size:.85rem;color:var(--muted)}
.loc-props-label strong{color:var(--deep)}

/* ---------- FAQ page ---------- */
.pg-faq{padding:clamp(3rem,6vw,5rem) 0}
.faq-layout{
  display:grid;
  grid-template-columns:minmax(220px,.8fr) 1.2fr;
  gap:clamp(2rem,6vw,5rem);
  align-items:start;
}
.faq-side{position:sticky;top:140px;text-align:left}
.faq-side h2{font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.028em;color:var(--deep)}
.faq-side > p{margin-top:.9rem;color:var(--muted);max-width:32ch;line-height:1.65}
.faq-mark{display:block;width:120px;height:120px;margin-top:2rem;color:var(--deep);opacity:.5}
.faq-mark svg{width:100%;height:100%}
.faq-cats{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.faq-cat{
  display:inline-flex;align-items:center;min-height:44px;
  padding:0 .9rem;border-radius:999px;
  font-size:.8rem;font-weight:600;color:var(--deep);
  background:var(--fog);border:1.5px solid var(--line);
  cursor:pointer;transition:all .25s;
}
.faq-cat:hover{border-color:var(--amber);background:var(--tint)}
.faq-cat.is-active{background:var(--deep);border-color:var(--deep);color:#fff}

.faq-list{display:grid}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.fq{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding:1.4rem 0;text-align:left;
  font-family:var(--d-display);font-size:1.08rem;letter-spacing:-.015em;color:var(--deep);
  transition:color .3s ease;
}
@media(hover:hover) and (pointer:fine){.fq:hover{color:var(--amber-ink)}}
.fq-ico{
  width:30px;height:30px;flex:none;border-radius:50%;
  background:var(--tint);display:grid;place-items:center;
  transition:background-color .4s ease;
}
.fq-ico svg{width:14px;height:14px;color:var(--deep);transition:transform .45s var(--out)}
.faq-item[data-open="1"] .fq-ico{background:var(--amber)}
.faq-item[data-open="1"] .fq-ico svg{transform:rotate(135deg)}
.faq-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--out)}
.faq-item[data-open="1"] .faq-panel{grid-template-rows:1fr}
.faq-inner{overflow:hidden;min-height:0}
.faq-inner p{padding:0 0 1.5rem;max-width:70ch;color:var(--muted);line-height:1.7}

/* ---------- listings page ---------- */
.pg-listings{padding:clamp(2.5rem,5vw,4.5rem) 0}
.listings-layout{
  display:grid;
  grid-template-columns:minmax(220px,250px) 1fr;
  gap:clamp(1.8rem,4vw,3rem);
  align-items:start;
}
.listings-sidebar{position:sticky;top:140px;display:grid;gap:1.4rem}
.sb-block{background:var(--fog);border-radius:var(--r);padding:1.3rem 1.2rem}
.sb-block h3{
  font-family:var(--d-body);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:.9rem;
}
.sb-select-wrap{position:relative}
.sb-select-wrap select{
  appearance:none;width:100%;background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:.72rem 2.4rem .72rem .9rem;
  font-size:.92rem;font-weight:500;color:var(--ink);
  transition:border-color .25s ease;cursor:pointer;font-family:inherit;
}
.sb-select-wrap select:hover{border-color:var(--amber)}
.sb-chev{position:absolute;right:.85rem;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted);pointer-events:none}
.sb-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.sb-chip{
  display:inline-flex;align-items:center;gap:.35rem;min-height:44px;
  padding:.4rem .85rem;border-radius:999px;
  background:var(--paper);border:1.5px solid var(--line);
  font-size:.8rem;font-weight:500;color:var(--ink);
  cursor:pointer;transition:all .25s ease;
}
.sb-chip svg{width:14px;height:14px;color:var(--deep)}
.sb-chip:hover{border-color:var(--amber);background:var(--tint)}
.sb-chip[data-on="1"]{background:var(--deep);border-color:var(--deep);color:#fff}
.sb-chip[data-on="1"] svg{color:var(--amber)}
.sb-reset{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.82rem;font-weight:600;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
  transition:color .25s;background:none;border:none;cursor:pointer;
  padding:0;font-family:inherit;
}
.sb-reset:hover{color:var(--deep)}

.listings-main{min-width:0}
.listings-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:1.8rem;flex-wrap:wrap;
}
.listings-head h2{font-size:clamp(1.4rem,2.4vw,1.8rem);letter-spacing:-.022em;color:var(--deep)}
.listings-count{font-size:.88rem;color:var(--muted);font-weight:500}
.listings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}

/* ---------- shared: responsive ---------- */
@media(max-width:900px){
  .pg-legal-wrap,.contact-grid,.faq-layout,.listings-layout{
    grid-template-columns:1fr;
  }
  .pg-toc,.contact-info,.faq-side,.listings-sidebar{
    position:static;
  }
  .pg-toc{display:none}
  .faq-side .faq-mark{display:none}
  .loc-grid{grid-template-columns:1fr}
  .loc-photo{aspect-ratio:16/9}
}
@media(max-width:720px){
  .cf-row{grid-template-columns:1fr}
  .listings-grid{grid-template-columns:1fr}
  .loc-art{display:none}
  .faq-cats{display:none}
  .loc-chip--all{margin-left:0;width:100%;justify-content:center}
}
@media(max-width:420px){
  .loc-chips{grid-template-columns:1fr}
}

/* ---------- wave banner illustration ---------- */
.pg-banner-waves{
  position:absolute;bottom:-2px;left:-5%;width:115%;
  color:#fff;opacity:.18;pointer-events:none;
}