*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:#222}
body{font:16px/1.7 "Iowan Old Style", Palatino, "Songti TC", serif}
aside{
  position:fixed;top:0;left:0;width:220px;height:100vh;
  padding:36px 28px;background:#fff;
}
h1{font-weight:400;font-size:18px;letter-spacing:.02em;margin:0 0 22px;line-height:1.35}
h1 a{color:inherit;text-decoration:none}
nav{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#9a9a9a}
nav a{color:#9a9a9a;text-decoration:none}
nav a:hover{color:#222}
main{margin-left:220px;padding:36px 48px 80px;max-width:720px}
section{margin:0 0 38px}
h2{
  font-weight:400;font-style:italic;font-size:22px;
  margin:0 0 4px;color:#9a9a9a;font-family:"Source Serif Pro", "Liberation Serif", serif;
}
ul{list-style:none;margin:0;padding:0}
li{margin:0;line-height:1.85}
a{color:#222;text-decoration:none}
a:hover{text-decoration:underline}
.doc{margin-left:220px;padding:36px 48px 80px;max-width:640px}
.doc h2{font-style:normal;color:#222;font-size:28px}
.note{color:#9a9a9a}
@media(max-width:700px){
  aside{position:relative;width:auto;height:auto}
  main,.doc{margin-left:0}
}