Above the Lights
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Above the Lights | 671 Scenic Rim Drive</title><meta name="description" content="Explore Above the Lights, a 24-page photographic tour of 671 Scenic Rim Drive."><style> @page { size: 8.5in 11in; margin: 0; } html, body { margin: 0; background: #F2EEE6; -webkit-print-color-adjust: exact; print-color-adjust: exact; } a { color: #2E4038; } a:hover { color: #232019; } .pg { position: relative; width: 816px; height: 1056px; overflow: hidden; background: #F2EEE6; color: #232019; font-family: 'Source Serif 4', 'Iowan Old Style', Georgia, serif; font-size: 15px; line-height: 21px; } .pg img { display: block; } .d { font-family: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif; font-weight: 500; line-height: 0.96; letter-spacing: -0.012em; text-wrap: balance; } .d em { font-style: italic; font-weight: 500; } .d .s { font-weight: 700; letter-spacing: -0.02em; } .deck { font-family: 'Source Serif 4', Georgia, serif; font-weight: 400; font-size: 17px; line-height: 25px; color: #232019; text-wrap: pretty; } .body p { margin: 0 0 10px 0; text-wrap: pretty; } .body p:last-child { margin-bottom: 0; } .cap { font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; font-size: 12px; line-height: 16px; color: #5A564E; text-wrap: pretty; } .cap b { font-weight: 600; color: #232019; } .lab { font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; line-height: 14px; color: #2E4038; } .kick { font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; line-height: 16px; color: #2E4038; } .num { font-family: 'Cormorant Garamond', Garamond, serif; font-weight: 600; line-height: 1; } .folio { position: absolute; bottom: 30px; font-family: 'Source Sans 3', Arial, sans-serif; font-size: 10.5px; letter-spacing: 0.06em; color: #A39F94; } .rule { height: 1px; background: #A39F94; } .iv { color: #F2EEE6; } .iv .cap { color: #D3CBC0; } .iv .cap b { color: #F2EEE6; } .iv .lab, .iv .kick { color: #D3CBC0; } .iv .rule { background: rgba(242,238,230,0.3); } .iv .deck, .iv .body { color: #F2EEE6; } .chip { background: #F2EEE6; padding: 14px 16px; } .fig { position: absolute; overflow: hidden; } .toc { font-family: 'Source Sans 3', Arial, sans-serif; font-size: 12.5px; line-height: 16px; } .toc div { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid #DAD5CA; } .toc .n { font-family: 'Cormorant Garamond', Garamond, serif; font-weight: 600; font-size: 18px; line-height: 16px; color: #2E4038; width: 22px; flex: none; } *{box-sizing:border-box} .pg{flex:none;box-sizing:content-box}.pg img{max-width:none}.d{font-kerning:normal;font-optical-sizing:auto}.body{hyphens:none}.body p{text-wrap:pretty}.folio{color:#777267}.cap{letter-spacing:.005em} html,body{background:#292a27}body{margin:0}.toolbar{position:sticky;top:0;z-index:10;background:#20211fee;color:#eee9df;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;font:13px system-ui;border-bottom:1px solid #45463f;backdrop-filter:blur(16px)}.brand{font:22px Georgia,serif}.toolbar small{display:block;font:10px system-ui;letter-spacing:.14em;margin-top:5px;color:#bdbbb1;text-transform:uppercase}.tools{display:flex;gap:8px;align-items:center}.toolbar button,.toolbar select{font:12px system-ui;color:#eee9df;background:#33352f;border:1px solid #626459;border-radius:3px;padding:9px 12px;cursor:pointer}.toolbar button:hover{background:#505347}.proof{font:11px system-ui;color:#bcbcb0;text-align:center;padding:20px 16px 0}.book{padding:28px 20px 64px}.sheet{margin:0 auto 32px;position:relative}.spread{display:flex;transform-origin:top left;box-shadow:0 14px 48px #0005}.spread.pair:after{content:"";position:absolute;left:815px;top:0;bottom:0;width:2px;background:#0002;pointer-events:none}.single .spread:after{display:none}.caption{text-align:center;color:#bcbcb0;font:10px system-ui;letter-spacing:.12em;padding:10px;text-transform:uppercase} .printnote{display:none} @media(max-width:640px){.brand{font-size:17px}.toolbar{padding:12px;gap:10px}.toolbar small{font-size:8px}.tools{gap:4px}.toolbar button,.toolbar select{padding:8px;font-size:10px}.proof{line-height:1.5}.book{padding:20px 8px}} @media print{@page{size:8.5in 11in;margin:0}html,body{background:white}.toolbar,.proof,.caption{display:none!important}.book{padding:0}.sheet{width:auto!important;height:auto!important;margin:0}.spread{display:block;transform:none!important;box-shadow:none}.spread:after{display:none}.pg{width:8.5in;height:11in;break-after:page;page-break-after:always}.sheet:last-child .pg:last-child{break-after:auto;page-break-after:auto}} .intro-title{font-size:68px;line-height:.98}.detail-title{font-size:64px;line-height:.98}.intro-columns{display:grid;grid-template-columns:1fr 1fr;gap:26px;font-size:15px;line-height:22px}.intro-columns p{margin:0;text-wrap:pretty}.mini-index{border-top:1px solid #a39f94;padding-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px;font:10px 'Source Sans 3',sans-serif;letter-spacing:.09em}.sheet{scroll-margin-top:100px} /* Edition 02: contemporary editorial refinements */ .modern-word{font-family:'Source Sans 3',Helvetica,Arial,sans-serif;font-weight:600;font-size:.80em;letter-spacing:-.035em;font-style:normal}.pg .d em{font-weight:500}.pg .lab{letter-spacing:.13em;font-size:10.5px}.pg .cap{font-size:12px;line-height:16px}.mini-index{font-weight:600} /* Edition 03: art-directed feature compositions */ .pg.iv .folio{color:#c2b8ab!important}.pg .folio{font-size:10px;letter-spacing:.09em}.toolbar{border-bottom:1px solid #666354}.toolbar .brand{letter-spacing:-.02em} @media screen{html,body{height:100%;overflow:hidden}body{display:flex;flex-direction:column;background:#20221f}.toolbar{position:relative;flex-wrap:wrap;flex:none;padding:12px 20px}.toolbar button,.toolbar select{font-size:14px;min-height:42px}.brand{font-size:22px}.book{flex:1;min-height:0;padding:12px;overflow:auto;display:flex;align-items:center;justify-content:center;perspective:2200px;touch-action:pan-x pan-y}.sheet{margin:0;flex:none}.spread{position:relative;transform-origin:top left;box-shadow:0 16px 55px #0009}.reader-footer{display:flex;align-items:center;justify-content:center;gap:18px;padding:10px 14px 16px;color:#ddd8cd;font:14px system-ui}.reader-footer button{background:#343b32;border:1px solid #77796b;color:#f2eee6;border-radius:4px;padding:10px 20px;font:16px system-ui;cursor:pointer}.reader-footer button:disabled{opacity:.35;cursor:default}button:focus-visible,select:focus-visible{outline:2px solid #d6c297;outline-offset:3px}.book.zoomed{display:block}.book.zoomed .sheet{margin:auto}.hint{color:#bdbbb1;font:12px system-ui}.turn-next{animation:next .46s ease-out}.turn-prev{animation:prev .46s ease-out}@keyframes next{from{opacity:.45;transform:rotateY(-13deg) translateX(18px)}to{opacity:1;transform:none}}@keyframes prev{from{opacity:.45;transform:rotateY(13deg) translateX(-18px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.turn-next,.turn-prev{animation:none}}@media(max-width:700px){.toolbar{padding:10px;gap:8px}.tools{flex-wrap:wrap}.toolbar small{font-size:9px}.toolbar button,.toolbar select{font-size:12px;padding:7px}.reader-footer{gap:12px}.hint{display:none}}} @media print{.reader-footer{display:none!important}.book{display:block!important}.sheet{display:block!important}} </style><style>body,.book{background:#222426}.toolbar{background:#1d1f21;border-color:#44484b}.toolbar button,.toolbar select,.reader-footer button{background:#303438;border-color:#61686e}.toolbar small{color:#bfc8cd}.brand{font-family:Arial,sans-serif;font-size:18px;letter-spacing:.04em}.pg{width:816px;height:1056px;background:#eeeae4}.toolbar button:hover,.reader-footer button:hover{background:#454c52}</style></head><body><header class="toolbar"><div class="brand">Above the Lights<small>671 Scenic Rim Drive</small></div><div class="tools"><select id="jump" aria-label="Go to page"></select><button id="zoom" aria-pressed="false">Zoom in</button><button id="print">Save PDF / Print</button></div></header><main class="book" id="book" aria-label="Property booklet"></main><footer class="reader-footer"><button id="prev" aria-label="Previous pages">← Previous</button><span id="status" aria-live="polite"></span><button id="next" aria-label="Next pages">Next →</button><span class="hint">Swipe or use arrow keys</span></footer><template id="pages"><article class="pg" data-page="1"><img src="https://media-production.lp-cdn.com/media/4f8432f7-a47a-4146-a2e7-e48a2576aab7" alt="671 Scenic Rim Drive — booklet page 1" style="position:absolute;width:400%;height:300%;max-width:none;left:-0%;top:-0%;" loading="eager"></article><article class="pg" data-page="2"><img src="https://media-production.lp-cdn.com/media/4f8432f7-a47a-4146-a2e7-e48a2576aab7" alt="671 Scenic Rim Drive — booklet page 2" style="position:absolute;width:400%;height:300%;max-width:none;left:-100%;top:-0%;" loading="eager"></article><article class="pg" data-page="3"><img src="https://media-production.lp-cdn.com/media/4f8432f7-a47a-4146-a2e7-e48a2576aab7" alt="671 Scenic Rim Drive — booklet page 3" style="position:absolute;width:400%;height:300%;max-width:none;left:-200%;top:-0%;" loading="eager"></article><article class="pg" data-page="4"><img src="https://media-production.lp-cdn.com/media/4f8432f7-a47a-4146-a2e7-e48a2576aab7" alt="671 Scenic Rim Drive — booklet page 4" style="position:absolute;width:400%;height:300%;max-width:none;left:-300%;top:-0%;" loading="eager"></article><article class="pg" data-page="5"><img src="https://media-production.lp-cdn.com/media/4f8432f7-a47a-4146-a2e7-e48a2576aab7" alt="671 Scenic Rim Drive — booklet page 5" style="position:absolute;width:400%;height:300%;max-width:none;left:-0%;top:-100%;" loading="eager"></article><article class="pg" data-page="6"><img src="https://media-production.lp-cdn.com/media/4f8432f7-a47a-4146-a2e7-e48a2576aab7" alt="671 Scenic Rim Drive — booklet page 6" style="position:absolute;width:400%;height:300%;max-width:none;left:-100%;top:-100%;" loading="eager"></article><article class="pg" data-page="7"><img src="https://media-production.lp-cdn.com/media/4f8432f7-a47a-4146-a2e7-e48a2576aab7" alt="671 Scenic Rim Drive — booklet page 7" style="position:absolute;width:400%;height:300%;max-width:none;left:-200%;top:-100%;" loading="eager"></article><article class="pg" data-page="8"><img src="https://media-production.lp-cdn.com/media/4f8432f7-a47a-4146-a2e7-e48a2576aab7" alt="671 Scenic Rim Drive — booklet page 8" style="position:absolute;width:400%;height:300%;max-width:none;left:-300%;top:-100%;" loading="eager"></article><article class="pg" data-page="9"><img src="https://media-production.lp-cdn.com/media/4f8432f7-a47a-4146-a2e7-e48a2576aab7" alt="671 Scenic Rim Drive — booklet page 9" style="position:absolute;width:400%;height:300%;max-width:none;left:-0%;top:-200%;" loading="eager"></article><article class="pg" data-page="10"><img src="https://media-production.lp-cdn.com/media/4f8432f7-a47a-4146-a2e7-e48a2576aab7" alt="671 Scenic Rim Drive — booklet page 10" style="position:absolute;width:400%;height:300%;max-width:none;left:-100%;top:-200%;" loading="eager"></article><article class="pg" data-page="11"><img src="https://media-production.lp-cdn.com/media/4f8432f7-a47a-4146-a2e7-e48a2576aab7" alt="671 Scenic Rim Drive — booklet page 11" style="position:absolute;width:400%;height:300%;max-width:none;left:-200%;top:-200%;" loading="eager"></article><article class="pg" data-page="12"><img src="https://media-production.lp-cdn.com/media/4f8432f7-a47a-4146-a2e7-e48a2576aab7" alt="671 Scenic Rim Drive — booklet page 12" style="position:absolute;width:400%;height:300%;max-width:none;left:-300%;top:-200%;" loading="eager"></article><article class="pg" data-page="13"><img src="https://media-production.lp-cdn.com/media/77bd1de0-1e38-4436-9e57-7a90aa35f771" alt="671 Scenic Rim Drive — booklet page 13" style="position:absolute;width:400%;height:300%;max-width:none;left:-0%;top:-0%;" loading="eager"></article><article class="pg" data-page="14"><img src="https://media-production.lp-cdn.com/media/77bd1de0-1e38-4436-9e57-7a90aa35f771" alt="671 Scenic Rim Drive — booklet page 14" style="position:absolute;width:400%;height:300%;max-width:none;left:-100%;top:-0%;" loading="eager"></article><article class="pg" data-page="15"><img src="https://media-production.lp-cdn.com/media/77bd1de0-1e38-4436-9e57-7a90aa35f771" alt="671 Scenic Rim Drive — booklet page 15" style="position:absolute;width:400%;height:300%;max-width:none;left:-200%;top:-0%;" loading="eager"></article><article class="pg" data-page="16"><img src="https://media-production.lp-cdn.com/media/77bd1de0-1e38-4436-9e57-7a90aa35f771" alt="671 Scenic Rim Drive — booklet page 16" style="position:absolute;width:400%;height:300%;max-width:none;left:-300%;top:-0%;" loading="eager"></article><article class="pg" data-page="17"><img src="https://media-production.lp-cdn.com/media/77bd1de0-1e38-4436-9e57-7a90aa35f771" alt="671 Scenic Rim Drive — booklet page 17" style="position:absolute;width:400%;height:300%;max-width:none;left:-0%;top:-100%;" loading="eager"></article><article class="pg" data-page="18"><img src="https://media-production.lp-cdn.com/media/77bd1de0-1e38-4436-9e57-7a90aa35f771" alt="671 Scenic Rim Drive — booklet page 18" style="position:absolute;width:400%;height:300%;max-width:none;left:-100%;top:-100%;" loading="eager"></article><article class="pg" data-page="19"><img src="https://media-production.lp-cdn.com/media/77bd1de0-1e38-4436-9e57-7a90aa35f771" alt="671 Scenic Rim Drive — booklet page 19" style="position:absolute;width:400%;height:300%;max-width:none;left:-200%;top:-100%;" loading="eager"></article><article class="pg" data-page="20"><img src="https://media-production.lp-cdn.com/media/77bd1de0-1e38-4436-9e57-7a90aa35f771" alt="671 Scenic Rim Drive — booklet page 20" style="position:absolute;width:400%;height:300%;max-width:none;left:-300%;top:-100%;" loading="eager"></article><article class="pg" data-page="21"><img src="https://media-production.lp-cdn.com/media/77bd1de0-1e38-4436-9e57-7a90aa35f771" alt="671 Scenic Rim Drive — booklet page 21" style="position:absolute;width:400%;height:300%;max-width:none;left:-0%;top:-200%;" loading="eager"></article><article class="pg" data-page="22"><img src="https://media-production.lp-cdn.com/media/77bd1de0-1e38-4436-9e57-7a90aa35f771" alt="671 Scenic Rim Drive — booklet page 22" style="position:absolute;width:400%;height:300%;max-width:none;left:-100%;top:-200%;" loading="eager"></article><article class="pg" data-page="23"><img src="https://media-production.lp-cdn.com/media/77bd1de0-1e38-4436-9e57-7a90aa35f771" alt="671 Scenic Rim Drive — booklet page 23" style="position:absolute;width:400%;height:300%;max-width:none;left:-200%;top:-200%;" loading="eager"></article><article class="pg" data-page="24"><img src="https://media-production.lp-cdn.com/media/77bd1de0-1e38-4436-9e57-7a90aa35f771" alt="671 Scenic Rim Drive — booklet page 24" style="position:absolute;width:400%;height:300%;max-width:none;left:-300%;top:-200%;" loading="eager"></article></template><script> const source=[...document.querySelector('#pages').content.children],book=document.querySelector('#book'),jump=document.querySelector('#jump'); let page=Math.max(0,Math.min(source.length-1,(parseInt(location.hash.slice(1))||1)-1)),zoom=false; source.forEach((p,i)=>jump.add(new Option('Page '+(i+1),i))); function groups(){let g=[[0]];for(let i=1;i<source.length;i+=2)g.push(i+1<source.length?[i,i+1]:[i]);return g} function render(dir=0){const g=groups(),idx=g.findIndex(a=>a.includes(page)),current=g[idx];book.replaceChildren();const sheet=document.createElement('section');sheet.className='sheet';const spread=document.createElement('div');spread.className='spread '+(current.length===2?'pair':'single');current.forEach(i=>spread.append(source[i].cloneNode(true)));sheet.append(spread);book.append(sheet);if(dir)sheet.classList.add(dir>0?'turn-next':'turn-prev');document.querySelector('#status').textContent=current.map(i=>i+1).join('–')+' / '+source.length;document.querySelector('#prev').disabled=idx===0;document.querySelector('#next').disabled=idx===g.length-1;jump.value=page;book.classList.toggle('zoomed',zoom);fit();try{history.replaceState(null,'','#'+(page+1))}catch{} } function fit(){const sh=book.firstElementChild;if(!sh)return;const sp=sh.firstElementChild,w=sp.children.length*816;const scale=zoom?1:Math.max(.05,Math.min(1,(book.clientWidth-24)/w,(book.clientHeight-24)/1056));sp.style.transform='scale('+scale+')';sh.style.width=w*scale+'px';sh.style.height=1056*scale+'px'} function turn(d){const g=groups(),i=g.findIndex(a=>a.includes(page)),n=i+d;if(n<0||n>=g.length)return;page=g[n][0];render(d)} document.querySelector('#prev').onclick=()=>turn(-1);document.querySelector('#next').onclick=()=>turn(1);jump.onchange=()=>{page=+jump.value;render()};document.querySelector('#zoom').onclick=e=>{zoom=!zoom;e.target.textContent=zoom?'Fit pages':'Zoom in';e.target.setAttribute('aria-pressed',zoom);render()}; addEventListener('keydown',e=>{if(/SELECT|INPUT|TEXTAREA/.test(e.target.tagName))return;if(e.key==='ArrowRight'){e.preventDefault();turn(1)}if(e.key==='ArrowLeft'){e.preventDefault();turn(-1)}if(e.key==='Home'){page=0;render()}if(e.key==='End'){page=source.length-1;render()}}); let touch=null;book.addEventListener('touchstart',e=>{touch=e.touches.length===1?[e.touches[0].clientX,e.touches[0].clientY]:null},{passive:true});book.addEventListener('touchend',e=>{if(!touch||zoom)return;const dx=e.changedTouches[0].clientX-touch[0],dy=e.changedTouches[0].clientY-touch[1];if(Math.abs(dx)>60&&Math.abs(dx)>Math.abs(dy)*1.5)turn(dx<0?1:-1);touch=null},{passive:true}); addEventListener('resize',()=>render());addEventListener('hashchange',()=>{page=Math.max(0,Math.min(source.length-1,(parseInt(location.hash.slice(1))||1)-1));render()}); addEventListener('beforeprint',()=>{book.replaceChildren();source.forEach(p=>{const sh=document.createElement('section');sh.className='sheet';const sp=document.createElement('div');sp.className='spread';sp.append(p.cloneNode(true));sh.append(sp);book.append(sh)})});addEventListener('afterprint',()=>render());document.querySelector('#print').onclick=()=>window.print();render(); </script></body></html>