/* ===== Letters ===== */
.ed{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:36px;align-items:start;padding-top:28px;padding-bottom:60px}
.ed-form{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-weight:600;font-size:.92rem}
.ed-title{font-size:clamp(2rem,4vw,2.8rem);margin-top:8px}
.field label,.lab{display:block;font-weight:700;font-size:.92rem;margin-bottom:8px}
.inp{width:100%;font:inherit;font-size:1rem;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);transition:border-color .2s}
.inp:focus{outline:none;border-color:var(--accent)}
.inp.err{border-color:#D93A33}
textarea.inp{min-height:240px;resize:vertical;line-height:1.6}
.cnt{text-align:right;color:var(--muted);font-size:.8rem;margin-top:4px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.prompts{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:4px}
.pchip{flex:none;font-size:.85rem;font-weight:600;padding:7px 12px;border-radius:999px;border:1px dashed var(--accent);background:transparent;color:var(--accent);cursor:pointer}
.pchip:hover{background:var(--soft)}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.sw{width:48px;height:48px;border-radius:12px;border:2px solid var(--line);cursor:pointer;padding:0}
.sw[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}
.fonts{display:flex;flex-wrap:wrap;gap:8px}
.fontbtn{padding:8px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;font-size:1.25rem;min-width:64px}
.fontbtn small{display:block;font-family:Figtree,sans-serif;font-size:.7rem;color:var(--muted);font-weight:600}
.fontbtn[aria-pressed=true]{border-color:var(--accent);background:var(--soft)}
.lphotos{display:flex;gap:8px;flex-wrap:wrap}
.lph{width:58px;height:58px;border-radius:10px;border:2px solid var(--line);background-size:cover;background-position:center;cursor:pointer;padding:0;background-color:var(--surface);font-weight:600;font-size:.78rem;color:var(--muted)}
.lph[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}
.hint{color:var(--muted);font-size:.9rem}
.hint button{background:none;border:0;padding:0;color:var(--accent);font-weight:700;cursor:pointer;text-decoration:underline}
.ed-prev{position:sticky;top:88px}
.ed-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.savestate{color:var(--muted);font-size:.88rem;margin-left:auto}

.paper{position:relative;padding:44px 38px 40px;border-radius:5px;min-height:440px;overflow-wrap:anywhere;box-shadow:0 26px 50px -26px rgba(40,10,30,.5),0 2px 8px rgba(40,10,30,.12)}
.p-classic{background:#FFFDF8;color:#2E2430}
.p-rose{background:#FFEFF3;color:#5A1733}
.p-midnight{background:#1F1734;color:#F3E6F0}
.p-kraft{background:#D9BC91;color:#3B2614}
.p-lined{background-color:#FFFFFF;background-image:repeating-linear-gradient(#FFFFFF 0px,#FFFFFF 31px,#CFE0F5 31px,#CFE0F5 32px);background-position:0 12px;color:#1E2A44;padding-left:52px}
.p-lined::before{content:"";position:absolute;top:0;bottom:0;left:34px;width:2px;background:#F3B4B4}
.f-caveat{font-family:Caveat,cursive;font-size:1.6rem;line-height:32px}
.f-script{font-family:"Dancing Script",cursive;font-size:1.42rem;line-height:32px}
.f-serif{font-family:Gloock,Georgia,serif;font-size:1.1rem;line-height:32px}
.f-type{font-family:"Special Elite","Courier New",monospace;font-size:1rem;line-height:32px}
.paper .lt-to{margin-bottom:18px}
.paper .lt-body p{margin:0 0 18px}
.paper .lt-body p:last-child{margin-bottom:0}
.paper .ph-txt{opacity:.45}
.paper .lt-sign{margin-top:30px}
.paper .lt-from{font-size:1.15em}
.lt-photo{text-align:center;margin-bottom:26px}
.lt-photo img{display:inline-block;width:60%;max-width:260px;padding:8px 8px 28px;background:#fff;box-shadow:0 10px 24px -10px rgba(0,0,0,.4);transform:rotate(-2deg)}
.lt-brand{position:absolute;right:16px;bottom:10px;font-family:Figtree,sans-serif;font-size:11px;line-height:1;opacity:.55}

/* ===== Envelope (received letter) ===== */
.env-wrap{display:grid;justify-items:center;text-align:center;padding-top:40px;padding-bottom:40px}
.env-kicker{color:var(--muted);font-weight:600}
.env-h{font-size:clamp(2.2rem,6vw,3.4rem);margin-top:6px}
.env{position:relative;width:min(340px,84vw);aspect-ratio:1.55;margin:110px 0 34px;perspective:900px}
.env-back{position:absolute;inset:0;border-radius:10px;background:var(--accent);filter:brightness(.8)}
.env-letter{position:absolute;left:7%;right:7%;top:6%;height:86%;z-index:1;background:#FFFDF8;color:#2E2430;border-radius:4px;padding:16px 18px;text-align:left;font-family:Caveat,cursive;font-size:1.25rem;line-height:1.3;overflow:hidden;transition:transform .9s var(--ease) .45s}
.env-front{position:absolute;inset:0;z-index:2;border-radius:10px;background:var(--accent);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%)}
.env-flap{position:absolute;left:0;right:0;top:0;height:60%;z-index:3;background:var(--accent);filter:brightness(.9);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transition:transform .55s var(--ease),z-index 0s .3s}
.env-seal{position:absolute;left:50%;top:56%;z-index:4;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;background:var(--accent-2);color:#fff;display:grid;place-items:center;font-size:1.3rem;box-shadow:0 4px 10px rgba(0,0,0,.2);transition:opacity .3s}
.env.open .env-flap{transform:rotateX(180deg);z-index:0}
.env.open .env-seal{opacity:0}
.env.open .env-letter{transform:translateY(-58%)}
.full-letter{max-width:640px;padding-bottom:60px}