@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Source+Sans+3:wght@400;500;600&display=swap');

:root { --ink:#17243a; --muted:#637087; --paper:#fffdfa; --accent:#d97864; --gold:#e6af8b; --line:#e8dfd7; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 10% 5%, #fae7dc 0, transparent 28rem), #f4f1ed; font-family:"Source Sans 3", sans-serif; font-size:1.125rem; line-height:1.75; }
.letter-shell { max-width:55rem; padding:5.5rem 1.5rem 3rem; margin:auto; }
.letter-intro { margin:0 auto 3.5rem; max-width:39rem; text-align:center; }
.eyebrow { margin:0 0 .9rem; font:500 .75rem/1.2 "DM Mono", monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
h1 { margin:0; font:600 clamp(2.4rem, 7vw, 4.5rem)/1.05 "Playfair Display", serif; letter-spacing:-.035em; }
.hint { color:var(--muted); margin:1.25rem auto 0; }
.letter { display:grid; gap:1.75rem; }
.page { position:relative; min-height:24rem; padding:3.5rem clamp(1.75rem, 6vw, 5rem); background:var(--paper); border:1px solid rgba(232,223,215,.9); box-shadow:0 1.2rem 2.7rem rgba(30,37,47,.08); }
.page:before { content:""; position:absolute; inset:12px; border:1px solid rgba(230,175,139,.26); pointer-events:none; }
.page p { position:relative; max-width:37rem; margin:0 0 1.15rem; }
.page-number { position:absolute; top:1.25rem; right:1.5rem; color:#b8a99e; font:400 .68rem "DM Mono", monospace; letter-spacing:.12em; }
.salutation,.signature { font-family:"Playfair Display",serif; font-size:1.38rem; }
.signature { margin-top:2rem !important; font-style:italic; }
.signature span { display:inline-block; margin-top:.35rem; color:var(--accent); }
blockquote { position:relative; margin:2.25rem 0; padding:1.1rem 0 1.1rem 1.5rem; max-width:35rem; border-left:3px solid var(--gold); font:italic 1.48rem/1.45 "Playfair Display",serif; }
.page--closing { display:flex; flex-direction:column; justify-content:center; }
footer { margin:2.4rem 0 0; text-align:center; font-size:.88rem; color:var(--muted); } footer span { color:var(--accent); }
.login-page { min-height:100vh; display:grid; place-items:center; padding:1.5rem; background:radial-gradient(circle at 78% 10%, #fde1d6 0, transparent 23rem), var(--ink); }
.login-card { width:min(100%, 31rem); padding:clamp(2rem, 8vw, 4rem); background:var(--paper); box-shadow:0 1.5rem 5rem rgba(0,0,0,.24); }
.login-card h1 { font-size:clamp(2.4rem,8vw,3.8rem); }.login-card > p:not(.eyebrow) { color:var(--muted); }
form { display:grid; gap:.55rem; margin-top:2rem; }label { font-weight:600; font-size:.98rem; }input { width:100%; padding:.8rem .9rem; border:1px solid #cfc5bc; border-radius:0; color:var(--ink); font:inherit; background:white; }input:focus { outline:3px solid rgba(217,120,100,.26); border-color:var(--accent); }button { margin-top:.8rem; padding:.9rem 1rem; border:0; color:white; background:var(--ink); cursor:pointer; font:600 1rem "Source Sans 3",sans-serif; }button:hover,button:focus-visible { background:#2b456b; }.form-error { margin:1rem 0 0!important; color:#ad3d3d!important; }
@media (max-width: 38rem) { .letter-shell { padding-top:3.5rem; }.letter-intro { margin-bottom:2.5rem; }.page { min-height:auto; padding-top:3.8rem; } }
@media print { body { background:white; font-size:12pt; }.letter-shell { max-width:none; padding:0; }.letter-intro,footer { display:none; }.letter { gap:0; }.page { min-height:100vh; page-break-after:always; border:0; box-shadow:none; }.page:before { display:none; } }