@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');
:root{
  --cream:#f6f3eb;
  --white:#fffefb;
  --ink:#243d34;
  --green:#155541;
  --muted:#66746a;
  --gold:#ac8b41;
  --line:#dce0d4;
  --turn:-7deg;
  --tilt:40deg;
  --unturn:7deg;
  --untilt:-40deg;
}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Hanken Grotesk',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;color:inherit}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #a58a47;
  outline-offset:4px;
}
a{color:inherit}
.site-header{
  height:90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 32px;
  background:var(--white);
  border-bottom:1px solid var(--line);
  gap:16px;
}
.wordmark{
  text-decoration:none;
  letter-spacing:.16em;
  font-family:Georgia,serif;
  font-size:24px;
  white-space:nowrap;
}
.wordmark span{
  display:block;
  font:11px 'Hanken Grotesk',Arial,sans-serif;
  letter-spacing:.34em;
  margin-top:5px;
}
.header-right{display:flex;align-items:center;gap:24px}
.byline{font-size:12px;color:var(--muted)}
.drees-logo{
  width:94px;
  height:auto;
  max-height:55px;
  object-fit:contain;
  mix-blend-mode:multiply;
}
.back-link{
  font-size:12px;
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:30px;
  padding:12px 17px;
  white-space:nowrap;
}
.explorer{
  display:grid;
  grid-template-columns:324px minmax(0,1fr);
  min-height:700px;
  height:calc(100dvh - 146px);
}
.sidebar{
  padding:27px 24px 20px;
  background:var(--white);
  border-right:1px solid var(--line);
  overflow:auto;
  display:flex;
  flex-direction:column;
}
.eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  margin:0 0 13px;
  color:#637966;
  text-transform:uppercase;
}
h1{
  font-family:Fraunces,Georgia,serif;
  font-size:38px;
  line-height:1.09;
  letter-spacing:-.04em;
  font-weight:400;
  margin:0 0 14px;
}
h1 em{font-weight:400;color:var(--green)}
.intro-copy{
  font-size:13px;
  color:var(--muted);
  line-height:1.62;
  margin:0 0 18px;
}
.layer-panel{
  padding:14px 0 16px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:14px;
}
.layer-title{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.17em;
  color:#718073;
  margin-bottom:9px;
}
.layer-filters{display:flex;flex-wrap:wrap;gap:6px}
.layer-chip{
  border:1px solid #d5ddd0;
  background:#fff;
  border-radius:999px;
  padding:7px 12px;
  font-size:11px;
  font-weight:600;
  min-height:34px;
}
.layer-chip.active{
  background:#edf3e8;
  border-color:#bfd0b8;
  color:var(--green);
}
.landmarks{display:grid;gap:5px}
.place{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  border:1px solid transparent;
  background:transparent;
  text-align:left;
  padding:9px 10px;
  border-radius:10px;
  font-size:12px;
  font-weight:600;
  min-height:51px;
  transition:background .2s,border-color .2s,transform .2s;
}
.place small{
  display:block;
  font-size:11px;
  font-weight:400;
  color:var(--muted);
  margin-top:3px;
}
.place.active{background:#eef3e9;border-color:#d4dfcd}
.place:hover{background:#f1f4ed;transform:translateX(2px)}
.place.hidden-by-layer{display:none}
.place-icon{
  flex-shrink:0;
  border:1px solid #cfdbca;
  color:var(--green);
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:700;
}
.place-icon.gold{color:#8a681d;border-color:#dacfae}
.place-icon.charcoal{color:#465054;border-color:#cdd1d2}
.arrow{margin-left:auto;font-size:15px;opacity:.4}
.detail{
  margin-top:19px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.detail .eyebrow{font-size:11px;margin-bottom:8px}
h2{
  font:400 22px/1.2 Fraunces,Georgia,serif;
  letter-spacing:-.025em;
  margin:0 0 8px;
}
.detail p:not(.eyebrow){
  font-size:12px;
  line-height:1.68;
  color:var(--muted);
  margin:0 0 13px;
}
.detail .why-line{
  padding:11px 12px;
  border-left:3px solid var(--gold);
  background:#faf8f0;
  color:#425249!important;
  border-radius:0 7px 7px 0;
}
.detail .why-line strong{color:var(--green)}
.text-joel{
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  display:flex;
  justify-content:space-between;
  background:var(--green);
  color:white;
  padding:13px 14px;
  border-radius:7px;
}
.text-joel:hover{background:#226d52}
.original-link{
  font-size:11px;
  color:var(--muted);
  margin-top:auto;
  padding-top:18px;
  text-underline-offset:4px;
}
.map-area{
  position:relative;
  overflow:hidden;
  min-width:0;
  background:radial-gradient(ellipse at 52% 41%,#fffdf7 0%,#edf1e5 60%,#dce4d5 100%);
}
.map-area:before{
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(#5c70571c .7px,transparent .7px);
  background-size:19px 19px;
  pointer-events:none;
}
.map-top{
  position:absolute;
  top:23px;
  left:27px;
  right:27px;
  z-index:10;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  pointer-events:none;
}
.map-caption{
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--ink);
}
.status-dot{
  display:inline-block;
  width:7px;
  height:7px;
  background:#648a54;
  border-radius:50%;
  margin:0 8px 1px 0;
}
.plan-date{
  display:block;
  margin:6px 0 0 15px;
  font-size:11px;
  letter-spacing:.13em;
  color:var(--muted);
  font-weight:500;
}
.view-switch{
  display:flex;
  background:#fffefbef;
  border:1px solid #d9dfd2;
  border-radius:11px;
  padding:4px;
  box-shadow:0 8px 25px rgba(55,75,55,.07);
  pointer-events:auto;
  backdrop-filter:blur(10px);
}
.view-switch button{
  border:0;
  background:transparent;
  border-radius:8px;
  padding:10px 14px;
  font-size:12px;
  font-weight:600;
  min-height:38px;
}
.view-switch button.selected{
  background:var(--green);
  color:white;
}
.viewport{
  position:absolute;
  inset:0;
  touch-action:none;
  cursor:grab;
  perspective:2500px;
  perspective-origin:52% 47%;
  overflow:hidden;
}
.viewport.dragging{cursor:grabbing}
.positioner{
  position:absolute;
  left:50%;
  top:50%;
  width:1000px;
  height:1000px;
  margin:-500px 0 0 -500px;
  transform-style:preserve-3d;
  transition:transform .58s cubic-bezier(.2,.75,.2,1);
}
.viewport.dragging .positioner{transition:none}
.model{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--tilt)) rotateZ(var(--turn));
  transition:transform .58s cubic-bezier(.2,.75,.2,1);
}
.viewport.dragging .model{transition:none}
.map-surface{
  position:absolute;
  inset:0;
  background:#fff;
  transform:translateZ(0);
  border:1px solid #899781;
  backface-visibility:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
.map-surface picture,
.map-surface>img{
  display:block;
  width:100%;
  height:100%;
}
.map-surface img{
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  transition:filter .5s;
}
.base-bottom{
  position:absolute;
  inset:0;
  background:#919d82;
  transform:translateZ(-10px);
  box-shadow:0 20px 38px rgba(42,65,41,.14),0 44px 78px rgba(53,71,49,.08);
}
.base-side{
  position:absolute;
  background:linear-gradient(#d4d8c6 0 18%,#9ca98e 19% 88%,#b7a674 89%);
  backface-visibility:hidden;
}
.side-front,.side-back{width:100%;height:10px;left:0}
.side-front{top:100%;transform-origin:top;transform:rotateX(-90deg)}
.side-back{bottom:100%;transform-origin:bottom;transform:rotateX(90deg)}
.side-left,.side-right{
  height:100%;
  width:10px;
  top:0;
  background:linear-gradient(90deg,#d1d6c4,#91a084);
}
.side-left{right:100%;transform-origin:right;transform:rotateY(-90deg)}
.side-right{left:100%;transform-origin:left;transform:rotateY(90deg)}
.relief{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  backface-visibility:hidden;
}
.relief-low,.relief-mid{display:none}
.relief-top{
  transform:translateZ(4px);
  opacity:.55;
  filter:saturate(.65) brightness(1.02) drop-shadow(0 1.5px 1px rgba(70,67,47,.18));
}
.flat .relief,.no-relief .relief{display:none}
.map-zones{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  pointer-events:none;
}
.zone{
  position:absolute;
  border-radius:50%;
  transform:translate(-50%,-50%) translateZ(7px);
  border:2px solid var(--zone-color);
  background:var(--zone-fill);
  box-shadow:0 0 0 8px rgba(255,255,255,.28),0 10px 28px rgba(30,62,47,.12);
  opacity:.66;
  transition:opacity .25s,transform .25s;
}
.zone.school{--zone-color:#a78130;--zone-fill:rgba(226,199,126,.2)}
.zone.amenity{--zone-color:#227257;--zone-fill:rgba(51,143,102,.16)}
.zone.nearby{--zone-color:#52646a;--zone-fill:rgba(91,108,115,.13)}
.zone.selected{
  opacity:.95;
  transform:translate(-50%,-50%) translateZ(9px) scale(1.08);
}
.zone.layer-off{opacity:0}
.flat .zone{transform:translate(-50%,-50%) translateZ(3px)}
.map-pins{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  pointer-events:none;
}
.pin{
  position:absolute;
  width:0;
  height:0;
  transform-style:preserve-3d;
  --pin-color:#155541;
  transition:opacity .25s;
}
.pin.gold{--pin-color:#a78130}
.pin.charcoal{--pin-color:#394d55}
.pin.layer-off{opacity:0;pointer-events:none}
.pin-ring{
  width:22px;
  height:22px;
  position:absolute;
  left:-11px;
  top:-11px;
  border:2px solid var(--pin-color);
  border-radius:50%;
  background:#ffffffe8;
  transform:translateZ(6px);
  box-shadow:0 0 0 5px #ffffff55;
}
.pin-stem{
  position:absolute;
  left:-1px;
  bottom:0;
  width:2px;
  height:var(--lift);
  background:var(--pin-color);
  transform-origin:bottom;
  transform:rotateX(-90deg);
  opacity:.85;
}
.pin-button{
  position:absolute;
  left:0;
  top:0;
  transform:translateZ(var(--lift)) rotateZ(var(--unturn)) rotateX(var(--untilt)) scale(var(--pin-scale,1));
  transform-style:preserve-3d;
  pointer-events:auto;
  border:0;
  background:none;
  padding:0;
  width:0;
  height:0;
}
.pin-leader{
  position:absolute;
  left:0;
  top:0;
  width:2px;
  height:0;
  background:var(--pin-color);
  pointer-events:none;
  opacity:0;
  transform-origin:top left;
  transition:opacity .2s;
  z-index:4;
}
.pin.nudged .pin-leader{opacity:.85}
.pin-badge{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  position:absolute;
  left:calc(-22px + var(--badge-offset-x, 0px));
  top:calc(-22px + var(--badge-offset-y, 0px));
  background:var(--pin-color);
  border:3px solid #fffdf3;
  border-radius:50%;
  color:#fff;
  font-size:13px;
  font-weight:700;
  box-shadow:0 5px 12px #263c3233;
  transition:transform .2s ease-out;
  z-index:5;
}
.pin-label{
  position:absolute;
  left:calc(28px + var(--badge-offset-x, 0px));
  top:calc(-18px + var(--badge-offset-y, 0px));
  background:rgba(255,254,250,.97);
  color:var(--ink);
  padding:8px 12px;
  white-space:nowrap;
  border:1px solid #c9d5c3;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  box-shadow:0 6px 18px rgba(36,61,52,.16);
  backdrop-filter:blur(6px);
  display:none;
  z-index:15;
}
.pin-label.pin-label-top{
  top:calc(-52px + var(--badge-offset-y, 0px));
  left:calc(-30px + var(--badge-offset-x, 0px));
}
.pin-label.pin-label-right{
  left:calc(32px + var(--badge-offset-x, 0px));
}
.pin-button:hover .pin-label,
.pin-button:focus-visible .pin-label,
.pin.selected .pin-label{
  display:block;
}
.pin.selected{z-index:20}
.pin.selected .pin-badge{
  outline:4px solid #fff8c3;
  outline-offset:3px;
}
.pin-button:focus-visible{outline:none}
.pin-button:focus-visible .pin-badge{
  outline:4px solid #eac057;
  outline-offset:4px;
}
.flat .pin-stem{display:none}
.flat .pin-button{transform:translateZ(8px) scale(var(--pin-scale,1))}
.map-tools{
  position:absolute;
  right:25px;
  top:50%;
  transform:translateY(-40%);
  z-index:12;
  display:flex;
  flex-direction:column;
  background:#fffefbef;
  border:1px solid #d6ddcd;
  border-radius:13px;
  padding:5px;
  box-shadow:0 8px 28px rgba(55,75,55,.08);
  backdrop-filter:blur(10px);
}
.map-tools button{
  width:42px;
  height:42px;
  border:0;
  background:none;
  font-size:22px;
  border-radius:8px;
  display:grid;
  place-items:center;
}
.map-tools button:hover,.map-tools button.on{
  background:#eaf0e3;
  color:#1c5d3c;
}
.tool-divider{
  height:1px;
  background:var(--line);
  margin:3px 5px;
}
.map-bottom{
  position:absolute;
  bottom:38px;
  left:27px;
  right:27px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  pointer-events:none;
}
.legend{
  display:flex;
  gap:16px;
  font-size:11px;
  font-weight:500;
  background:#fffdf7e0;
  border:1px solid #d5ddcd;
  border-radius:8px;
  padding:9px 13px;
  backdrop-filter:blur(8px);
}
.legend span{white-space:nowrap}
.legend i{
  display:inline-block;
  height:7px;
  width:7px;
  border-radius:50%;
  background:var(--green);
  margin-right:6px;
}
.legend i.gold{background:var(--gold)}
.legend i.charcoal{background:#394d55}
#mapHint{
  font-size:11px;
  font-weight:500;
  color:#43543c;
  background:#f3f5ebd9;
  padding:8px 12px;
  border-radius:6px;
  margin:0;
  border:1px solid #e1e7da;
}
.map-note{
  position:absolute;
  bottom:11px;
  right:27px;
  margin:0;
  font-size:11px;
  color:#64725c;
  pointer-events:none;
}
.map-error,.no-script{
  position:absolute;
  left:20px;
  bottom:85px;
  background:#fffbea;
  padding:18px;
  z-index:20;
  max-width:400px;
  font-size:13px;
}
.map-error[hidden]{display:none}
footer{
  padding:16px 30px;
  font-size:11px;
  line-height:1.65;
  color:#596455;
  border-top:1px solid var(--line);
  background:var(--white);
}
@media(min-width:1500px){
  .explorer{grid-template-columns:360px 1fr}
  .sidebar{padding:34px 30px}
  h1{font-size:45px}
  .place{min-height:58px;font-size:13px}
  .intro-copy{font-size:14px}
}
@media(max-width:900px){
  .byline{display:none}
  .explorer{grid-template-columns:288px 1fr}
  .sidebar{padding:24px 18px}
  h1{font-size:34px}
  .map-top{left:18px;right:18px}
  .map-caption{font-size:11px}
  .map-bottom{
    left:18px;
    right:18px;
    flex-direction:column;
    align-items:flex-start;
    bottom:28px;
    gap:6px;
  }
  .map-tools{right:14px}
  .view-switch button{padding:9px 12px;font-size:11.5px}
  .map-note{bottom:8px;right:18px;font-size:11px}
  .layer-chip{font-size:11px;padding:6px 10px}
}
@media(max-width:640px){
  .site-header{height:72px;padding:0 17px}
  .wordmark{font-size:18px}
  .wordmark span{font-size:11px}
  .header-right{gap:12px}
  .drees-logo{width:72px;max-height:40px}
  .back-link{font-size:11px;padding:9px 12px}
  .explorer{height:auto;min-height:0;display:flex;flex-direction:column}
  .sidebar{display:contents}
  .intro{background:var(--white);padding:22px 20px 14px;order:0}
  .intro .eyebrow{font-size:11px;margin-bottom:8px}
  h1{font-size:32px;margin:0 0 8px}
  h1 br{display:none}
  h1 em:before{content:' '}
  .intro-copy{font-size:13px;margin:0}
  .layer-panel{order:1;background:var(--white);padding:0 18px 12px;border:0;margin:0}
  .layer-title{display:block;font-size:11px}
  .layer-filters{gap:6px}
  .layer-chip{font-size:11px;padding:6px 12px;min-height:34px}
  .landmarks{
    order:2;
    display:flex;
    overflow:auto;
    background:var(--white);
    padding:0 18px 16px;
    gap:8px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .place{
    flex-shrink:0;
    width:auto;
    min-height:44px;
    padding:8px 12px;
    font-size:11.5px;
    border-color:var(--line);
    border-radius:8px;
  }
  .place:hover{transform:none}
  .place-icon{width:26px;height:26px;font-size:11px}
  .place small,.place .arrow{display:none}
  .map-area{
    order:3;
    height:64dvh;
    min-height:440px;
    max-height:680px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .map-top{top:14px;left:14px;right:14px}
  .plan-date{font-size:11px;margin-top:4px}
  .map-caption{font-size:11px;letter-spacing:.12em}
  .view-switch{padding:3px}
  .view-switch button{font-size:11px;min-height:36px;padding:8px 11px}
  .map-tools{right:10px;border-radius:10px;padding:3px}
  .map-tools button{width:38px;height:40px;font-size:22px}
  .map-bottom{bottom:20px;left:12px;right:12px;gap:6px}
  .legend{font-size:11px;gap:12px;padding:8px 11px}
  #mapHint{font-size:11px;margin:0;padding:7px 10px}
  .map-note{font-size:11px;bottom:4px;left:12px;right:auto}
  .detail{order:4;margin:0;padding:22px 20px;background:var(--white);border:0}
  .detail h2{font-size:24px}
  .detail p:not(.eyebrow){font-size:13px;max-width:500px}
  .text-joel{max-width:340px;font-size:13px}
  .original-link{order:5;margin:0;padding:0 20px 22px;background:var(--white);font-size:12px}
  .zone{box-shadow:0 0 0 5px rgba(255,255,255,.22),0 5px 15px rgba(30,62,47,.1)}
  footer{padding:18px 20px;font-size:11px;line-height:1.7}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .positioner,.model{transition:none!important}
}
.map-buildings{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  pointer-events:none;
}
.bldg{
  position:absolute;
  width:0;
  height:0;
  transform-style:preserve-3d;
  --wall:#2f6b52;
  --wall2:#245842;
  --roof:#f3e3b4;
  --rise:0px;
  transition:opacity .35s;
}
.bldg.school{--wall:#b8923e;--wall2:#98772f;--roof:#fbf0cf}
.bldg.tower{--wall:#3d4b52;--wall2:#2c373c;--roof:#e9edee}
.bbody{
  position:absolute;
  left:calc(var(--w)/-2);
  top:calc(var(--d)/-2);
  width:var(--w);
  height:var(--d);
  transform-style:preserve-3d;
  transform:translateZ(var(--rise));
  transition:transform .45s cubic-bezier(.2,.9,.25,1.3);
}
.bf{position:absolute;pointer-events:auto;cursor:pointer}
.bf.top{
  inset:0;
  transform:translateZ(var(--h));
  background:var(--roof);
  border:1.5px solid var(--wall2);
  box-shadow:inset 0 0 0 3px #ffffff66;
  transition:background .3s,box-shadow .3s;
}
.bldg.club .bf.top{background:linear-gradient(135deg,var(--roof) 0 49%,#e2cd8f 51%)}
.bldg.tower .bf.top{background:repeating-linear-gradient(90deg,var(--roof) 0 6px,#d4dadc 6px 7px)}
.bf.front,.bf.back{left:0;width:100%;height:var(--h);background:var(--wall)}
.bf.left,.bf.right{top:0;height:100%;width:var(--h);background:var(--wall2)}
.bf.front{top:100%;transform-origin:top;transform:rotateX(-90deg)}
.bf.back{bottom:100%;transform-origin:bottom;transform:rotateX(90deg)}
.bf.left{right:100%;transform-origin:right;transform:rotateY(-90deg)}
.bf.right{left:100%;transform-origin:left;transform:rotateY(90deg)}
.bldg.tower .bf.front,.bldg.tower .bf.back{background:repeating-linear-gradient(90deg,var(--wall) 0 10px,#4a5960 10px 12px)}
.bldg.club .bf.front,.bldg.club .bf.back{background:linear-gradient(0deg,var(--wall) 0 55%,#d8ecdf 55% 72%,var(--wall) 72%)}
.bf.shadow{
  inset:-4px;
  transform:translate(calc(var(--h)*.18),calc(var(--h)*.12)) translateZ(1px);
  background:rgba(28,45,36,.2);
  filter:blur(4px);
  border-radius:4px;
  pointer-events:none;
}
.bldg:hover,.bldg.hover{--rise:6px}
.bldg:hover .bf.top,.bldg.hover .bf.top{box-shadow:inset 0 0 0 3px #fff7c9,0 0 18px #fff4b0}
.bldg.selected{--rise:10px}
.bldg.selected .bf.top{
  box-shadow:inset 0 0 0 3px #ffe58a,0 0 26px #ffe9a0;
  animation:roofglow 1.8s ease-in-out infinite;
}
@keyframes roofglow{50%{box-shadow:inset 0 0 0 3px #fff,0 0 36px #fff1b8}}
.bldg.layer-off{opacity:0}
.bldg.layer-off .bf{pointer-events:none}
.model.has-focus .bldg:not(.selected){opacity:.55}
.model.has-focus .pin:not(.selected){opacity:.45}
.model.has-focus .pin.layer-off{opacity:0}
.model.has-focus .zone:not(.selected){opacity:.25}
.model.has-focus .zone.layer-off{opacity:0}
.zone.selected{animation:zonepulse 2.2s ease-out infinite}
@keyframes zonepulse{
  0%{box-shadow:0 0 0 0 rgba(255,236,160,.8),0 10px 28px rgba(30,62,47,.12)}
  100%{box-shadow:0 0 0 26px rgba(255,236,160,0),0 10px 28px rgba(30,62,47,.12)}
}
.model.has-focus .map-surface img{filter:saturate(.75) brightness(.96)}
.flat .bbody{transform:translateZ(2px)}
.flat .bf.front,.flat .bf.back,.flat .bf.left,.flat .bf.right{display:none}
.flat .bf.top{transform:translateZ(0)}
.viewport.intro .positioner,.viewport.intro .model{transition-duration:1.8s}
#tour.on{background:#155541;color:#fff}
.pin.home{--pin-color:#b04a2f}
@media(prefers-reduced-motion:reduce){
  .bbody{transition:none}
  .bldg.selected .bf.top,.zone.selected{animation:none}
}


/* v10: a quieter exhibit, more room to explore, and controls with clear intent. */
:root{--green:#174e40;--line:#dce2d8;--white:#fffefa}
.site-header{height:78px;padding:0 28px}.wordmark{font-size:23px}.back-link{font-size:13px}
.explorer{height:calc(100dvh - 136px);min-height:700px;grid-template-columns:310px minmax(0,1fr)}
.sidebar{padding:26px 21px 20px;scrollbar-width:thin;scrollbar-color:#c9d4c6 transparent}
h1{font-size:36px;line-height:1.07}.intro-copy{font-size:13px;line-height:1.6}
.start-tour{width:100%;border:0;border-radius:12px;display:flex;align-items:center;gap:12px;background:#194f40;color:#fff;padding:15px 13px;text-align:left;margin:0 0 20px;flex:none;font-weight:600;font-size:13px;box-shadow:0 7px 16px #12382b16}
.start-tour small{display:block;color:#d2dfce;font-size:11px;font-weight:400;margin-top:4px}.start-tour>span:last-child{margin-left:auto}.play-icon{display:grid;place-items:center;width:31px;height:31px;border:1px solid #ffffff42;border-radius:50%;font-size:11px}.start-tour:hover{background:#25644f}
.layer-panel{padding-top:0;border-top:0;margin-bottom:15px}.layer-chip{min-height:40px;font-size:12px}
.place-search{display:block;margin:0 0 12px}.place-search>span{font-size:10px;letter-spacing:.16em;color:#718073;font-weight:700}.place-search input{font:inherit;font-size:13px;width:100%;border:1px solid #dce2d8;border-radius:9px;padding:11px 12px;background:#f8f9f3;color:#243d34;margin-top:8px;min-height:43px}.place-search input:focus{outline:2px solid #659979;outline-offset:2px}.empty-search{font-size:13px;color:#66746a;line-height:1.5}.place.hidden-by-search{display:none}
.place{padding:9px 8px;min-height:53px}.place-icon{background:#fffefa}.detail{padding-top:18px}.detail h2{font-size:22px}.detail .eyebrow{font-size:10px}.original-link{margin-top:15px}
.map-area{isolation:isolate;background:radial-gradient(ellipse at 48% 35%,#fcfbef 0%,#e5ecdf 50%,#bbcbb9 100%)}
.map-area:before{background-image:linear-gradient(#809b7120 1px,transparent 1px),linear-gradient(90deg,#809b7120 1px,transparent 1px);background-size:64px 64px;opacity:.32;transform:perspective(500px) rotateX(48deg) scale(1.5);transform-origin:50% 90%;mask-image:linear-gradient(transparent 12%,black)}
.stage-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 35% 3%,#fff9dbd0,transparent 60%),linear-gradient(135deg,transparent 55%,#22583a17);z-index:-1}
.map-top{top:20px;left:24px;right:24px}.map-caption{font-size:10px;letter-spacing:.13em}.plan-date{font-size:10px;letter-spacing:.09em}.view-switch{box-shadow:0 4px 24px #1a392918;border:1px solid #fff8}.view-switch button{font-size:12px;min-height:40px}
.model{--paper-depth:22px}.map-surface{border:1px solid #87947d;box-shadow:inset 0 0 0 1px #fff9}.map-surface img{filter:saturate(1.09) contrast(1.035)}
.base-bottom{transform:translateZ(-22px);background:#879477;box-shadow:0 22px 22px #26432828,0 55px 60px #2643282e,0 105px 125px #26432818}
.base-side{background:linear-gradient(#ebe5d3 0 12%,#c7cbb4 13% 38%,#99a68a 39% 83%,#788f6f 84%)}.side-front,.side-back{height:22px}.side-left,.side-right{width:22px;background:linear-gradient(90deg,#d9ddc8,#92a184)}
.bldg{--wall:#466b56;--wall2:#284b3c;--roof:#e8dfc2}.bldg.school{--wall:#a99058;--wall2:#7f704e;--roof:#f0e6c9}.bldg.tower{--wall:#52676a;--wall2:#344b51;--roof:#dce1d9}
.bf.top{box-shadow:inset 0 0 0 2px #ffffff80,0 0 1px #fff}.bldg.club .bf.top{background:linear-gradient(0deg,transparent 45%,#a99b7260 46% 52%,transparent 53%),repeating-linear-gradient(90deg,transparent 0 9px,#ffffff18 9px 10px),linear-gradient(135deg,#f0e7c8 0 49%,#c8bd9c 50%);border-radius:2px}.bldg.club .bf.front,.bldg.club .bf.back{background:repeating-linear-gradient(90deg,var(--wall) 0 8px,#c8e0d8 9px 14px,var(--wall) 15px 21px);border-bottom:4px solid var(--wall2)}
.bf.shadow{transform:translate(calc(var(--h)*.65),calc(var(--h)*.48)) translateZ(1px);background:#203b334a;filter:blur(3px)}
.bldg.selected{--rise:5px}.bldg.selected .bf.top{animation:none;box-shadow:inset 0 0 0 2px #fff4b1,0 0 16px #fff2b885}.zone{border-width:1.5px;opacity:.45}.zone.selected{animation:none;box-shadow:0 0 0 7px #fff4ba60,0 7px 20px #183f2630}.pin-ring{box-shadow:0 0 0 4px #ffffff55}.pin-badge{width:42px;height:42px;left:calc(-21px + var(--badge-offset-x,0px));top:calc(-21px + var(--badge-offset-y,0px));border-width:2px;font-size:12px;box-shadow:0 5px 14px #122f3845}.pin.selected .pin-badge{outline:3px solid #d6b267;outline-offset:4px}.model.has-focus .map-surface img{filter:saturate(.92) brightness(.98)}.pin-label{font-size:12px;border-radius:6px;background:#fffefa}
.camera-panel{position:absolute;z-index:11;left:24px;top:85px;display:flex;gap:8px;align-items:center;pointer-events:auto}
.interaction-switch{display:flex;padding:3px;background:#fffefae8;border:1px solid #d0d9ca;border-radius:9px;backdrop-filter:blur(10px)}.interaction-switch button{border:0;background:none;padding:9px 12px;min-height:38px;font-size:12px;border-radius:6px}.interaction-switch button.selected{background:#e2ebdb;color:#174e40;font-weight:700}
.angle-control{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:10px;letter-spacing:.02em;padding:8px 12px;background:#fffefae8;border:1px solid #d0d9ca;border-radius:9px;min-width:152px}.angle-control output{font-weight:700}.angle-control input{width:100%;grid-column:1/-1;accent-color:#174e40;height:10px;margin:0}.angle-control:focus-within{outline:2px solid #a58a47;outline-offset:2px}.expand-map{width:46px;height:46px;background:#fffefae8;border:1px solid #d0d9ca;border-radius:9px;font-size:26px;line-height:1}
.map-tools{right:20px;box-shadow:0 8px 28px #123d2920;border-color:#fff8;border-radius:14px}.map-tools button{width:42px;height:43px}.viewport.moving{cursor:move}.viewport.expanded{touch-action:none}
.focus-card{position:absolute;z-index:13;left:24px;bottom:76px;width:min(370px,calc(100% - 100px));border:1px solid #fff9;background:#fffefaf5;box-shadow:0 15px 48px #173e2c30;border-radius:16px;padding:16px 18px 0;backdrop-filter:blur(14px)}.focus-card[hidden],#focusDescription[hidden],#pauseTour[hidden]{display:none}.focus-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.focus-top p{font-size:9px;letter-spacing:.12em;font-weight:700;color:#5c745c;margin:0}.focus-top>button{border:0;background:none;font-size:24px;line-height:1;width:30px;height:30px;margin:-7px -9px 0 0;border-radius:50%}.focus-card h2{font-size:25px;line-height:1.15;margin:5px 0 12px}.focus-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}.focus-actions button{border:0;background:none;font-size:11px;padding:8px 0;color:#2d5c48;text-decoration:underline;text-underline-offset:4px;min-height:36px}.focus-actions button:first-child{font-weight:600;text-decoration:none}.focus-actions span{margin-left:5px}#focusDescription p{font-size:12px;color:#5b6d61;line-height:1.6;margin:8px 0 12px}#focusDescription a{font-size:12px;font-weight:700;display:block;margin-bottom:18px;text-decoration:none}.tour-navigation{display:flex;align-items:center;gap:10px;margin:6px -18px 0;padding:7px 11px;border-top:1px solid #e0e5d9;border-radius:0 0 16px 16px;background:#f5f6ee}.tour-navigation button{min-width:36px;min-height:36px;border:0;background:none;font-size:18px;border-radius:7px}.tour-navigation button:hover{background:#e3ecdc}#tourProgress{font-size:11px;color:#5b6d61;margin-right:auto}#pauseTour{font-size:11px;font-weight:600;color:#174e40}
.map-bottom{left:24px;right:24px;bottom:35px}.legend{border:0;box-shadow:0 2px 10px #26432810;font-size:10px}.map-note{font-size:10px;bottom:12px;right:24px}#mapHint{font-size:10px;background:transparent;border:0;padding:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.map-area:fullscreen,.map-area.is-expanded{height:100dvh;min-height:100dvh;max-height:none;width:100vw}.map-area.is-expanded{position:fixed;inset:0;z-index:1000}.map-area:fullscreen .map-top,.is-expanded .map-top{top:max(24px,env(safe-area-inset-top))}.map-area:fullscreen .focus-card,.is-expanded .focus-card{max-width:430px}.flat .base-bottom{box-shadow:0 15px 30px #26432825}
@media(min-width:1500px){.explorer{grid-template-columns:340px 1fr}.sidebar{padding:30px 26px}h1{font-size:42px}.focus-card{width:390px}}
@media(max-width:1000px) and (min-width:641px){.explorer{grid-template-columns:270px 1fr}.sidebar{padding:23px 17px}h1{font-size:32px}.camera-panel{left:18px;gap:6px}.angle-control{min-width:125px}.map-caption{max-width:180px;line-height:1.5}.map-top{left:18px;right:18px}.focus-card{left:18px;width:calc(100% - 90px);bottom:90px}.map-bottom{left:18px}.map-bottom #mapHint{display:none}}
@media(max-width:640px){.site-header{height:68px;padding:0 16px}.wordmark{font-size:18px}.wordmark span{font-size:9px}.header-right{gap:10px}.drees-logo{width:65px}.back-link{padding:9px 11px;font-size:11px}.explorer{height:auto;min-height:0;display:flex}.intro{padding:20px 18px 10px}h1{font-size:30px;max-width:370px}h1 br{display:none}.intro-copy{font-size:12px;line-height:1.5}.start-tour{order:1;width:calc(100% - 36px);margin:2px 18px 15px;padding:12px 14px;border-radius:10px;font-size:13px}.start-tour small{display:inline;font-size:10px;margin-left:9px}.play-icon{width:27px;height:27px}.layer-panel{order:2;padding:0 18px 10px;margin:0}.layer-title{display:none}.layer-chip{min-height:38px}.place-search{order:3;margin:0;background:#fffefa;padding:0 18px 10px}.place-search>span{display:none}.place-search input{margin:0;min-height:40px}.landmarks{order:4;padding:0 18px 13px}.place{min-height:42px;padding:7px 10px}.empty-search{order:4;padding:10px 18px;margin:0;background:#fffefa}.map-area{order:5;height:72dvh;min-height:510px;max-height:740px}.detail{order:6;padding:22px 18px}.original-link{order:7}.map-top{top:14px;left:14px;right:14px}.map-caption{font-size:9px;letter-spacing:.08em;max-width:140px;line-height:1.4}.plan-date{font-size:9px}.view-switch button{padding:8px 9px;min-height:36px;font-size:10px}.camera-panel{top:72px;left:13px;right:13px;gap:7px}.interaction-switch button{padding:8px 10px;font-size:11px;min-height:35px}.angle-control{min-width:0;flex:1;max-width:160px;font-size:9px;padding:7px 10px}.expand-map{margin-left:auto;width:42px;height:42px;font-size:24px}.map-tools{right:10px;top:42%;padding:3px}.map-tools button{width:36px;height:38px;font-size:20px}.map-tools #tour,.map-tools #rotate,.map-tools .tool-divider:nth-of-type(2){display:none}.focus-card{left:13px;bottom:58px;width:calc(100% - 26px);padding:12px 14px 0;border-radius:12px}.focus-top p{font-size:8px}.focus-card h2{font-size:21px;margin:4px 0 5px}.focus-actions button{font-size:11px;min-height:34px}.tour-navigation{margin:3px -14px 0;padding:5px 9px}.tour-navigation button{min-height:32px;min-width:32px}#focusDescription p{max-height:96px;overflow:auto;font-size:11px}.map-bottom{left:13px;right:13px;bottom:24px}.legend{padding:8px 10px;font-size:9px;gap:13px}#mapHint{display:none}.map-note{bottom:7px;left:13px;right:auto;font-size:9px}.focus-card:not([hidden])~.map-bottom{pointer-events:none}.map-area:fullscreen,.map-area.is-expanded{height:100dvh}.start-tour>span:last-child{font-size:16px}footer{font-size:10px;padding:16px 18px}}
@media(prefers-reduced-motion:reduce){.pin-badge,.bbody,.zone,.place,.map-surface img{transition:none!important}.stage-glow{animation:none!important}}
body.map-expanded{overflow:hidden}.copy-fallback{width:100%;padding:10px;font:inherit;font-size:12px;margin:8px 0;border:1px solid #9baa91;border-radius:6px}.pin.layer-off .pin-button{pointer-events:none}.focus-card button:focus-visible{outline-offset:2px}.start-tour:focus-visible{outline-offset:3px}
@media(max-width:640px){.map-area{order:2}.layer-panel{order:3;padding-top:14px}.place-search{order:4}.landmarks,.empty-search{order:5}.detail{order:6}.intro{padding-bottom:12px}.start-tour small{display:block;margin:3px 0 0;font-size:10px}.start-tour{margin-bottom:16px}}