/* ===== Dear Butter Chicken: the letters section ===== */
/* An airmail envelope pinned to the case file. Ruled paper, red pen, chili-and-pista airmail stripes. */
.letters-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start}
.letters-intro .lede{max-width:24ch}
.dear-pin{transform:rotate(-3deg);width:62%;margin-top:34px}

.letterbox{position:relative;padding:clamp(10px,1.4vw,14px);background:repeating-linear-gradient(-45deg,var(--loud) 0 14px,var(--paper) 14px 21px,var(--green) 21px 35px,var(--paper) 35px 42px);box-shadow:0 2px 0 rgba(0,0,0,.05),0 26px 50px -24px rgba(40,10,0,.55);transform:rotate(.6deg)}
.letter-form,.received{background:var(--paper);padding:clamp(18px,3vw,36px);display:flex;flex-direction:column;gap:26px}
.letter-form[hidden],.received[hidden]{display:none}

/* ruled paper: the lines sit under the writing, at the textarea's own line height */
.paper{--rule:34px;display:flex;flex-direction:column;gap:6px}
.greeting{font-family:var(--sans);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(26px,3vw,40px);line-height:1;color:var(--loud);letter-spacing:-.01em}
.paper textarea{font:inherit;font-size:19px;line-height:var(--rule);color:var(--ink);width:100%;min-height:calc(var(--rule) * 8);resize:vertical;border:0;padding:0 2px;background:transparent repeating-linear-gradient(to bottom,transparent 0 calc(var(--rule) - 1px),var(--line) calc(var(--rule) - 1px) var(--rule));background-attachment:local}
.paper textarea:focus{outline:none;background-image:repeating-linear-gradient(to bottom,transparent 0 calc(var(--rule) - 1px),color-mix(in srgb,var(--loud) 55%,transparent) calc(var(--rule) - 1px) var(--rule))}
.paper textarea::placeholder{color:color-mix(in srgb,var(--ink) 72%,transparent);font-style:italic}
.paper-meta{display:flex;justify-content:space-between;gap:12px;min-height:18px}
.count{font-size:11px;letter-spacing:.08em;opacity:.7;white-space:nowrap}
.signoff{display:flex;align-items:baseline;gap:12px;margin-top:10px;max-width:420px;align-self:flex-end;width:100%}
.signoff label{font-family:var(--sans);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(18px,2vw,24px);color:var(--loud);flex:none}
.signoff input{font:inherit;font-size:20px;font-weight:600;font-style:italic;color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--line);padding:4px 0;flex:1;min-width:0}
.signoff input:focus{outline:none;border-bottom-color:var(--loud)}
.paper > .field-err{align-self:flex-end}

/* fieldsets */
.letter-form fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.letter-form legend{font-family:var(--sans);font-weight:800;font-size:16px;padding:0;margin-bottom:10px}
.letter-form legend span,.contact label span{font-weight:500;opacity:.7}
.attach-row{display:flex;flex-wrap:wrap;gap:10px}
.attach-row .btn{font-size:13px;padding:12px 16px;min-height:44px}
.file-btn{cursor:pointer}
.visually-hidden:focus-visible + .file-btn{outline:3px solid var(--marigold);outline-offset:3px}
.rec-btn .rec-dot{width:10px;height:10px;border-radius:50%;background:currentColor;display:inline-block}
.rec-btn.on{background:var(--loud);color:var(--paper)}
@media (prefers-reduced-motion: no-preference){.rec-btn.on .rec-dot{animation:recpulse 1s ease-in-out infinite alternate}}
@keyframes recpulse{from{opacity:1}to{opacity:.25}}
.pinned{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pinned:empty{display:none}
.pinned li{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 12px;background:var(--paper-2);font-size:15px}
.pinned .pin-name{font-weight:700;overflow-wrap:anywhere;flex:1 1 180px}
.pinned audio{height:36px;max-width:100%}
.unpin{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:none;border:0;color:var(--loud);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:10px 4px;min-height:44px}

.kinds .opts-grid{display:flex;flex-wrap:wrap;gap:8px}
.kinds .opt{min-height:40px}

.vote{gap:8px}
.vote-opt{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;cursor:pointer;min-height:36px}
.vote-opt input,.consent input{width:20px;height:20px;margin:0;flex:none}
.own-in{font:inherit;font-size:17px;color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--line);padding:6px 0;margin-left:30px;max-width:calc(100% - 30px)}
.own-in:focus{outline:none;border-bottom-color:var(--loud)}

.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 24px}
.contact label{font-family:var(--sans);font-weight:800;font-size:16px}
.contact input{font:inherit;font-size:17px;color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--line);padding:8px 0;width:100%}
.contact input:focus{outline:none;border-bottom-color:var(--loud)}
.contact input::placeholder,.signoff input::placeholder,.own-in::placeholder{color:color-mix(in srgb,var(--ink) 68%,transparent)}

.consent{display:flex;align-items:flex-start;gap:12px;font-size:17px;font-weight:600;cursor:pointer}
.consent span{padding-top:1px}

.field-err{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--loud);min-height:0}
.field-err:empty{display:none}
[aria-invalid="true"]{border-bottom-color:var(--loud)!important}

.send-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.send{font-size:17px;padding:18px 26px}
.send:disabled{opacity:.7;cursor:progress;transform:none}
.form-status{font-weight:700;font-size:16px;max-width:40ch}
.form-status:empty{display:none}

.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* received: the envelope gets franked */
.received{align-items:flex-start;gap:18px;min-height:420px;justify-content:center}
.received:focus{outline:none}
.received h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(40px,5vw,72px);line-height:.88;color:var(--loud)}
.received p{font-size:19px;max-width:40ch}
.stamp-big{font-size:clamp(22px,3vw,34px);border-width:5px;padding:10px 18px 7px;transform:rotate(-9deg);margin-bottom:6px}
@media (prefers-reduced-motion: no-preference){.received:not([hidden]) .stamp-big{animation:thump .5s .1s cubic-bezier(.3,1.6,.5,1) both}}

@media (max-width:900px){
  .letters-grid{grid-template-columns:minmax(0,1fr)}
  .dear-pin{width:70%}
  .letterbox{transform:none}
}
@media (max-width:560px){
  .contact{grid-template-columns:minmax(0,1fr)}
  .signoff{align-self:stretch}
}