/* ════════════════════════════════════════════════════════════
   THE PLOT — Melbourne, drawn as one survey chart.
   Archival land-register world. Own type/palette, not site.css.
   TYPE (no monospace — deliberate, world-fitting):
     · Bodoni Moda — display/headings/wordmark/price (engraved map-title
       + estate-catalogue didone tradition).
     · Spectral — warm transitional serif for body copy AND, set in tracked
       caps, every label/eyebrow/caption/datum (engraved-map / field-guide
       voice — the "considered label" without the mono reflex).
   Oxblood + brass on warm paper.
   ════════════════════════════════════════════════════════════ */

:root{
  /* paper / land */
  --paper:#e7dcc4;          /* warm chart land                       */
  --paper-2:#ddd0b4;        /* panel ground, deeper                  */
  --paper-3:#f1e9d6;        /* lifted card / flag                    */
  --land-edge:#d8c9a8;
  /* ink */
  --ink:#181408;            /* near-black, confident                 */
  --ink-2:#5d533c;          /* secondary annotation                  */
  --ink-3:#897c5c;          /* faint                                 */
  --line:#8a7c5b;           /* drawing line — DARK enough to read     */
  --line-soft:#b3a583;
  --hair:rgba(24,20,8,.16);
  /* water — a distinct cool stone, gives figure-ground */
  --water:#bcc6bb;
  --water-2:#aab6a8;
  --water-line:#8ea089;
  /* accents */
  --red:#9b2818;            /* oxblood, the survey red               */
  --brass:#a37a26;          /* ochre / brass — cartographic gold     */
  --brass-2:#c69a3e;
  --red-soft:rgba(155,40,24,.12);
  --shadow:0 30px 70px -34px rgba(24,20,8,.62);
  --disp:"Bodoni Moda",Georgia,serif;      /* display only */
  --body:"Spectral",Georgia,serif;         /* readable body copy */
  --label:"Spectral",Georgia,serif;        /* tracked caps = labels (NO mono) */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  overflow:hidden;position:fixed;inset:0;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
img{display:block;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:1px}
.mono{font-family:var(--label)}

/* ───────── chrome bar ───────── */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;gap:20px;
  padding:16px clamp(16px,3vw,32px);pointer-events:none;
}
.bar > *{pointer-events:auto}
.bar__mark{
  font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:.02em;
  color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:11px;
  line-height:1;
}
.bar__mark b{
  display:inline-grid;place-items:center;width:26px;height:26px;
  border:1.4px solid var(--red);color:var(--red);border-radius:50%;
  font-size:13px;font-weight:600;font-style:italic;
}
.bar__mark em{color:var(--red);font-style:italic;font-weight:500}
.bar__sub{
  font-family:var(--label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);border-left:1px solid var(--hair);padding-left:20px;
}
.bar__spacer{flex:1}
.bar__btn{
  font-family:var(--label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--ink);border-radius:1px;
  padding:9px 15px;display:inline-flex;align-items:center;gap:8px;
  background:rgba(241,233,214,.78);backdrop-filter:blur(5px);
  transition:background .2s,color .2s;
}
.bar__btn:hover{background:var(--ink);color:var(--paper-3)}
.bar__btn b{color:var(--red);font-family:var(--disp);font-size:14px;font-weight:600}
.bar__btn:hover b{color:var(--brass-2)}
@media(max-width:640px){
  .bar__sub{display:none}
  .bar__btn .bar__btn-txt{display:none}
  .bar__btn{padding:10px 12px}
  .bar__mark{font-size:18px}
}

/* ───────── map viewport ───────── */
.map{
  position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab;
  background:radial-gradient(135% 100% at 50% 0%, #efe6d1 0%, var(--paper) 52%, #ddcfb1 100%);
}
.map.is-drag{cursor:grabbing}
.map::before{               /* parchment grain (screen-fixed) */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.42;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
.map::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(125% 120% at 50% 42%, transparent 52%, rgba(24,20,8,.20) 100%);
  mix-blend-mode:multiply;
}
/* mounted-chart neatline frame (screen-fixed) */
.frame{position:fixed;inset:12px;z-index:24;pointer-events:none;border:1.4px solid rgba(24,20,8,.32)}
.frame::after{content:"";position:absolute;inset:5px;border:1px solid rgba(24,20,8,.15)}
.frame i{position:absolute;width:15px;height:15px;color:rgba(24,20,8,.5)}
.frame i::before,.frame i::after{content:"";position:absolute;background:currentColor}
.frame i::before{left:50%;top:0;width:1px;height:15px;margin-left:-.5px}
.frame i::after{top:50%;left:0;height:1px;width:15px;margin-top:-.5px}
.frame .tl{left:-8px;top:-8px}.frame .tr{right:-8px;top:-8px}
.frame .bl{left:-8px;bottom:-8px}.frame .br{right:-8px;bottom:-8px}
@media(max-width:680px){.frame{inset:7px}.frame i{display:none}}
.world{position:absolute;top:0;left:0;width:1600px;height:1120px;transform-origin:0 0;will-change:transform}
.terrain{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* ───────── markers: survey targets, not price boxes ───────── */
.pins{position:absolute;inset:0}
.pin{position:absolute;display:block;transform:translate(-50%,-100%)}
.pin__scale{transform:scale(calc(1 / var(--s,1)));transform-origin:bottom center}
.pin__inner{display:flex;flex-direction:column;align-items:center;transition:transform .22s var(--ease)}
.pin__price{
  font-family:var(--disp);font-weight:600;font-size:16px;line-height:1;letter-spacing:-.01em;
  color:#fff;background:var(--red);padding:4px 9px 5px;border-radius:1px;margin-bottom:5px;
  opacity:0;transform:translateY(4px);transition:opacity .2s var(--ease),transform .2s var(--ease);
  white-space:nowrap;pointer-events:none;
}
.pin__sub{
  font-family:var(--label);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);margin-bottom:5px;white-space:nowrap;
  text-shadow:0 1px 0 rgba(241,233,214,.9),0 0 4px rgba(241,233,214,.9);
  transition:color .2s;
}
.pin__stem{width:1px;height:13px;background:var(--ink);opacity:.5}
.pin__cross{position:relative;width:22px;height:22px;display:grid;place-items:center}
.pin__cross::before,.pin__cross::after{content:"";position:absolute;background:var(--ink);transition:background .2s}
.pin__cross::before{width:22px;height:1.4px}
.pin__cross::after{height:22px;width:1.4px}
.pin__ring{
  position:absolute;width:11px;height:11px;border:1.6px solid var(--red);border-radius:50%;
  background:var(--paper-3);transition:transform .22s var(--ease),background .2s,border-color .2s;
}
/* states */
.pin:hover .pin__inner,.pin:focus-visible .pin__inner{transform:translateY(-3px)}
.pin:hover .pin__price,.pin:focus-visible .pin__price,.pin.is-active .pin__price{opacity:1;transform:none}
.pin:hover .pin__ring,.pin:focus-visible .pin__ring{transform:scale(1.18);background:var(--brass)}
.pin:hover .pin__cross::before,.pin:hover .pin__cross::after,
.pin:focus-visible .pin__cross::before,.pin:focus-visible .pin__cross::after{background:var(--red)}
.pin:hover .pin__sub,.pin:focus-visible .pin__sub{color:var(--red)}
.pin.is-active{z-index:6}
.pin.is-active .pin__ring{background:var(--red);border-color:var(--red);transform:scale(1.25)}
.pin.is-active .pin__cross::before,.pin.is-active .pin__cross::after{background:var(--red)}
.pin.is-active .pin__sub{color:var(--red)}
.pin.is-dim{opacity:.22;filter:grayscale(.7)}
.pin.is-dim .pin__price{display:none}

/* ───────── HUD ───────── */
.hud{position:fixed;z-index:30;font-family:var(--label)}
.coords{
  left:clamp(16px,3vw,32px);bottom:20px;font-size:10px;letter-spacing:.12em;
  color:var(--ink-2);text-transform:uppercase;line-height:1.8;
}
.coords b{color:var(--ink);font-weight:500}
.dial{right:clamp(16px,3vw,32px);bottom:20px;display:flex;flex-direction:column;gap:9px;align-items:center}
.dial__zoom{display:flex;flex-direction:column;border:1px solid var(--ink);border-radius:1px;overflow:hidden;
  background:rgba(241,233,214,.82);backdrop-filter:blur(5px)}
.dial__zoom button{width:40px;height:38px;display:grid;place-items:center;font-size:18px;color:var(--ink);transition:background .15s,color .15s}
.dial__zoom button:first-child{border-bottom:1px solid var(--hair)}
.dial__zoom button:hover{background:var(--ink);color:var(--paper-3)}
.compass{width:50px;height:50px;border:1px solid var(--ink);border-radius:50%;
  background:rgba(241,233,214,.82);backdrop-filter:blur(5px);display:grid;place-items:center}
.compass svg{width:34px;height:34px}
.compass:hover{background:var(--paper-3)}

/* ───────── overlays scaffolding ───────── */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(24,20,8,.42);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;backdrop-filter:blur(2px)}
.scrim.is-open{opacity:1;visibility:visible}
.panel{position:fixed;z-index:60;background:var(--paper-2);display:flex;flex-direction:column;
  box-shadow:var(--shadow);transition:transform .44s var(--ease)}
.panel--detail{top:0;right:0;height:100%;width:min(560px,100%);transform:translateX(101%);border-left:1px solid var(--ink)}
.panel--detail.is-open{transform:none}
.panel--list{top:0;left:0;height:100%;width:min(430px,100%);transform:translateX(-101%);border-right:1px solid var(--ink)}
.panel--list.is-open{transform:none}
.panel--right{left:auto;right:0;border-right:0;border-left:1px solid var(--ink);transform:translateX(101%)}
.panel--right.is-open{transform:none}

.panel__head{display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(18px,3vw,28px);border-bottom:1px solid var(--hair);flex:0 0 auto}
.panel__kick{font-family:var(--label);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.panel__close{font-family:var(--label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hair);border-radius:1px;
  padding:8px 13px;transition:background .2s,color .2s}
.panel__close:hover{background:var(--ink);color:var(--paper-3)}
.panel__scroll{overflow-y:auto;overflow-x:hidden;flex:1;-webkit-overflow-scrolling:touch}

/* ───────── detail ───────── */
.dt__hero{position:relative;aspect-ratio:5/4;background:var(--ink);overflow:hidden}
.dt__hero img{width:100%;height:100%;object-fit:cover}
.dt__no{position:absolute;top:0;left:0;z-index:2;display:flex;align-items:baseline;gap:8px;
  font-family:var(--label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-3);
  background:var(--red);padding:7px 12px}
.dt__no b{font-family:var(--disp);font-size:14px;font-weight:600;letter-spacing:0}
.dt__thumbs{display:flex;gap:7px;padding:9px clamp(18px,3vw,28px) 0}
.dt__thumb{flex:1;aspect-ratio:3/2;border:1px solid var(--hair);overflow:hidden;opacity:.5;
  transition:opacity .2s,border-color .2s;background:var(--ink)}
.dt__thumb img{width:100%;height:100%;object-fit:cover}
.dt__thumb.is-on{opacity:1;border-color:var(--red)}
.dt__cap{font-family:var(--label);font-size:9.5px;letter-spacing:.14em;color:var(--ink-2);
  text-transform:uppercase;padding:10px clamp(18px,3vw,28px) 0}
.dt__body{padding:14px clamp(18px,3vw,28px) 36px}
.dt__type{font-family:var(--label);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.dt__title{font-family:var(--disp);font-size:clamp(30px,4.6vw,40px);font-weight:500;line-height:1.02;
  margin:9px 0 6px;letter-spacing:-.02em}
.dt__addr{font-family:var(--label);font-size:10px;letter-spacing:.1em;color:var(--ink-2);text-transform:uppercase}
.dt__stand{font-family:var(--body);font-size:18px;line-height:1.6;color:#2c2616;margin:18px 0 24px;max-width:46ch;font-weight:400}
.dt__price-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  border-top:1.4px solid var(--ink);border-bottom:1px solid var(--hair);padding:14px 0;margin-bottom:4px}
.dt__price{font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.02em}
.dt__price-lab{font-family:var(--label);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
/* specification index */
.ledger{margin:6px 0 28px}
.ledger div{display:flex;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--hair)}
.ledger dt{font-family:var(--label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  flex:0 0 38%}
.ledger .dot{flex:1;border-bottom:1px dotted var(--line-soft);transform:translateY(-3px)}
.ledger dd{font-family:var(--disp);font-size:16px;text-align:right;white-space:nowrap}
.dt__acts{display:flex;gap:10px;flex-wrap:wrap}

.btn{font-family:var(--label);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:14px 22px;border-radius:1px;transition:background .2s,color .2s,transform .12s;
  display:inline-flex;align-items:center;gap:8px}
.btn:active{transform:translateY(1px)}
.btn--fill{background:var(--red);color:#fff}
.btn--fill:hover{background:var(--ink)}
.btn--line{border:1px solid var(--ink);color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--paper-3)}

/* ───────── filter / list ───────── */
.filt{padding:20px clamp(18px,3vw,28px) 8px}
.filt__set{border:0;margin-bottom:22px}
.filt__leg{font-family:var(--label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);
  margin-bottom:11px;display:block}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-family:var(--label);font-size:10.5px;letter-spacing:.06em;border:1px solid var(--hair);border-radius:1px;
  padding:8px 12px;background:var(--paper-3);transition:all .18s;color:var(--ink);text-transform:uppercase}
.chip:hover{border-color:var(--ink)}
.chip.is-on{background:var(--ink);color:var(--paper-3);border-color:var(--ink)}
.range{padding:2px 0}
.range__val{font-family:var(--disp);font-size:22px;font-weight:600;color:var(--ink);margin-bottom:10px;display:block}
.range input[type=range]{width:100%;accent-color:var(--red)}
.filt__row{display:flex;gap:12px;margin-bottom:8px}
.filt__field{flex:1;display:flex;flex-direction:column;gap:7px}
.filt__field span{font-family:var(--label);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.filt__field select{font-family:var(--label);font-size:12px;color:var(--ink);border:1px solid var(--ink);border-radius:1px;
  padding:11px 12px;background:var(--paper-3);-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23181408' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.filt__foot{display:flex;align-items:center;justify-content:space-between;padding:15px clamp(18px,3vw,28px);
  border-top:1px solid var(--hair);margin-top:6px}
.filt__count{font-family:var(--label);font-size:10px;letter-spacing:.1em;color:var(--ink-2);text-transform:uppercase}
.filt__count b{color:var(--red);font-family:var(--disp);font-size:15px;font-weight:600}
.filt__reset{font-family:var(--label);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px}
.filt__reset:hover{color:var(--red)}

.plotlist{list-style:none;padding:6px clamp(18px,3vw,28px) 32px}
.plotrow{display:grid;grid-template-columns:30px 66px 1fr auto;gap:13px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--hair);width:100%;text-align:left}
.plotrow.is-hidden{display:none}
.plotrow__no{font-family:var(--disp);font-size:15px;font-weight:600;color:var(--brass)}
.plotrow__img{width:66px;height:50px;overflow:hidden;background:var(--ink)}
.plotrow__img img{width:100%;height:100%;object-fit:cover}
.plotrow__t{font-family:var(--body);font-size:17px;line-height:1.12}
.plotrow__s{font-family:var(--label);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-top:4px}
.plotrow__p{font-family:var(--disp);font-size:15px;font-weight:600;white-space:nowrap}
.plotrow:hover .plotrow__t{color:var(--red)}
.plotlist__empty{font-family:var(--label);font-size:11px;color:var(--ink-2);padding:26px;text-align:center;text-transform:uppercase;letter-spacing:.1em}

/* ───────── enquire ───────── */
.enq{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.enq.is-open{opacity:1;visibility:visible}
.enq__card{background:var(--paper-3);border:1px solid var(--ink);border-radius:2px;width:min(460px,100%);
  padding:30px clamp(22px,4vw,34px);box-shadow:var(--shadow);transform:translateY(12px);transition:transform .3s var(--ease)}
.enq.is-open .enq__card{transform:none}
.enq__kick{font-family:var(--label);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.enq__title{font-family:var(--disp);font-size:25px;font-weight:500;margin:7px 0 12px;letter-spacing:-.01em;line-height:1.1}
.enq__note{font-family:var(--body);font-size:15px;line-height:1.5;color:#2c2616;margin-bottom:20px}
.enq__form{display:flex;flex-direction:column;gap:13px}
.enq__form label{display:flex;flex-direction:column;gap:6px;font-family:var(--label);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.enq__form input,.enq__form textarea{font-family:var(--body);font-size:16px;color:var(--ink);
  border:1px solid var(--ink);border-radius:1px;padding:11px 13px;background:var(--paper);width:100%;resize:vertical}
.enq__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.enq__status{font-family:var(--label);font-size:10px;letter-spacing:.04em;color:var(--ink-2);min-height:1em}
.enq__row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:6px}

/* ───────── intro ───────── */
.intro{position:fixed;inset:0;z-index:80;
  background:radial-gradient(130% 100% at 50% 30%, #efe6d1 0%, var(--paper) 55%, #dccdae 100%);
  display:grid;place-items:center;text-align:center;padding:24px;
  transition:opacity .8s var(--ease),visibility .8s}
.intro::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 110% at 50% 40%, transparent 55%, rgba(24,20,8,.16) 100%);mix-blend-mode:multiply}
.intro.is-gone{opacity:0;visibility:hidden}
.intro__inner{position:relative;z-index:1;max-width:760px}
.intro__no{font-family:var(--label);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--brass)}
.intro__word{font-family:var(--disp);font-size:clamp(60px,16vw,168px);font-weight:500;line-height:.86;
  letter-spacing:-.03em;margin:18px 0 4px}
.intro__word em{font-style:italic;font-weight:600;color:var(--red)}
.intro__rule{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 18px;
  font-family:var(--label);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2)}
.intro__rule::before,.intro__rule::after{content:"";height:1px;width:46px;background:var(--line)}
.intro__tag{font-family:var(--body);font-size:clamp(18px,2.6vw,22px);color:#2c2616;max-width:32ch;
  margin:0 auto 30px;line-height:1.42}
.intro__enter{font-family:var(--label);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--ink);border-radius:1px;padding:15px 30px;transition:background .2s,color .2s}
.intro__enter:hover{background:var(--red);color:#fff;border-color:var(--red)}
.intro__hint{font-family:var(--label);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:22px}

/* credit */
.credit{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:25;
  font-family:var(--label);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-decoration:none}
.credit b{color:var(--ink-2)}
.credit:hover b{color:var(--red)}
@media(max-width:820px){.credit{display:none}}

/* noscript */
.nojs{position:fixed;inset:0;overflow:auto;padding:42px 24px;background:var(--paper);z-index:99}
.nojs h1{font-family:var(--disp);font-size:38px;font-weight:600;margin-bottom:12px}
.nojs a{color:var(--red)}

/* ───────── mobile ───────── */
@media(max-width:680px){
  .panel--detail,.panel--list{width:100%;height:90%;top:auto;bottom:0;border:0;
    border-top:1.4px solid var(--ink);border-radius:14px 14px 0 0;transform:translateY(101%)}
  .panel--detail.is-open,.panel--list.is-open{transform:none}
  .ledger dt{flex-basis:46%}
  .coords{display:none}
  .dial{bottom:16px}
}

/* ───────── reduced motion ───────── */
@media(prefers-reduced-motion:reduce){
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
  .world{will-change:auto}
}