:root{color-scheme:light}*{box-sizing:border-box}
    body{margin:0;background:#fff;color:#161616;font-family:Georgia,'Times New Roman',serif;line-height:1.7}
    .wrap{max-width:690px;margin:0 auto;padding:90px 26px 110px}
    h1{font-size:clamp(3.5rem,9vw,5.7rem);font-weight:400;letter-spacing:-.065em;line-height:1.1;margin:0 0 70px}
    h2{font-size:2.5rem;font-weight:400;letter-spacing:-.04em;line-height:1.2;margin:35px 0 30px}
    .label{font:12px Arial,sans-serif;letter-spacing:.17em;text-transform:uppercase;color:#777}
    .letters{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid #ddd}
    .letters li{border-bottom:1px solid #ddd}
    .letters a{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:21px 0;color:inherit;text-decoration:none;font-size:1.25rem}
    .letters a:hover .name{text-decoration:underline;text-underline-offset:5px}
    .date{font:12px Arial,sans-serif;color:#777;white-space:nowrap}
    .back{font:13px Arial,sans-serif;color:#444;text-decoration:none}
    .back:hover{text-decoration:underline}
    .letter{font-size:1.17rem}
    .letter p{margin:0 0 1.35em}
    .dialogue{border-left:1px solid #aaa;padding-left:22px;color:#555;margin:30px 0 38px}
    .signature{margin-top:45px;font-style:italic}
    .footer{border-top:1px solid #ddd;margin-top:95px;padding-top:17px;font:12px Arial,sans-serif;color:#888}
    @media(max-width:500px){.wrap{padding-top:55px}h1{margin-bottom:55px}.letters a{font-size:1.1rem}.date{font-size:11px}}