/* Purple Pig Properties — hospitality, not construction.
   Plum + brass, warm bone paper, generous air. Deliberately unlike the JSR site. */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* Elevated, not playful. The name carries the wink; the design carries the class.
     Ground is near-black with a violet undertone so the photography — warm greys,
     charcoal, wood, marble — reads rich against it instead of fighting a purple wash.
     Purple is the signature, used with restraint. */
  --ink:       #100A16;   /* near-black aubergine — full-bleed grounds */
  --ink-2:     #1A1022;
  --plum:      #2A1638;
  --plum-2:    #3D2150;
  --plum-3:    #55326C;
  --violet:    #9B5DE5;   /* the brand signature. Used sparingly and deliberately. */
  --violet-dk: #6D33B0;
  --gold:      #C9A227;   /* picked up from the marble and brass already in the homes */
  --gold-lt:   #E3C15C;
  --bone:      #FAF7F4;
  --bone-2:    #F1ECE6;
  --bone-3:    #DED5CB;
  --text:      #241A2C;
  --text-muted:#5A4E63;
  --text-light:#F4EFF8;
  --text-light-muted:#B9A9C6;

  --wrap: 78rem;
  --wrap-tight: 46rem;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --r: 4px;               /* tighter radii read more editorial than rounded-friendly */
  --r-lg: 6px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 1px 2px rgba(16,10,22,.08), 0 12px 32px rgba(16,10,22,.10);
  --shadow-lg: 0 30px 80px rgba(16,10,22,.35);

  --step--1: clamp(.8rem, .77rem + .14vw, .88rem);
  --step-0:  clamp(1rem, .97rem + .2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + .4vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + .9vw, 2.3rem);
  --step-3:  clamp(2.1rem, 1.7rem + 1.9vw, 3.6rem);
  --step-4:  clamp(2.9rem, 2.1rem + 3.8vw, 6rem);   /* bigger, more confident display */
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}
body {
  margin: 0; background: var(--bone); color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--step-0); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3 {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.05; letter-spacing: -.025em; color: var(--ink); margin: 0 0 .6em;
  font-weight: 600;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p  { margin: 0 0 1.1em; }
a  { color: var(--plum-2); }
/* The hidden attribute is a low-priority UA rule; any explicit display beats it. */
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
.on-plum :focus-visible { outline-color: var(--gold); }
.visually-hidden {
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:.75rem; top:-100vh; z-index:999;
  background: var(--plum); color: var(--bone); padding:.7rem 1.1rem;
  border-radius: var(--r); font-weight:600; text-decoration:none;
}
.skip-link:focus { top:.75rem; }

/* --- 3. Layout ----------------------------------------------------------- */
.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--tight { max-width: var(--wrap-tight); }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.on-plum { background: var(--plum); color: var(--text-light); }
.on-plum h1, .on-plum h2, .on-plum h3 { color: var(--bone); }
.on-plum p { color: var(--text-light-muted); }
.on-deep { background: var(--ink); color: var(--text-light); }
.grid { display:grid; gap: clamp(1.25rem, 3vw, 2rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.split { display:grid; gap: clamp(2rem, 5vw, 4rem); align-items:center; }
@media (min-width: 62rem) { .split { grid-template-columns: 1fr 1fr; } }

/* --- 4. Type utilities --------------------------------------------------- */
.eyebrow {
  font-family: Inter, sans-serif; font-size: var(--step--1); letter-spacing:.17em;
  text-transform: uppercase; font-weight: 600; color: var(--gold);
  margin: 0 0 1rem; display:flex; align-items:center; gap:.8rem;
}
.eyebrow::before { content:""; width:2rem; height:1px; background: var(--gold); flex:none; }
.on-plum .eyebrow, .on-deep .eyebrow { color: var(--gold); }
.on-plum .eyebrow::before, .on-deep .eyebrow::before { background: var(--gold); }
.lede { font-size: var(--step-1); line-height:1.5; color: var(--text-muted); max-width: 52ch; }
.on-plum .lede, .on-deep .lede { color: var(--text-light-muted); }
.muted { color: var(--text-muted); }
.on-plum .muted { color: var(--text-light-muted); }

/* --- 5. Buttons ---------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:48px; padding:.8rem 1.6rem; border:1px solid transparent;
  border-radius:var(--r); font:inherit; font-weight:600; text-decoration:none;
  cursor:pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease),
    transform .2s var(--ease);
}
.btn--primary { background: var(--gold); color: var(--ink); }
.btn--primary:hover { background: #DCB63A; }
.btn--ghost { background: transparent; color: var(--plum-2); border-color: var(--bone-3); }
.btn--ghost:hover { border-color: var(--plum-2); }
.on-plum .btn--ghost, .on-deep .btn--ghost { color: var(--bone); border-color: var(--plum-3); }
.on-plum .btn--ghost:hover { border-color: var(--gold); }
.btn-row { display:flex; flex-wrap:wrap; gap:.75rem; }

/* --- 6. Nav -------------------------------------------------------------- */
.nav { background: var(--ink); position: sticky; top:0; z-index:50; }
.nav__inner { display:flex; align-items:center; gap:1rem; min-height:66px; max-width:84rem; }
.nav__brand {
  display:flex; align-items:baseline; gap:.45rem; margin-right:auto;
  color:var(--bone); text-decoration:none; font-family:"Iowan Old Style",Georgia,serif;
  font-size:1.15rem; font-weight:600; letter-spacing:-.01em; flex:0 0 auto;
}
.nav__brand em { color: var(--gold); font-style: normal; }
.nav__links { display:none; list-style:none; margin:0; padding:0; gap:.2rem; }
.nav__links a {
  display:block; padding:.5rem .75rem; color:var(--text-light-muted);
  text-decoration:none; font-size:.95rem; border-radius:var(--r);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color:var(--bone); }
.nav__tel { display:none; align-items:center; gap:.4rem; color:var(--bone);
  text-decoration:none; font-weight:600; font-size:.95rem; white-space:nowrap; }
.nav__cta { display:none; }
.nav__toggle {
  display:flex; align-items:center; justify-content:center; margin-left:auto;
  width:44px; height:44px; background:transparent; border:1px solid var(--plum-3);
  border-radius:var(--r); color:var(--bone); cursor:pointer;
}
.nav__panel { display:none; padding: 0 var(--gutter) 1.25rem; background: var(--ink); }
.nav__panel.is-open { display:block; }
.nav__panel ul { list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.15rem; }
.nav__panel a {
  display:block; padding:.8rem .2rem; color:var(--bone); text-decoration:none;
  font-size:1.05rem; border-bottom:1px solid var(--plum-2);
}
@media (min-width: 60rem) {
  .nav__links, .nav__tel, .nav__cta { display:flex; }
  .nav__toggle, .nav__panel { display:none !important; }
}

/* --- 7. Hero ------------------------------------------------------------- */
.hero { position:relative; background: var(--plum); color: var(--text-light);
  padding-block: clamp(3.5rem, 9vw, 7rem); overflow:hidden; }
.hero h1 { color: var(--bone); max-width: 18ch; }
.hero .lede { color: var(--text-light-muted); max-width:54ch; margin-bottom:2rem; }
.hero__stats { display:flex; flex-wrap:wrap; gap:2.2rem; margin-top:2.6rem;
  padding-top:1.8rem; border-top:1px solid var(--plum-3); }
.hero__stat b { display:block; font-family:"Iowan Old Style",Georgia,serif;
  font-size:var(--step-2); color:var(--gold); line-height:1; }
.hero__stat span { font-size:var(--step--1); color:var(--text-light-muted);
  text-transform:uppercase; letter-spacing:.1em; }

/* --- 8. Cards ------------------------------------------------------------ */
.card { background:#fff; border:1px solid var(--bone-3); border-radius:var(--r-lg);
  padding: clamp(1.4rem,3vw,2rem); box-shadow: var(--shadow); }
.on-plum .card, .on-deep .card { background: var(--plum-2); border-color: var(--plum-3); }
.on-plum .card h3, .on-deep .card h3 { color: var(--bone); }
.on-plum .card p, .on-deep .card p { color: var(--text-light-muted); }

.home-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--bone-3);
  border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:inherit;
  box-shadow: var(--shadow); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.home-card:hover { border-color: var(--gold); box-shadow: var(--shadow-lg); }
.home-card__img { aspect-ratio: 3/2; width:100%; object-fit:cover; background:var(--bone-2); }
.home-card__body { padding: clamp(1.1rem,2.5vw,1.5rem); }
.home-card h3 { margin-bottom:.25rem; }
.home-card__meta { font-size:var(--step--1); color:var(--text-muted); margin:0 0 .6rem; }
.home-card__go { color: var(--gold); font-weight:600; font-size:.92rem; }

/* --- 9. Group band ------------------------------------------------------- */
.group-band { border:1px solid var(--plum-3); border-radius:var(--r-lg);
  padding: clamp(1.5rem,4vw,2.5rem); background: var(--plum-2); }
.group-band__nums { display:flex; gap:2rem; margin:1.2rem 0 1.4rem; }
.group-band__nums b { display:block; font-family:"Iowan Old Style",Georgia,serif;
  font-size:var(--step-2); color:var(--gold); line-height:1; }
.group-band__nums span { font-size:var(--step--1); color:var(--text-light-muted);
  text-transform:uppercase; letter-spacing:.1em; }

/* --- 10. Booking slot ---------------------------------------------------- */
/* OwnerRez widgets drop in here once the embed codes exist. Until then this renders an
   honest placeholder rather than a broken widget. */
.booking { border:2px dashed var(--bone-3); border-radius:var(--r-lg);
  padding: clamp(1.5rem,4vw,2.5rem); text-align:center; background: var(--bone-2); }
.booking--live { border-style:solid; background:#fff; text-align:left; }

/* --- 11. Ticks ----------------------------------------------------------- */
.ticks { list-style:none; margin:0 0 1.2rem; padding:0; display:grid; gap:.85rem; }
.ticks li { display:flex; gap:.7rem; align-items:flex-start; }
.ticks svg { flex:none; margin-top:.28em; color: var(--gold); }

/* --- 12. Footer ---------------------------------------------------------- */
.footer { background: var(--ink); color: var(--text-light-muted);
  padding-block: clamp(2.5rem,6vw,4rem); font-size:var(--step--1); }
.footer h4 { color:var(--bone); font-family:Inter,sans-serif; font-size:var(--step--1);
  letter-spacing:.14em; text-transform:uppercase; margin:0 0 .9rem; }
.footer a { color: var(--text-light-muted); text-decoration:none; }
.footer a:hover { color: var(--gold); }
.footer ul { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.footer__bar { margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--plum-2);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; }

/* --- 13. Mobile CTA ------------------------------------------------------ */
.mobile-cta { position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex;
  border-top:1px solid var(--plum-3); }
.mobile-cta a { flex:1; display:flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:56px; text-decoration:none; font-weight:600; font-size:.95rem; }
.mobile-cta a:first-child { background:var(--ink); color:var(--bone); }
.mobile-cta a:last-child { background:var(--gold); color:var(--ink); }
body { padding-bottom:56px; }
@media (min-width: 60rem) { .mobile-cta { display:none; } body { padding-bottom:0; } }

/* The hero is plum but isn't tagged .on-plum, so .btn--ghost fell back to its light-mode
   colours — dark text on a dark ground. Same trap as the JSR hero. */
.hero .btn--ghost { color: var(--bone); border-color: var(--plum-3); }
.hero .btn--ghost:hover { border-color: var(--gold); background: rgba(255,255,255,.05); }

/* --- Elevated pass ------------------------------------------------------- */
/* Full-bleed photographic hero. The homes are the product; show them at scale
   instead of describing them in a coloured box. */
.hero--photo { position:relative; min-height: clamp(30rem, 82vh, 46rem); display:grid;
  align-items:end; background: var(--ink); overflow:hidden; padding-block: 0; }
.hero--photo > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; }
.hero--photo::after { content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(16,10,22,.72) 0%, rgba(16,10,22,.30) 38%,
    rgba(16,10,22,.86) 100%); }
.hero--photo .wrap { position:relative; z-index:2; padding-bottom: clamp(3rem,7vw,5.5rem); }
.hero--photo h1 { color:#fff; max-width:16ch; text-wrap:balance; }
.hero--photo .lede { color:rgba(255,255,255,.86); max-width:50ch; }

/* The signature. One violet rule, used where the eye lands first. */
.sig { display:inline-block; width:3.2rem; height:3px; background:var(--violet);
  margin-bottom:1.4rem; }

/* Ratings — earned on Airbnb, shown here because it is the reason to trust a stranger. */
.creds { display:flex; flex-wrap:wrap; gap:2.5rem; align-items:baseline; }
.creds b { font-family:"Iowan Old Style",Georgia,serif; font-size:var(--step-2);
  color:var(--gold-lt); line-height:1; display:block; }
.creds span { font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-light-muted); }

.badge { display:inline-flex; align-items:center; gap:.45rem; font-size:var(--step--1);
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold-lt);
  border:1px solid rgba(201,162,39,.35); border-radius:999px; padding:.3rem .8rem; }

/* Editorial home cards — image-led, text restrained. */
.home-card { border-radius: var(--r-lg); border-color: var(--bone-3); }
.home-card__img { aspect-ratio: 4/3; }
.home-card h3 { letter-spacing:-.02em; }
.home-card:hover { border-color: var(--violet); }
.home-card__go { color: var(--violet-dk); }

/* Alternating full-bleed feature rows for the two sets. */
.feature { display:grid; gap:0; align-items:stretch; }
@media (min-width: 62rem) { .feature { grid-template-columns: 1.15fr .85fr; }
  .feature--flip .feature__media { order:2; } }
.feature__media img { width:100%; height:100%; min-height:22rem; object-fit:cover; }
.feature__body { padding: clamp(1.8rem,5vw,3.5rem); display:flex; flex-direction:column;
  justify-content:center; background: var(--plum); }

/* The hero content was butting straight against the sticky nav — the violet rule sat at
   exactly the nav's bottom edge with no air. Give it room to breathe. */
.hero--photo .wrap { padding-top: clamp(2.5rem, 7vw, 5rem); }