.little-letters{background:#e7dfd0}
.letter-collection{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:start}
.letter-choice{border:0;display:flex;flex-direction:column;text-align:left;padding:26px;min-height:370px;box-shadow:0 10px 26px #30231812;transition:transform .35s,box-shadow .35s}
.letter-choice:nth-child(even){margin-top:28px}
.letter-choice:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:0 18px 35px #30231820}
.letter-number{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.letter-choice strong{font-family:"Italiana",serif;font-weight:400;font-size:clamp(2.4rem,3.6vw,4rem);line-height:1.03;margin:42px 0 24px}
.letter-choice em{font-weight:400}
.letter-caption{font-size:.875rem;line-height:1.5;max-width:220px}
.letter-choose{margin-top:auto;padding-top:30px;font-size:.875rem}
.theme-unsaid{background:#f8f3e8;color:#2a3a1d}
.theme-tuesday{background:#bd555f;color:#fff8ee}
.theme-chapter{background:#2a3a1d;color:#f8f3e8}
.theme-myself{background:#4b233b;color:#f8e3d8}
.letters-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:40px}
.letters-footer p{line-height:1.6;max-width:520px}
.letters-footer button,.attached-letter button{background:none;border-top:0;border-left:0;border-right:0;font-size:.875rem}
.attached-letter{padding:14px 0 18px;border-bottom:1px solid var(--line)}
.attached-letter p{font-size:.875rem;line-height:1.5;margin:0 0 8px}
.bag-letter-label{font-weight:500;color:var(--green)!important}
.letter-dialog{position:fixed;inset:3vh 3vw;z-index:125;background:var(--ivory);display:grid;grid-template-columns:1.05fr 1fr;overflow:auto;visibility:hidden;opacity:0;transform:translateY(16px);transition:opacity .3s,transform .3s,visibility .3s;box-shadow:0 30px 80px #0004}
.letter-dialog[aria-hidden=false]{visibility:visible;opacity:1;transform:none}
.letter-close{position:absolute;right:18px;top:15px;z-index:10;width:44px;height:44px;border:0;border-radius:50%;background:var(--ivory);font-size:2rem;line-height:1}
.letter-stage{background:#ddd2c0;padding:45px 35px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.letter-stage-label{font-family:"Italiana",serif;font-size:1.65rem;text-align:center;margin:0 0 32px}
.letter-envelope{width:min(100%,390px);position:relative;padding-bottom:20px;perspective:1600px}
.letter-paper{position:relative;z-index:2;display:grid;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s;box-shadow:0 18px 40px #382b2620}
.letter-paper.is-flipped{transform:rotateY(180deg)}
.letter-face{grid-area:1/1;backface-visibility:hidden;padding:34px;min-height:28rem;display:flex;flex-direction:column;overflow-wrap:anywhere}
.letter-front{justify-content:space-between}
.letter-front h3{font-size:clamp(3.2rem,5.7vw,5.5rem);line-height:1.02;max-width:280px;margin:35px 0 16px}
.letter-front>p{font-size:1rem;line-height:1.6;max-width:240px;margin:0 0 35px}
.letter-back{transform:rotateY(180deg);background:#fcf8ef;color:#303d29;justify-content:flex-start}
.letter-to{font-family:"Italiana",serif;font-size:1.5rem;margin:26px 0 14px}
.letter-message{font-size:1.1rem;line-height:1.65;white-space:pre-wrap;margin:0 0 20px}
.letter-from{margin:auto 0 0;font-family:"Italiana",serif;font-size:1.4rem;line-height:1.3}
.letter-pocket{position:absolute;z-index:3;bottom:0;left:-4%;right:-4%;min-height:235px;padding:56px 25px 32px;background:linear-gradient(150deg,transparent 49.5%,#b7a48b 50%,transparent 50.5%) top left/50% 85px no-repeat,linear-gradient(210deg,transparent 49.5%,#b7a48b 50%,transparent 50.5%) top right/50% 85px no-repeat,#eadcc4;box-shadow:0 14px 28px #30231824;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;opacity:0;transform:translateY(25px);transition:opacity .5s,transform .7s;pointer-events:none}
.letter-pocket span,.letter-pocket small{font-size:.875rem;line-height:1.5}
.letter-pocket strong{font-family:"Italiana",serif;font-size:2rem;font-weight:400;overflow-wrap:anywhere;max-width:100%}
.letter-envelope[data-open=false] .letter-paper{transform:translateY(75px) scale(.84);opacity:0}
.letter-envelope[data-open=false] .letter-pocket{opacity:1;transform:translateY(-35px)}
.letter-preview-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.letter-preview-actions button{border:1px solid #92846e;background:transparent;padding:12px 15px;font-size:.875rem;min-height:44px}
.letter-preview-actions button:last-child{background:var(--green);color:white;border-color:var(--green)}
.letter-stage-help{font-size:.8rem;line-height:1.6;color:#514b40;text-align:center;max-width:320px;margin:20px 0 0}
.letter-editor{padding:55px 40px;min-width:0}
.letter-editor h2{font-size:clamp(3.2rem,5vw,5.3rem);line-height:.98;margin:0 0 36px}
.letter-editor .eyebrow{font-size:.875rem;margin-bottom:24px}
.letter-editor fieldset{padding:0;margin:0 0 25px}
.letter-editor legend{font-size:.875rem;line-height:1.5;font-weight:500;margin-bottom:12px}
.letter-theme-options,.letter-mode-options,.letter-when-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.letter-theme-options button,.letter-mode-options button,.letter-when-options button{border:1px solid #c7bfaf;background:transparent;padding:11px 10px;min-height:44px;font-size:.875rem;line-height:1.35}
.letter-theme-options button.active,.letter-mode-options button.active,.letter-when-options button.active{background:var(--green);border-color:var(--green);color:white}
.letter-when-options{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:22px}
.letter-when-options[hidden]{display:none}
.letter-names{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.letter-editor label{display:block;font-size:.875rem;font-weight:500}
.letter-editor input,.letter-editor textarea{display:block;width:100%;min-width:0;margin-top:8px;border:1px solid #bbb4a5;padding:12px;background:#fff9f0;color:#263521;font:inherit;font-size:1rem;line-height:1.5;border-radius:0}
.letter-editor textarea{resize:vertical;min-height:150px;font-weight:400}
.letter-message-label>span{float:right;font-size:.8rem;font-weight:400}
.letter-editor .letter-starters{margin:20px 0}
.letter-starters legend{font-weight:400;color:#626656}
.letter-starters button{font-size:.875rem;line-height:1.5;border:0;border-bottom:1px solid #b7ae9d;background:none;padding:6px 0;margin:0 12px 5px 0;text-align:left}
.letter-editor>.primary-btn{width:100%;font-size:.875rem;letter-spacing:.08em;line-height:1.5;gap:16px}
.letter-error{font-size:.875rem;color:#913635;line-height:1.5}
.letter-error:empty{display:none}
.letter-skip{display:block;margin:18px auto 0;border:0;background:none;font-size:.875rem;text-decoration:underline;padding:8px}
.letter-privacy{font-size:.8rem;line-height:1.6;color:#666b5b;margin:18px 0 0}
.letter-dialog button:focus-visible,.letter-dialog input:focus-visible,.letter-dialog textarea:focus-visible,.little-letters button:focus-visible{outline:3px solid #b45d51;outline-offset:4px}
@media(min-width:761px){.letter-dialog{overflow:hidden}.letter-stage,.letter-editor{overflow-y:auto;min-height:0}.letter-stage{justify-content:flex-start}.letter-envelope{flex-shrink:0}}
@media(max-width:1100px){.letter-collection{grid-template-columns:repeat(2,minmax(0,1fr))}.letter-choice strong{font-size:3.7rem}.letter-editor{padding:60px 25px 35px}.letter-stage{padding:40px 24px}.letter-face{padding:26px}.letter-front h3{font-size:3.7rem}}
@media(max-width:760px){.letter-dialog{inset:0;display:block}.letter-close{position:fixed}.letter-stage{padding:70px 24px 28px}.letter-stage-label{font-size:1.5rem}.letter-editor{padding:42px 24px}.letter-envelope{width:min(100%,350px)}.letter-face{min-height:25rem}.letter-front h3{font-size:4rem}.letters-footer{align-items:flex-start;flex-direction:column;gap:10px}.letter-choice{padding:20px;min-height:340px}.letter-choice strong{font-size:2.6rem}.letter-choice:nth-child(even){margin-top:16px}.letter-collection{gap:12px}.letter-caption{font-size:.875rem}.letter-number{font-size:.75rem}}
@media(max-width:380px){.letter-collection{grid-template-columns:1fr}.letter-choice:nth-child(even){margin-top:0}.letter-choice strong{font-size:3.3rem}.letter-choice{min-height:350px}.letter-names,.letter-mode-options{grid-template-columns:1fr}.letter-when-options{grid-template-columns:1fr}.letter-face{padding:22px}}
@media(prefers-reduced-motion:reduce){.letter-paper,.letter-pocket,.letter-choice,.letter-dialog{transition:none!important}}