:root{--bg:#fff;--text:#1d1d1f;--body:#2a2a2d;--soft:#55555b;--accent:#4f46e5;--stroke:rgba(0,0,0,.1);--todo:#fff4d6}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--body);font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:700px;margin:0 auto;padding:40px 20px 80px}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:26px;line-height:1.2;margin:0 0 6px;color:var(--text);font-weight:700}
.site-name{font-size:26px;font-weight:700;color:var(--text);margin:0;line-height:1.2;display:block}
a.site-name:hover{text-decoration:none}
h2{font-size:18px;margin:36px 0 8px;color:var(--text);font-weight:700}
h3{font-size:17px;margin:30px 0 8px;color:var(--text);font-weight:600}
nav{font-size:16px;display:flex;flex-wrap:wrap;gap:16px}
header,.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 20px;margin-bottom:20px}
ul{padding-left:22px}li{margin:6px 0}
img{max-width:100%;height:auto;border-radius:14px}
.portrait{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;margin:6px 0 4px}
figure{margin:0 0 22px}figcaption{font-size:15.5px;color:var(--soft)}
.meta{color:var(--soft);font-size:16px;margin:0 0 26px}
.todo{background:var(--todo);border-radius:5px;padding:0 5px}
.signup{border:1px solid var(--stroke);border-radius:14px;padding:18px 20px;margin-top:14px}
footer{margin-top:60px;padding-top:20px;border-top:1px solid var(--stroke);font-size:15.5px;color:var(--soft)}
blockquote{margin:18px 0;padding:2px 18px;border-left:3px solid var(--accent);color:var(--text)}
table{border-collapse:collapse}td,th{border:1px solid var(--stroke);padding:6px 10px}