@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500&display=swap');
:root{--bg:#F7FAFB;--surface:#FFFFFF;--surface-2:#ECF3F4;--ink:#0B1F24;--muted:#5B7278;--accent:#0B7A8F;--accent-2:#159CAE;--border:#DDE6E8;--on-accent:#FFFFFF;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Inter',system-ui,sans-serif;}
*,*::before,*::after{box-sizing:border-box;} html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;}
a{color:inherit;text-decoration:none;} button{font-family:inherit;}
.top{padding:16px clamp(20px,4vw,40px);display:flex;justify-content:space-between;border-bottom:1px solid var(--border);font-family:var(--sans);}
.brand{font-family:var(--serif);font-weight:700;font-size:1.2rem;font-style:italic;color:var(--ink);letter-spacing:-0.01em;}
.brand:hover{color:var(--ink);}
.top>div{display:flex;gap:20px;} .top>div a{color:var(--muted);font-size:.88rem;}
.top>div a:hover{color:var(--ink);}
.paper{flex:1;max-width:720px;width:100%;margin:0 auto;padding:clamp(32px,5vw,64px) clamp(20px,4vw,40px);}
.letter{padding:clamp(32px,5vw,60px);background:var(--surface);border:1px solid var(--border);border-radius:4px;box-shadow:0 20px 60px -20px rgba(0,0,0,0.15);position:relative;animation:rise .8s ease .1s backwards;}
.letter::before{content:"";position:absolute;top:16px;left:16px;right:16px;bottom:16px;border:1px dashed color-mix(in srgb,var(--ink) 8%,transparent);pointer-events:none;border-radius:2px;}
.letter__head{position:relative;display:flex;justify-content:space-between;font-family:var(--sans);font-size:.84rem;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin-bottom:36px;padding-bottom:14px;border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent);}
#f{position:relative;display:flex;flex-direction:column;gap:22px;}
.greet{font-family:var(--serif);font-weight:500;font-style:italic;font-size:1.4rem;color:var(--ink);}
.field{display:flex;flex-direction:column;gap:6px;}
.field--inline{flex-direction:row;align-items:baseline;gap:10px;flex-wrap:wrap;}
.field label{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:1.1rem;}
.field input,.field textarea{flex:1;padding:6px 0;font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--accent);border-radius:0;font-size:1.05rem;}
.field textarea{min-height:140px;resize:vertical;padding:8px 0;border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:4px;padding:10px 12px;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);}
.field input[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:#d9534f;}
.err{color:#d9534f;font-family:var(--sans);font-size:.82rem;min-height:16px;}
.closing{display:flex;flex-direction:column;gap:4px;margin-top:8px;}
.closing>span{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:1.1rem;}
.signature{max-width:240px;border-bottom-style:dashed!important;}
.send{align-self:flex-start;padding:12px 24px;border:1px solid var(--ink);border-radius:4px;background:transparent;color:var(--ink);font-family:var(--sans);font-weight:600;font-size:.94rem;cursor:pointer;transition:background .18s,color .18s;}
.send:hover:not(:disabled){background:var(--ink);color:var(--bg);}
.send:disabled{opacity:.6;cursor:default;}
.stat{font-family:var(--sans);font-size:.88rem;color:var(--muted);min-height:18px;margin:0;}
.alt{font-family:var(--sans);margin:28px 0 0;color:var(--muted);font-size:.92rem;text-align:center;}
.alt a{color:var(--accent);}
.ok{padding:12px 0;border-top:1px solid var(--accent);margin-top:10px;}
.ok h3{font-family:var(--serif);margin:0 0 4px;color:var(--ink);font-style:italic;}
.ok p{margin:0;color:var(--muted);font-family:var(--sans);} .ok strong{color:var(--ink);}
.bot{font-family:var(--sans);padding:16px clamp(20px,4vw,40px);display:flex;justify-content:space-between;color:var(--muted);font-size:.82rem;border-top:1px solid var(--border);background:var(--surface);text-transform:uppercase;letter-spacing:.12em;}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
::selection{background:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--ink);}