/* "Letters from the piano" sign-up (home #letters and /newsletter/*). Uses the site palette variables. */
.letters{text-align:center}
.letters h2{font:500 clamp(1.9rem,5.4vw,2.6rem)/1.15 var(--serif);margin:.2rem 0 .6rem}
.letters .letters-lede{color:var(--muted);max-width:30rem;margin:0 auto 1.6rem}
.letters-form{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;max-width:30rem;margin:0 auto}
.letters-form input[type=email]{flex:1 1 220px;min-width:0;padding:.8rem 1.15rem;border-radius:999px;border:1px solid rgba(241,233,220,.22);background:rgba(0,0,0,.28);color:var(--ink);font:inherit;font-size:1rem}
.letters-form input[type=email]::placeholder{color:rgba(191,176,156,.7)}
.letters-form input[type=email]:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(208,138,82,.18)}
.letters-form .btn{flex:0 0 auto}
.letters-form .btn[disabled]{opacity:.6;cursor:default}
.letters-msg{min-height:1.6em;margin:.9rem auto 0;max-width:30rem;font:italic 400 1.2rem/1.45 var(--serif);color:var(--ink)}
.letters-msg.err{font:300 .92rem/1.5 var(--sans);font-style:normal;color:#e4a98a}
.letters-fine{font-size:.8rem;color:var(--muted);opacity:.85;margin:.3rem auto 0;max-width:30rem}
.letters-fine a{color:var(--muted)}
.letters .rule{display:block;width:40px;height:16px;margin:0 auto 1.1rem;color:var(--accent);opacity:.6}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.nl-page .btn{display:inline-block;padding:.8rem 1.5rem;border:1px solid rgba(241,233,220,.45);border-radius:999px;text-decoration:none;font-size:.92rem;font-weight:400;background:rgba(23,17,13,.35);color:var(--ink);cursor:pointer;font-family:inherit}
.nl-page .btn.primary{background:var(--accent);border-color:var(--accent);color:#1a120c;font-weight:500}
.nl-page .btn:hover{filter:brightness(1.08)}.nl-page .btn.primary:hover{color:#1a120c}
.nl-page{text-align:center;padding-top:3rem}
.nl-page h1{margin-bottom:.6rem}
.nl-page .lede{color:var(--muted);max-width:32rem;margin:0 auto 2rem}
.nl-page .box{margin-top:3rem;text-align:left}
.nl-done{font:italic 400 1.35rem/1.5 var(--serif);color:var(--ink);max-width:30rem;margin:1rem auto}
[hidden]{display:none!important}
.done .letters-fine{display:none}