:root{--c:#d9d8d2;--ink:#20231f;--blue:#2340ff;--line:#20231f33}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--c);color:var(--ink);font:300 18px/1.55 Geologica,sans-serif}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
b,strong,h1,h2,.logo{font-weight:700}
.top{position:fixed;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;padding:18px 4vw;mix-blend-mode:multiply}
.top nav{display:flex;gap:28px}
.sheet{position:relative;min-height:100vh;display:grid;align-content:center;padding:12vh 6vw 6vh;overflow:hidden;cursor:crosshair;
 background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:50px 50px}
.sheet h1{font-size:clamp(40px,7.4vw,118px);line-height:.98;letter-spacing:-.03em;max-width:13ch;position:relative}
.hint{margin-top:28px;max-width:34ch;font-size:15px}
.cl{position:absolute;background:var(--blue);pointer-events:none;opacity:.7}
.cl.v{left:0;top:0;width:1px;height:100%}.cl.h{left:0;top:0;height:1px;width:100%}
.coord{position:absolute;left:0;top:0;font-size:12px;background:var(--blue);color:#fff;padding:2px 6px;pointer-events:none;white-space:nowrap}
.ms{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ms text{font:700 14px Geologica;fill:var(--blue);paint-order:stroke;stroke:var(--c);stroke-width:5px}
.sun{position:absolute;right:5vw;bottom:6vh;width:min(300px,60vw);background:var(--c);border:1px solid var(--ink);padding:12px;cursor:default}
.sun svg{display:block;width:100%}
.sun label{display:grid;gap:4px;font-size:14px;margin-top:8px}
input[type=range]{accent-color:var(--blue);width:100%}
.hs{position:relative}
.pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;background:var(--ink);color:var(--c)}
.bar{position:absolute;left:6vw;right:6vw;bottom:5vh;height:2px;background:#fff3}
.bar span{display:block;height:100%;width:0;background:var(--c)}
.track{display:flex;gap:7vw;padding:0 8vw;will-change:transform}
.proj{flex:0 0 min(58vw,720px)}
.proj svg{display:block;width:100%;aspect-ratio:4/3;border:1px solid #fff4}
.proj path{fill:none;stroke:var(--c);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1}
.proj h3{font:700 28px Geologica;margin-top:16px}
.proj p{font-size:15px;opacity:.75;max-width:48ch}
.calc,.contact{padding:10vw 6vw}
h2{font-size:clamp(30px,4.4vw,64px);letter-spacing:-.02em;margin-bottom:36px}
.calcgrid{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center}
.fields{display:grid;gap:22px}
.fields label{display:grid;gap:6px;font-size:16px}
fieldset{border:1px solid var(--ink);padding:14px 18px;display:grid;gap:8px}
fieldset label{display:flex;gap:10px;align-items:center}
select,input:not([type=range]):not([type=checkbox]){font:300 18px Geologica;border:0;border-bottom:2px solid var(--ink);background:none;padding:8px 0;border-radius:0}
.result{border:2px solid var(--blue);padding:6vw 3vw;display:grid;gap:6px}
.result strong{font-size:clamp(34px,5vw,72px);color:var(--blue);letter-spacing:-.03em}
.contact form{display:grid;gap:22px;max-width:480px}
.contact label{display:grid;gap:4px;font-size:15px}
.main{font:700 17px Geologica;background:var(--blue);color:#fff;border:0;padding:16px 26px;cursor:pointer;justify-self:start}
#msg{min-height:1.5em;font-size:15px}
@media(max-width:800px){
 .calcgrid{grid-template-columns:1fr}.top nav{display:none}.sun{position:relative;right:auto;bottom:auto;margin-top:36px}
 .pin{position:static;height:auto;display:block;padding:10vw 6vw}.track{flex-direction:column;padding:0;transform:none!important;gap:48px}.proj{flex:none}.bar{display:none}.proj path{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.proj path{stroke-dashoffset:0!important}}