/* Chris Listing — luxury listing-style portfolio. Colors and fonts come from the shared editor. */
:root{
  --hot:#9a8568; --bg:#f6f4ef; --ink:#0c0c0d; --on-hot:#ffffff;
  --deep:#edeae4; --line:#dcd8d0; --soft:#5f5a53; --mute:#8a8378; --night:#0c0c0d; --on-night:#f6f4ef; --night-2:#1c1c1e;
  --font-head:"Cormorant Garamond",Georgia,serif; --font-body:"Inter",system-ui,sans-serif; --scale:1;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-weight:300;font-size:calc(16px*var(--scale));line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--font-head);color:var(--head-color,inherit);font-weight:var(--head-weight,300);font-style:var(--head-style,normal);text-transform:var(--head-case,none);letter-spacing:var(--head-track,-.01em);line-height:1.08;margin:0}
a{color:inherit}
[hidden]{display:none!important}
main{overflow-x:clip}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.eyebrow{font-size:.7em;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:color-mix(in srgb,var(--on-night) 70%,transparent);margin:0 0 18px}
.eyebrow.dark{color:var(--hot)}
.draft-bar{position:fixed;top:0;left:0;right:0;z-index:120;text-align:center;font-size:12px;padding:4px 12px;height:24px;line-height:16px;background:var(--hot);color:var(--on-hot);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* header over the hero */
.top{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px clamp(20px,4vw,48px);color:#fff;transition:background .3s,color .3s,padding .3s}
body:has(.draft-bar:not([hidden])) .top{top:24px}
.top.solid{background:color-mix(in srgb,var(--bg) 94%,transparent);color:var(--ink);backdrop-filter:blur(10px);padding-top:14px;padding-bottom:14px;box-shadow:0 1px 0 var(--line)}
.name-mark{font-family:var(--font-head);font-size:1.35em;font-weight:400;text-decoration:none;white-space:nowrap}
.top nav{display:flex;gap:clamp(14px,2vw,28px)}
.top nav a{font-size:.68em;font-weight:500;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;opacity:.85}
.top nav a:hover{opacity:1}

/* hero */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;color:#fff;display:flex;align-items:flex-end}
.hero-bg{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(26px) saturate(1.1) brightness(.75);transform:scale(1.05)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.1)),linear-gradient(0deg,rgba(0,0,0,.55),transparent 45%)}
.hero-frame{position:absolute;right:clamp(20px,6vw,90px);top:50%;transform:translateY(-46%);margin:0;height:min(72vh,640px);aspect-ratio:9/16;box-shadow:0 30px 80px rgba(0,0,0,.45);outline:1px solid rgba(255,255,255,.25);outline-offset:10px}
.hero-frame video{width:100%;height:100%;object-fit:cover;display:block}
.hero-copy{position:relative;padding:0 clamp(20px,4vw,48px) clamp(48px,8vh,90px);max-width:780px}
.hero h1{font-size:clamp(2.8em,6.4vw,5.6em);margin-bottom:18px}
.hero .dek{font-size:1.05em;max-width:34em;color:rgba(255,255,255,.85);margin:0 0 18px}
.place{font-size:.7em;letter-spacing:.24em;color:rgba(255,255,255,.7);margin:0 0 30px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.btn-light{display:inline-block;background:#fff;color:#0c0c0d;padding:15px 26px;font-size:.7em;font-weight:500;letter-spacing:.24em;text-decoration:none;transition:background .25s,color .25s}
.btn-light:hover{background:var(--hot);color:var(--on-hot)}
.chip{display:inline-flex;align-items:baseline;gap:8px;padding:12px 18px;border:1px solid rgba(255,255,255,.4);font-size:.85em;backdrop-filter:blur(6px)}
.chip b{font-family:var(--font-head);font-size:1.6em;font-weight:400}

/* bone sections */
.bone{background:var(--bg);padding:clamp(80px,11vw,140px) 0}
.bone.alt{background:var(--deep)}
.bone h2,.ink h2{font-size:clamp(2em,4vw,3.2em);margin-bottom:22px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:clamp(60px,8vw,100px)}
.fact{position:relative;padding:30px 10px 26px;text-align:center}
.fact:not(:last-child){border-right:1px solid var(--line)}
.fact b{display:block;font-family:var(--font-head);font-size:clamp(2.2em,4vw,3.4em);font-weight:300;line-height:1}
.fact small{font-size:.66em;font-weight:500;letter-spacing:.24em;color:var(--mute)}
.profile{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,6vw,90px)}
.prose p{margin:0 0 18px;color:var(--soft);font-size:1.02em}

/* ink sections */
.ink{background:var(--night);color:var(--on-night);padding:clamp(80px,11vw,140px) 0}
.lead{color:color-mix(in srgb,var(--on-night) 70%,transparent);max-width:34em;margin:0 0 40px}
.lead.dark{color:var(--soft)}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.shot{margin:0;cursor:zoom-in;position:relative}
.shot video,.shot img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:#000;transition:opacity .3s}
.shot:hover video,.shot:hover img{opacity:.85}
.shot figcaption{font-size:.62em;font-weight:500;letter-spacing:.22em;color:color-mix(in srgb,var(--on-night) 60%,transparent);padding-top:12px}

/* featured work as listing cards */
.pfilters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.pfilters button{font:inherit;font-size:.68em;font-weight:500;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line);background:none;color:var(--soft);padding:8px 14px;cursor:pointer}
.pfilters button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.listings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.listing{background:#fff;border:1px solid var(--line);cursor:pointer;display:flex;flex-direction:column;transition:box-shadow .3s,transform .3s}
.listing:hover{box-shadow:0 18px 40px rgba(0,0,0,.08);transform:translateY(-3px)}
.l-img{aspect-ratio:4/3;overflow:hidden;background:var(--deep)}
.l-img img{width:100%;height:100%;object-fit:cover;display:block}
.l-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.l-body small{font-size:.64em;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--hot)}
.l-body h3{font-size:1.6em;line-height:1.1}
.l-body p{margin:0;color:var(--soft);font-size:.9em}
.l-result{margin-top:auto!important;padding-top:14px;border-top:1px solid var(--line);font-family:var(--font-head);font-size:1.15em!important;color:var(--ink)!important}
.l-edit{border:1px dashed var(--hot);background:none;color:var(--hot);padding:8px;cursor:pointer;font:inherit;font-size:.8em}

/* amenities */
.amenities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:20px}
.amenity{position:relative;background:var(--bg);padding:30px 26px 34px}
.bone.alt .amenity{background:var(--deep)}
.ic{display:block;color:var(--hot);font-size:1.3em;margin-bottom:16px}
.amenity h3{font-size:1.5em;margin-bottom:10px}
.amenity p{margin:0;color:var(--soft);font-size:.9em}

/* planner */
.tabs{display:flex;gap:6px;border-bottom:1px solid color-mix(in srgb,var(--on-night) 20%,transparent);margin:10px 0 36px}
.tabs button{font:inherit;font-size:.68em;font-weight:500;letter-spacing:.22em;background:none;border:0;color:color-mix(in srgb,var(--on-night) 60%,transparent);padding:14px 18px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--on-night);border-color:var(--hot)}
.calc{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
.sliders label{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin-bottom:30px;font-size:.88em}
.sliders output{font-family:var(--font-head);font-size:1.6em;line-height:1}
.sliders input{grid-column:1/-1;width:100%;accent-color:var(--hot)}
.result{background:var(--night-2);padding:clamp(24px,4vw,40px);display:grid;gap:6px}
.result small{font-size:.64em;font-weight:500;letter-spacing:.22em;color:color-mix(in srgb,var(--on-night) 60%,transparent)}
.result b{font-family:var(--font-head);font-size:clamp(2.4em,5vw,3.6em);font-weight:300;line-height:1;margin-bottom:16px;color:var(--on-night)}
.result p{margin:0;font-size:.82em;color:color-mix(in srgb,var(--on-night) 60%,transparent)}
.tools{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:color-mix(in srgb,var(--on-night) 14%,transparent)}
.tool{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 12px;background:var(--night);text-align:center;font-size:.82em}
.tool .logo{width:30px;height:30px}

/* enquire */
.enquire{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.agent{display:flex;align-items:center;gap:18px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:30px 0 20px}
.agent img{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.agent b{display:block;font-family:var(--font-head);font-size:1.5em;font-weight:400}
.agent small{display:block;font-size:.66em;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.agent a{font-size:.92em;overflow-wrap:anywhere}
.socials{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.socials a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%}
.socials a:hover{border-color:var(--hot)}
.socials .logo{width:16px;height:16px;background:var(--ink)}
.socials a:hover .logo{background:var(--c,var(--hot))}
.form{display:grid;gap:18px;background:#fff;border:1px solid var(--line);padding:clamp(22px,4vw,40px)}
.form label{display:grid;gap:8px;font-size:.64em;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.form input,.form textarea{font:inherit;font-size:1.5em;letter-spacing:0;text-transform:none;color:var(--ink);border:0;border-bottom:1px solid var(--line);padding:8px 0;background:transparent;outline:none}
.form input:focus,.form textarea:focus{border-color:var(--hot)}
.btn-dark{font:inherit;font-size:.7em;font-weight:500;letter-spacing:.24em;background:var(--ink);color:var(--bg);border:0;padding:16px;cursor:pointer;transition:background .25s}
.btn-dark:hover{background:var(--hot)}
.note{font-size:.78em;color:var(--mute);margin:0}
#ava-contact-links{gap:10px!important}
#ava-contact-links a{display:inline-flex!important;align-items:center;gap:8px;border:1px solid var(--line);padding:8px 14px;text-decoration:none!important;font-size:.88em}
.foot{background:var(--night-2);color:color-mix(in srgb,var(--on-night) 60%,transparent);padding:34px 0;font-size:.72em;letter-spacing:.1em}
.label-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* lightbox and modal */
.lightbox{position:fixed;inset:0;z-index:110;background:rgba(8,8,9,.96);display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:1fr auto;align-items:center;gap:10px;padding:50px 16px 24px}
.lb-stage{display:grid;place-items:center;height:100%;min-height:0}
.lb-stage video,.lb-stage img{max-width:100%;max-height:78vh;object-fit:contain;display:block}
.lb-cap{grid-column:1/-1;text-align:center;color:rgba(255,255,255,.7);font-size:.7em;letter-spacing:.22em;margin:0}
.lb-nav,.lb-x{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;width:48px;height:48px;border-radius:50%;font-size:1.6em;cursor:pointer}
.lb-x{position:absolute;top:14px;right:16px;width:42px;height:42px;font-size:1.3em}
.modal{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:16px;background:rgba(12,12,13,.6);backdrop-filter:blur(6px)}
.modal-box{position:relative;width:min(920px,100%);max-height:90vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;background:var(--bg)}
.m-media{background:var(--deep)}
.m-media img{width:100%;height:100%;object-fit:contain;display:block;max-height:90vh}
.m-media:empty{display:none}
.modal-box:has(.m-media:empty){grid-template-columns:1fr}
.m-body{padding:clamp(22px,4vw,40px)}
.m-body h2{font-size:clamp(1.8em,3vw,2.6em);margin-bottom:14px}
.m-body p,.m-body li{color:var(--soft);font-size:.95em}
.m-tools{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.m-tools span{display:inline-flex;align-items:center;gap:6px;font-size:.7em;letter-spacing:.06em;border:1px solid var(--line);padding:5px 10px}
.m-tools .logo{width:14px;height:14px}
.m-result{border-left:2px solid var(--hot);padding:10px 14px;background:var(--deep);color:var(--ink)!important;font-family:var(--font-head);font-size:1.15em!important}
.x{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--bg);font-size:1.2em;cursor:pointer}

/* logos */
.logo{display:inline-block;flex:none;width:18px;height:18px;background:var(--c,currentColor);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;font-style:normal}
.logo.fav{-webkit-mask:none;mask:none;background-color:#fff;background-size:80%;background-position:center;background-repeat:no-repeat;border-radius:4px}
.logo.mono{-webkit-mask:none;mask:none;display:inline-grid;place-items:center;background:var(--hot);color:var(--on-hot);font-size:.6em;font-weight:600;border-radius:4px}

.ava-edit .top{position:sticky;background:var(--bg);color:var(--ink)}

@media (max-width:1000px){
  .amenities{grid-template-columns:repeat(2,minmax(0,1fr))}
  .listings{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tools{grid-template-columns:repeat(3,minmax(0,1fr))}
  .top nav{display:none}
}
@media (max-width:760px){
  .hero-bg{inset:0;width:100%;height:100%;filter:brightness(.8);transform:none}
  .hero-frame{display:none}
  .facts{grid-template-columns:repeat(2,1fr)}
  .fact:nth-child(2){border-right:0}.fact:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .profile,.calc,.enquire{grid-template-columns:1fr}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .listings{grid-template-columns:1fr}
  .modal-box{grid-template-columns:1fr}
  .m-media img{max-height:50vh}
  .lightbox{grid-template-columns:1fr;grid-template-rows:1fr auto auto}
  .lb-nav{display:none}
}
@media (max-width:480px){
  .amenities{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr}
  .tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .name-mark{font-size:1.15em}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}