:root{--bg:#000;--fg:#eee;--muted:#aaa;--line:#333;--link:#78aeea;--link2:#a9c8f2;--max:1100px}
*{box-sizing:border-box}
html{background:#000}
body{margin:0;background:#000;color:var(--fg);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.45}
a{color:var(--link)}a:hover,a:focus{color:var(--link2)}
.site{width:min(100%,var(--max));margin:0 auto;padding:0 20px 28px}
header{padding:30px 0 22px;border-bottom:1px solid var(--line)}
.brand{font-size:30px;letter-spacing:.06em;font-weight:normal}
nav{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line);padding:0}
nav a{display:block;padding:11px 13px;text-decoration:none;color:#ccc;font-size:14px;white-space:nowrap}
nav a:hover,nav a:focus{background:#161616;color:#fff}
main{padding:28px 0 10px}
h1{font-size:34px;font-weight:normal;line-height:1.15;margin:0 0 25px;color:#fff}
h2{font-size:25px;font-weight:normal;color:#fff;margin:30px 0 18px}
p{max-width:820px}
.intro{margin-bottom:30px}
.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 34px}
.project{display:block;text-decoration:none;color:#fff;border:1px solid #222;background:#000}
.project:hover{border-color:#555}
.project img{display:block;width:100%;height:250px;object-fit:contain;background:#000}
.project .name{padding:12px 14px 14px;font-size:20px}
.gallery{display:flex;flex-direction:column;gap:26px}
.photo{margin:0;padding:0 0 25px;border-bottom:1px solid var(--line)}
.photo img{display:block;max-width:100%;width:auto;height:auto;max-height:1100px;margin:0 auto;background:#000}
.photo figcaption{margin:12px auto 0;max-width:900px;color:#ccc;text-align:left}
.photo a img{cursor:zoom-in}
.small-note{color:var(--muted);font-size:14px}
.twinkie-nav{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 30px}
.twinkie-nav a{font-size:17px}
.haiku{text-align:center;max-width:600px;margin:0 auto 45px;font-size:20px;line-height:1.8}
.haiku .label{color:#7ea5d8;font-size:16px;letter-spacing:.08em}
.back{display:inline-block;margin-bottom:24px}
.tango button{padding:12px 22px;font-size:18px;border:1px solid #555;border-radius:4px;background:#161616;color:#fff;cursor:pointer}
.tango button:hover{background:#222}
.moves{margin:22px 0;padding:18px;border:1px solid #333;min-height:60px;font-size:21px;line-height:1.6;white-space:pre-line;max-width:650px}
textarea{display:block;width:min(100%,650px);min-height:300px;background:#080808;color:#eee;border:1px solid #444;padding:12px;font:16px/1.45 monospace}
footer{margin-top:35px;padding-top:16px;border-top:1px solid var(--line);color:#888;font-size:12px}
@media(max-width:700px){
 .site{padding:0 14px 22px}header{padding:22px 0 16px}.brand{font-size:25px}
 nav a{padding:10px 9px;font-size:13px}main{padding-top:23px}h1{font-size:28px;margin-bottom:21px}
 .projects{grid-template-columns:1fr;gap:20px}.project img{height:230px}.project .name{font-size:18px}
 .photo{padding-bottom:20px}.photo figcaption{font-size:15px}.haiku{font-size:18px}
}