*{box-sizing:border-box}
body{margin:0;-webkit-font-smoothing:antialiased;background:#f4f4f4;color:#111;font:15px/1.5 "Helvetica Neue",Arial,sans-serif}
a{color:inherit}
a:focus-visible{outline:3px solid #111;outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:#111;color:#f4f4f4;padding:8px 12px}
.skip:focus{left:12px;top:12px}
.skip:focus-visible{outline-color:#f4f4f4}

.wrap{display:grid;grid-template-columns:auto 1fr;min-height:100vh}
.spine{background:#111;color:#f4f4f4;padding:24px 16px;margin:0;writing-mode:vertical-rl;font-size:clamp(40px,8vh,96px);font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1}
.main{padding:32px 28px;max-width:640px}
.top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;font-size:13px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:48px}
.top nav{display:flex;gap:16px}
.top a{text-decoration:none}
.sub{margin:0 0 40px;font-size:18px}

.g{border-top:3px solid #111;padding:16px 0 24px}
.g h2{font-size:28px;line-height:1.1;margin:0 0 6px;text-transform:uppercase;letter-spacing:-.01em}
.g p{margin:0 0 10px;max-width:60ch}
.meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 10px;padding:0;list-style:none}
.btn{display:inline-block;background:#111;color:#f4f4f4;padding:6px 12px;text-decoration:none;font-size:13px}
.lines{margin:0}
.lines div{display:grid;grid-template-columns:140px 1fr;gap:12px;padding:4px 0}
.lines dt{font-size:12px;text-transform:uppercase;letter-spacing:.1em;padding-top:2px}
.lines dd{margin:0}
.foot{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;margin-top:40px;color:#555}

@media(max-width:560px){
 .wrap{grid-template-columns:1fr}
 .spine{writing-mode:horizontal-tb;font-size:40px}
 .main{padding:24px 20px}
 .top{margin-bottom:32px}
 .lines div{grid-template-columns:1fr;gap:0}
}