/* Land Report, survey-sheet design (DESIGN.md). Tokens first; nothing hard-coded after them. */
@font-face{font-family:Avenir;font-weight:400;font-display:swap;src:local('Avenir Roman'),local('Avenir-Roman'),local('Avenir')}
:root{color-scheme:light;
/* structure */
--teal:#00473E;--ink:#1C2322;--night:#0E1A17;--paper:#F5F0E6;--card:#FFFDF8;--line:#D8D0BF;--line-2:#E6DFD0;--soft:#56625F;
/* the three data states: meets, outside, and ink for everything else */
--meets-mark:#13A021;--meets-text:#0B6B16;--meets-bg:#E9F4DF;--outside:#7A4B00;--outside-bg:#FFF0CC;
/* type: three voices */
--display:'Fraunces',Georgia,serif;--label:'Barlow Semi Condensed','Arial Narrow',sans-serif;--body:Avenir,'Nunito Sans',system-ui,sans-serif;
--t-h1:clamp(32px,3.6vw,50px);--t-h2:clamp(27px,2.9vw,36px);--t-q:19px;--t-start:clamp(19px,1.6vw,22px);
--t-body:17px;--t-lead:clamp(17px,1.4vw,19px);--t-small:16px;--t-label:13px;--t-fig:44px;
/* spacing scale */
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;
--sp2:2px;--sp6:6px;--sp10:10px;--sp20:20px;--sp28:28px;--sp36:36px;--sp56:56px;
--gutter:24px;--bar-item:36px;--r:3px;--track:.12em;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-body)/1.55 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,p,ul,ol,dl,dd,dt,figure{margin:0;padding:0}ul,ol{list-style:none}img{display:block;max-width:100%}
html:not(.js) .js-only{display:none}
.wrap{max-width:calc(1206px + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.label,.tier,dt{font:600 var(--t-label)/1.2 var(--label);letter-spacing:var(--track);text-transform:uppercase;color:var(--soft)}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.narrow{display:none}

/* bar and buttons */
.bar{background:var(--teal)}
.bar .wrap{height:64px;display:flex;align-items:center;justify-content:space-between}
.acts{display:flex;gap:var(--s2)}
.bar img{height:var(--bar-item);width:auto}
.bar .btn{position:relative;min-height:var(--bar-item);height:var(--bar-item);padding:0 14px;font-size:13px}
.bar .btn::after{content:"";position:absolute;inset:-4px -2px}
.btn{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 18px;font:600 14px/1 var(--label);letter-spacing:var(--track);
text-transform:uppercase;text-decoration:none;white-space:nowrap;border:1.5px solid transparent;border-radius:var(--r);cursor:pointer}
.btn.light{background:var(--card);color:var(--teal)}
.btn.ghost{background:none;color:#fff;border-color:rgba(255,255,255,.6)}
.btn.primary{background:var(--teal);color:#fff}
.btn.line{background:none;color:var(--teal);border-color:var(--teal)}
.bar :focus-visible,.offer :focus-visible{outline-color:#fff}
.testdata{background:var(--night);color:#fff;text-align:center;font:600 14px/1.3 var(--label);letter-spacing:.06em;padding:var(--s2) var(--s4)}

/* hero: the aerial is the document */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp56);padding-top:var(--sp56);align-items:start}
.aerial{position:relative;container-type:size;aspect-ratio:1;overflow:hidden;background:var(--night);border-radius:var(--r);
box-shadow:0 1px 0 rgba(28,35,34,.08),0 18px 32px -24px rgba(14,26,23,.55);--u:calc(100cqmax / 2912);--off:20px}
.aerial img,.rings{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.aerial.none{display:grid;place-items:center;padding:var(--s6);color:#fff;text-align:center}
.rings circle,.rings line{fill:none;stroke:#fff;stroke-width:2px;vector-effect:non-scaling-stroke}
.rings .far{stroke-dasharray:8 6}.rings .spot{fill:#fff;stroke:none}.rings .lead{stroke-width:1.5px}
.pin{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--teal);border:4px solid #fff;box-shadow:0 0 0 1.5px var(--night)}
.chip,.tagged{position:absolute;font:600 13px/1 var(--label);letter-spacing:.02em;white-space:nowrap;padding:var(--sp6) 8px;border-radius:2px}
.chip{color:#fff;background:rgba(14,26,23,.88)}
.tagged{color:var(--ink);background:var(--card);left:calc(50% + var(--u) * var(--x));top:calc(50% + var(--u) * var(--y));transform:translate(-50%,-50%)}
.nesw{left:calc(50% + var(--dx) * (var(--u) * 1000 + var(--off)));top:calc(50% + var(--dy) * (var(--u) * 1000 + var(--off)));transform:translate(-50%,-50%);font-weight:700}
.ring{left:calc(50% + var(--u) * var(--r) * .7071);top:calc(50% - var(--u) * var(--r) * .7071);transform:translate(-50%,-50%)}
.scale{position:absolute;left:var(--s4);bottom:var(--s4)}
.scale .chip{position:static;display:inline-block}
.scale i{display:block;width:calc(var(--u) * 500);height:7px;margin-top:var(--s1);border:2px solid #fff;border-top:0}
.corner{right:var(--s4);bottom:var(--s4)}
.inset{position:absolute;left:var(--s4);top:var(--s4);width:164px;padding:var(--sp6) 8px;background:var(--card);border:1px solid var(--ink);border-radius:2px}
.inset svg{display:block;width:100%;height:auto}
.inset .st{fill:var(--line-2);stroke:var(--card);stroke-width:.4}.inset .st.on,.inset .one{fill:var(--teal)}
.inset .lead{fill:none;stroke:var(--ink);stroke-width:.7;stroke-dasharray:2 1.6}.inset .dot{fill:var(--card);stroke:var(--ink);stroke-width:1.2}
figcaption{margin-top:var(--s3);font:500 var(--t-label)/1.5 var(--label);color:var(--soft)}
figcaption b{font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}figcaption .more{display:block}
.tag{display:inline-flex;font:600 var(--t-label)/1 var(--label);letter-spacing:var(--track);text-transform:uppercase}
.tag span{padding:7px var(--sp10);border:1.5px solid var(--teal);color:var(--teal);background:var(--card)}
.tag span:first-child{background:var(--teal);color:#fff}.tag span+span{border-left:0}
h1{font:700 var(--t-h1)/1.08 var(--display);letter-spacing:-.012em;margin-top:var(--s4);overflow-wrap:anywhere}
h1 span{display:block;font-weight:600;font-size:clamp(19px,1.75vw,24px);line-height:1.25;letter-spacing:0;color:var(--soft);margin-top:var(--s2)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s5);margin-top:var(--s5);padding:var(--s5) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats dt{font-size:12px}.stats dd{font:500 17px/1.3 var(--label);margin-top:var(--sp6)}
.pinnote{margin-top:var(--s5);padding:var(--s3) var(--s4);border:1px solid var(--ink);border-left-width:4px;border-radius:2px;font-size:var(--t-small);line-height:1.5}
.pinnote b{font:700 var(--t-label)/1 var(--label);letter-spacing:var(--track);text-transform:uppercase;margin-right:var(--s1)}
.lede>.label{margin-top:var(--s5)}
.short{font-size:var(--t-lead);line-height:1.55;margin-top:var(--s2)}
.start{margin-top:var(--s5);padding-top:var(--sp20);border-top:2px solid var(--ink)}
.start .label{color:var(--teal)}
.start p:last-child{font:600 var(--t-start)/1.35 var(--display);margin-top:var(--s2);text-wrap:pretty}

/* what the aerial shows, in full: cover and water */
.read{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--sp56);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.read div{padding:var(--s4) 0}.read dt{font-size:12px}
.read dd{font-size:var(--t-small);line-height:1.5;margin-top:var(--s1)}

/* phone section nav: a segmented selector */
.tabs{display:none}

/* sections */
.sec{margin-top:var(--s8);scroll-margin-top:var(--s5)}
h2{font:700 var(--t-h2)/1.12 var(--display);letter-spacing:-.012em;text-wrap:balance}
h2 span{display:block}
.sub{font-size:var(--t-small);color:var(--soft);margin-top:var(--s2)}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6)}
.progress{display:flex;align-items:center;gap:var(--s3);font:600 14px/1 var(--label);white-space:nowrap;padding-bottom:5px}
.segs{display:flex;gap:var(--s1)}.segs i{width:36px;height:8px;border:1.5px solid var(--ink);border-radius:1px;transition:background .2s var(--ease)}
.segs i.on{background:var(--teal);border-color:var(--teal)}

/* checklist: a card, because the user acts on it */
.todo{margin-top:var(--s5);padding:0 var(--sp36);background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 1px 2px rgba(28,35,34,.04)}
.todo li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3) var(--sp56);padding:var(--s6) 0;border-top:1px solid var(--line-2)}
.todo li:first-child{border-top:0}
.ask label{display:grid;grid-template-columns:24px 1fr;gap:var(--s4);cursor:pointer}
.todo input[type=checkbox]{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:1px 0 0;background:var(--card);border:1.5px solid var(--ink);border-radius:2px;cursor:pointer;display:grid;place-items:center;position:relative}
.todo input[type=checkbox]::before{content:"";position:absolute;inset:-11px}
.todo input[type=checkbox]:checked{background:var(--teal);border-color:var(--teal)}
.todo input[type=checkbox]:checked::after{content:"";width:6px;height:12px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.q{font:600 var(--t-q)/1.3 var(--display);text-wrap:pretty}
.todo input:checked+.q{color:var(--soft)}
.why{margin:var(--s2) 0 0 40px;font-size:var(--t-small);line-height:1.5;color:var(--soft)}
.every{display:inline-block;margin:var(--s2) 0 0 40px;padding:var(--sp2) var(--sp6);font:600 11px/1.2 var(--label);letter-spacing:var(--track);text-transform:uppercase;color:var(--teal);border:1px solid var(--teal);border-radius:var(--r)}
.howto .label{color:var(--teal)}
.how{margin-top:var(--s1);font-size:var(--t-small);line-height:1.5}
.note{display:block;margin-top:var(--s3)}
.note span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.note input{width:100%;height:44px;padding:0;font:400 var(--t-small)/1.2 var(--body);color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line);border-radius:0}
.note input::placeholder{color:var(--soft);opacity:1}
.note input:focus{outline:0;border-bottom:2px solid var(--teal)}

/* the numbers, in three tiers */
.tier{color:var(--ink);padding-bottom:var(--s3);border-bottom:2px solid var(--ink);margin-top:var(--s7)}
.tier i{font-style:normal;margin:0 var(--sp2)}
h2+.tier{margin-top:var(--s5)}
.fig{font:600 var(--t-fig)/1.05 var(--label);margin-top:var(--s3)}
.fig small{font-size:18px;margin-left:var(--sp6)}
.mean,.do{font-size:var(--t-small);line-height:1.5;margin-top:var(--s3)}
.do{margin-top:var(--s2)}
.do b,.do-in{font:700 var(--t-label)/1 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.src{font:500 var(--t-label)/1.45 var(--label);color:var(--soft);margin-top:var(--s3)}
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp20);margin-top:var(--sp20)}
.tile{padding:var(--s5) var(--sp28);background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.tilehead{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:30px}
.badge{display:inline-flex;align-items:center;gap:var(--s2);padding:8px 12px 8px var(--sp10);font:700 var(--t-label)/1 var(--label);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;border-radius:2px}
.badge svg{width:15px;height:15px;flex:none}
.badge.meets{color:var(--meets-text);background:var(--meets-bg)}
.badge.meets circle{fill:var(--meets-mark)}.badge.meets path{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.badge.outside{color:#fff;background:var(--outside)}
.badge.outside circle{fill:none;stroke:#fff;stroke-width:2}.badge.outside .s{fill:#fff;stroke:none}
.tile.meets .fig{color:var(--meets-text)}
.tile.outside{background:var(--outside-bg);border:2px solid var(--outside);padding:calc(var(--s5) - 1px) 27px}
.tile.outside .fig{color:var(--outside)}
.good{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s7)}
.stat{padding:var(--sp28) 0 var(--s6);border-bottom:1px solid var(--line)}
.stat .fig{margin-top:var(--s2)}
.stat.wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s7);align-items:start}
.relief img{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r)}
.relief figcaption{margin-top:var(--s2);font:500 13px/1.4 var(--label);color:var(--soft)}
.year{margin-top:var(--s4)}
.dates{position:relative;height:18px;font:600 var(--t-label)/1 var(--label)}
.dates span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.track{position:relative;height:11px;background:var(--card);border:1.5px solid var(--ink)}
.track .on{position:absolute;top:0;bottom:0;background:var(--teal)}
.months{display:grid;grid-template-columns:repeat(12,1fr);margin-top:var(--sp6);font:500 11px/1 var(--label);letter-spacing:.06em;color:var(--soft);text-align:center}
.leads{margin-top:var(--s3)}
.leads li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);padding:var(--sp10) 0;border-top:1px solid var(--line-2);font-size:var(--t-small);line-height:1.4}
.leads li:last-child{border-bottom:1px solid var(--line-2)}
.leads i{font-style:normal;color:var(--soft)}.leads b{font:600 15px/1 var(--label);white-space:nowrap}
.refs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s7)}
.refs div{padding:var(--s4) 0;border-bottom:1px solid var(--line-2)}
.refs dt{font-size:12px}.refs dd{font:500 17px/1.3 var(--label);margin-top:var(--s1)}
.refs dd span{display:block;font:400 14px/1.4 var(--body);color:var(--soft);margin-top:var(--sp2)}

/* what it leaves out, and the one offer */
.out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s7);margin-top:var(--s5);border-bottom:1px solid var(--line)}
.out li{padding:var(--s4) 0;border-top:1px solid var(--line)}
.out b{display:block;font:600 18px/1.3 var(--label)}
.out span{display:block;font-size:var(--t-small);line-height:1.5;color:var(--soft);margin-top:var(--sp2)}
.offer{display:grid;justify-items:start;gap:var(--s4);margin-top:var(--s7);padding:var(--s7);background:var(--teal);color:#fff;border-radius:var(--r)}
.offer .label{color:rgba(255,255,255,.78)}
.pitch{font:600 clamp(20px,2.1vw,26px)/1.3 var(--display);max-width:31em;text-wrap:pretty}
.offer .btn{margin-top:var(--s2)}
footer.sec{padding-bottom:var(--s8)}
footer .tier{margin-top:0}
.sources{columns:2;column-gap:var(--s7);margin-top:var(--s4);font:500 14px/1.5 var(--label);color:var(--soft)}
.sources li{break-inside:avoid;padding:var(--sp2) 0}
.fine{max-width:78ch;margin-top:var(--s5);font-size:14px;line-height:1.55;color:var(--soft)}

@media screen and (max-width:899px){
:root{--gutter:20px;--s8:56px}
.narrow{display:inline}.wide{display:none}
.bar .wrap{height:52px}
.hero{display:block;padding-top:0}
.fig1{margin:0 calc(-1 * var(--gutter))}
.aerial{aspect-ratio:39/23;border-radius:0;box-shadow:none;--off:-20px}
.scale{left:var(--s3);bottom:var(--s3)}.corner{right:var(--s3);bottom:var(--s3)}
/* the phone crop cuts the 1,000 ft ring top and bottom: N sits at the top edge, S is dropped */
.nesw[style*="--dy:-1"]{top:16px}.nesw[style*="--dy:1"]{display:none}
.inset{left:var(--s3);top:var(--s3);width:112px;padding:4px 5px}
figcaption{margin:var(--s2) var(--gutter) 0}
figcaption .more{display:none}
.lede{margin-top:var(--s4)}
h1{margin-top:var(--s3)}h1 span{margin-top:var(--s1)}
.stats{display:flex;flex-wrap:wrap;gap:0;margin-top:var(--s3);padding:0;border:0}
.stats dt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.stats dd{margin:0;font-size:16px}
.stats div:last-child{display:none}
.stats div:nth-last-child(n+3)::after{content:"·";margin:0 var(--sp6);font:500 16px/1.3 var(--label)}
.stats div{display:flex}
.pinnote{margin-top:var(--s4)}
.lede>.label{margin-top:var(--sp20)}
.start{margin-top:var(--sp20);padding-top:var(--s4)}
.read{display:block;margin-top:var(--s5)}.read div+div{border-top:1px solid var(--line-2)}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);padding:var(--s2) var(--gutter) calc(var(--s2) + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line)}
body[data-report]{padding-bottom:calc(61px + env(safe-area-inset-bottom))}
.tabs a{display:grid;place-items:center;height:44px;margin-left:-1px;font:600 var(--t-label)/1 var(--label);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--ink)}
.tabs a:first-child{margin-left:0;border-radius:2px 0 0 2px}.tabs a:last-child{border-radius:0 2px 2px 0}
.tabs a.on{background:var(--night);color:#fff}
.sec{scroll-margin-top:var(--s4)}
.sechead{display:block}
h2 span{display:inline}
.progress{margin-top:var(--s4);padding:0}.segs{flex:1}.segs i{flex:1;width:auto}
.todo{padding:0 var(--s4)}
.todo li{grid-template-columns:minmax(0,1fr);padding:var(--s5) 0}
.howto{margin-left:40px}
.stat.wide{grid-template-columns:minmax(0,1fr);row-gap:var(--s4)}.rules,.good,.out{grid-template-columns:minmax(0,1fr)}
.refs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s5)}
.rules{gap:var(--s4)}
.tile{padding:var(--sp20)}.tile.outside{padding:19px}
.tilehead{flex-direction:column-reverse;align-items:flex-start}
.stat{padding:var(--s5) 0}
.offer{padding:var(--s6) var(--s5)}
.sources{columns:1}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
/* Print: the wide layout at paper size, scaled down through the tokens, checklist first after
   the summary. The bar's buttons, the section nav and empty note lines are left out. */
@media print{
:root{--t-h1:28px;--t-h2:20px;--t-q:14px;--t-start:14.5px;--t-body:12px;--t-lead:13px;--t-small:11.5px;--t-label:9.5px;--t-fig:26px;
--s3:8px;--s4:10px;--s5:12px;--s6:14px;--s7:18px;--s8:26px;--sp20:12px;--sp28:14px;--sp36:16px;--sp56:24px;--gutter:0px}
@page{margin:12mm}
body{background:#fff}body[data-report]{padding-bottom:0}
.tabs,.acts,.note,.progress,.offer .btn{display:none}
.bar .wrap{height:44px;padding:0 var(--s4)}.bar img{height:26px}
.hero{padding-top:var(--s6);gap:var(--s7)}
.aerial{box-shadow:none}.inset{width:104px;padding:3px 4px}.chip{font-size:9.5px;padding:3px 5px}.pin{width:12px;height:12px;margin:-6px 0 0 -6px;border-width:3px}
.stats dd,.refs dd{font-size:12.5px}.stats dt,.refs dt{font-size:9px}
.todo{padding:0 var(--s5);box-shadow:none}.todo li{gap:var(--s2) var(--s7)}
.todo input[type=checkbox]{width:14px;height:14px}.ask label{grid-template-columns:14px 1fr;gap:var(--s3)}.why{margin-left:22px}.every{margin-left:22px}
.fig small{font-size:12px}.badge{padding:4px 7px}.badge svg{width:10px;height:10px}
.good,.refs,.out{column-gap:var(--s7)}.stat{padding:var(--s5) 0}.tile{padding:var(--s5)}.tile.outside{padding:calc(var(--s5) - 1px)}
.offer{padding:var(--s6);margin-top:var(--s6)}.pitch{font-size:14px}
.sources,.fine{font-size:10px}.out b{font-size:13px}.refs dd span{font-size:10.5px}footer.sec{padding-bottom:0}
.bar,.tag span,.badge,.tile,.track .on,.offer,.pin,.chip,.todo input{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.todo li,.tile,.stat,.offer,.refs div,.out li{break-inside:avoid}h2,.tier{break-after:avoid}
}
