:root{--ink:#ECECE8;--dim:#A3A39E;--dark:#000000;--darkdim:#2A2A2A;--line:#5E5E5A;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:#000;color:var(--ink)}
body{font-family:"IBM Plex Mono",Menlo,Consolas,monospace;font-weight:300;-webkit-font-smoothing:antialiased}
a{color:inherit}a:hover{color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.frame{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#000}
.frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame-no{position:absolute;right:5vw;bottom:64px;font-size:12px;letter-spacing:.06em;color:#8C8C87;font-variant-numeric:tabular-nums}
.id{display:flex;flex-direction:column;gap:2px}
.name{font-size:17px;font-weight:400;text-decoration:none;padding:12px 0;letter-spacing:.01em;align-self:flex-start}
nav{display:flex;flex-wrap:wrap;gap:0 32px;font-size:15px;color:var(--dim)}
nav a{padding:12px 0;text-decoration:none}
nav a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;color:var(--ink)}
.block{position:absolute;display:flex;flex-direction:column;gap:2px}
p{margin:0}
.lede{font-size:17px;line-height:1.5}
.body{font-size:16px;line-height:1.6}
.small{font-size:14px;line-height:1.6;color:var(--dim)}
.link{font-size:15px;padding:12px 0;text-underline-offset:5px;text-decoration-thickness:1px;align-self:flex-start}

/* home */
.home .block{left:5vw;bottom:52px}
/* about: text sits in the sky, dark ink */
.about .block{left:5vw;top:52px;width:min(460px,40vw);color:#000}
.about nav{color:var(--darkdim)}
.about nav a[aria-current]{color:#000}
.about .copy{display:flex;flex-direction:column;gap:18px;margin-top:44px}
.about .link{color:var(--darkdim);margin-top:22px}
.about .frame-no{color:#D6D6D2}
/* tools */
.tools .block{left:64vw;top:30vh;width:min(420px,30vw)}
.tool{margin-top:40px;padding-top:22px;border-top:1px solid #4A4A47;display:flex;flex-direction:column;gap:8px}
.tool h2{margin:0;font-size:17px;font-weight:400}
/* contact */
.contact .block{left:72vw;top:52px;width:min(340px,24vw)}
form{display:flex;flex-direction:column;gap:24px;margin-top:40px}
label{font-size:13px;color:var(--dim)}
.field{display:flex;flex-direction:column;gap:4px}
input,textarea{font:inherit;font-size:15px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 0}
textarea{resize:vertical;line-height:1.5}
button{align-self:flex-start;font:inherit;font-size:15px;font-weight:400;color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:0;padding:12px 30px;min-height:44px;cursor:pointer}
button:hover{background:var(--ink);color:#000}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact .small.loc{margin-top:26px}

/* phones and narrow windows: photo on top, words underneath on black */
@media (max-width:820px){
  .home .frame>img{object-position:100% 40% !important}
  .home .block{left:24px;right:24px;bottom:40px}
  .home .frame-no{right:24px;bottom:auto;top:28px}
  .about .frame,.tools .frame,.contact .frame{height:auto;min-height:0;overflow:visible}
  .about .frame>img,.tools .frame>img,.contact .frame>img{position:static;display:block;height:58svh}
  .about .block,.tools .block,.contact .block{position:static;width:auto;padding:24px 24px 56px;color:var(--ink)}
  .about nav{color:var(--dim)}
  .about nav a[aria-current]{color:var(--ink)}
  .about .link{color:var(--dim)}
  .about .frame-no,.tools .frame-no,.contact .frame-no{top:20px;bottom:auto;right:24px;color:#D6D6D2}
  nav{gap:0 22px}
}