@font-face{font-family:"Veteran Typewriter";src:url("fonts/veteran-typewriter.ttf") format("truetype");font-display:swap}
.letters-archive{margin:0;padding:30px 16px;color:#f0d5a2}
.letters-header{text-align:center;max-width:1100px;margin:20px auto 36px}.letters-header a{text-decoration:none}.letters-header h1{font:400 clamp(34px,6vw,72px)/1.2 "Carter One",Georgia,serif;color:#e8b640;text-shadow:2px 3px 4px #000;margin:0 0 15px}.letters-header p{font:20px/1.5 Georgia,serif}
.letters-navigation{max-width:1000px;margin:25px auto;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.letters-navigation a,.letters-footer a{color:#f0d5a2;font:18px/1.5 "Carter One",Georgia,serif;text-underline-offset:4px}
.letter-index{max-width:790px;margin:35px auto 45px}.letter-index h2{font:26px/1.3 "Carter One",Georgia,serif}.letter-index a{color:#f0d5a2;font:18px/1.5 Georgia,serif;text-underline-offset:4px}.letter-index ol{padding-left:24px}
.encounter-letter{max-width:860px;margin:0 auto 60px;scroll-margin-top:25px}.letter-sheet{position:relative;width:100%;aspect-ratio:1086 / 1448;margin:0 auto 30px;filter:drop-shadow(4px 7px 6px #0006)}
.letter-paper{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.letter-writing{position:absolute;top:7%;left:12%;right:9%;bottom:8%;color:#382a1d;font:18px/1.5 "Veteran Typewriter",Georgia,serif;overflow-wrap:anywhere;box-sizing:border-box;text-align:left;text-shadow:none}
.letter-writing p{font:inherit;color:inherit;margin:0 0 .65em;text-indent:1.6em}.letter-writing h2{font:400 clamp(24px,3.4vw,32px)/1.25 "Veteran Typewriter",Georgia,serif;margin:0 0 20px;color:inherit;text-shadow:none}.letter-writing .letter-metadata{font-size:14px;line-height:1.5;margin:0 0 24px}.letter-metadata div{margin:0 0 3px}.letter-metadata dt{display:inline;font-weight:bold}.letter-metadata dd{display:inline;margin:0}.letter-writing .letter-signature{font:400 clamp(32px,5vw,46px)/1.3 "Arty Signature",cursive;text-align:right;text-indent:0;margin:16px 0 0}.letter-sheet-number{position:absolute;bottom:3.8%;left:12%;right:9%;text-align:center;color:#5b4530;font:12px/1.2 "Veteran Typewriter",Georgia,serif}
#waiting-for-letters{max-width:860px;margin:0 auto 45px}.letter-writing .letter-invitation{font-weight:bold}.letter-cta{display:block;padding:12px 16px;border:1px solid #a77c4e;border-radius:5px;background:#49311f;color:#f0d5a2;font:16px/1.4 "Carter One",Georgia,serif;text-align:center;text-decoration:none;margin:24px 0 12px}.letter-writing .submission-note{font-size:14px;line-height:1.5;text-indent:0}.letters-footer{text-align:center;margin:35px auto}.letters-loading{text-align:center}.archive-skip{position:absolute;top:-100px;left:20px;padding:12px;background:#f0d5a2;color:#382a1d;z-index:10}.archive-skip:focus{top:10px}.letters-archive a:focus-visible{outline:3px solid #e8b640;outline-offset:4px}.letters-fallback{max-width:760px;margin:auto;padding:8% 12%;background:#f1dfbb;color:#382a1d;font:18px/1.6 "Veteran Typewriter",Georgia,serif}
@media(max-width:600px){.letters-archive{padding:20px 10px}.letters-header p{font-size:17px}.letters-navigation a{font-size:15px}.letter-index{margin:25px 15px 30px}.letter-index h2{font-size:22px}.letter-writing{font-size:16px;line-height:1.4;top:7%;bottom:7%}.letter-writing h2{font-size:21px;margin-bottom:12px}.letter-writing .letter-metadata{font-size:12px;margin-bottom:14px}.letter-writing p{margin-bottom:.5em}.letter-writing .letter-signature{font-size:32px;margin-top:10px}.letter-cta{font-size:14px;padding:10px}.letter-writing .submission-note{font-size:12px}.letter-sheet-number{font-size:10px}}

/* Encounter sheets retain their original five-page layout in the preview and reader. */
.encounter-gallery{max-width:1100px}.encounter-gallery > .letter-sheet{width:823px}.encounter-gallery .letter-writing,.letter-reader .letter-writing{font-size:18px;line-height:1.5;top:7%;bottom:8%}.encounter-gallery .letter-writing h2,.letter-reader .letter-writing h2{font-size:28px;margin-bottom:20px}.encounter-gallery .letter-writing .letter-metadata,.letter-reader .letter-writing .letter-metadata{font-size:14px;margin-bottom:24px}.encounter-gallery .letter-writing p,.letter-reader .letter-writing p{margin-bottom:.65em}.encounter-gallery .letter-writing .letter-signature,.letter-reader .letter-writing .letter-signature{font-size:42px}.letter-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px}.sheet-preview{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;color:#f0d5a2;text-align:left}.sheet-preview .letter-sheet,.letter-reader .letter-sheet{width:823px;height:1097.333px;max-width:none;transform-origin:top left;margin:0}.preview-label{position:absolute;bottom:0;left:0;right:0;text-align:center;font:15px/1.4 Georgia,serif}.sheet-preview:hover .preview-label{text-decoration:underline}.letter-reader{box-sizing:border-box;max-width:calc(100vw - 12px);max-height:96vh;padding:12px;background:#291c12;border:1px solid #a77c4e;color:#f0d5a2;overflow:auto}.letter-reader::backdrop{background:#000c}.reader-stage{position:relative;margin:auto}.reader-close{display:block;margin:0 0 8px auto}.reader-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 0 4px}.letter-reader button{font:16px/1.4 Georgia,serif;background:#49311f;color:#f0d5a2;border:1px solid #a77c4e;padding:8px 12px;border-radius:4px;cursor:pointer}.letter-reader button:disabled{opacity:.4;cursor:default}.letter-reader button:focus-visible,.sheet-preview:focus-visible{outline:3px solid #e8b640;outline-offset:3px}@media(max-width:600px){.letter-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.preview-label{font-size:12px}.reader-controls{gap:5px}.letter-reader button{font-size:14px;padding:8px}.reader-controls span{font-size:12px}}
.reader-controls{position:sticky;bottom:-12px;background:#291c12;z-index:2}.reader-close{position:sticky;top:0;z-index:2}
@media(max-width:600px){.letter-reader .reader-stage{height:auto!important}.letter-reader .letter-sheet{width:100%!important;height:auto!important;transform:none!important;aspect-ratio:auto}.letter-reader .letter-writing{position:relative;inset:auto;padding:10% 12%;font-size:16px;line-height:1.5}.letter-reader .letter-paper{object-fit:fill}.letter-reader .letter-writing h2{font-size:22px}.letter-reader .letter-writing .letter-metadata{font-size:12px}.letter-reader .letter-sheet-number{bottom:3%}}

.letter-index ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,240px));gap:30px;justify-content:center}.letter-index .archive-letter-link{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;text-decoration:none;font-family:"Carter One",Georgia,serif}.archive-letter-icon{display:grid;width:180px;height:180px}.archive-letter-icon img{grid-area:1 / 1;width:100%;height:100%;object-fit:contain}.letter-icon-open{opacity:0}.archive-letter-link:hover .letter-icon-closed,.archive-letter-link:focus-visible .letter-icon-closed{opacity:0}.archive-letter-link:hover .letter-icon-open,.archive-letter-link:focus-visible .letter-icon-open{opacity:1}.archive-letter-name{font:400 24px/1.35 "Carter One",Georgia,serif}.archive-letter-credit{font:400 14px/1.4 "Carter One",Georgia,serif;color:#dbba86}
/* Keep the link stationary while the envelope lifts and opens. */
.archive-letter-icon{transition:transform .4s ease-in-out,filter .4s ease-in-out;filter:drop-shadow(3px 6px 4px #0004);pointer-events:none}
.archive-letter-icon img{transition:opacity .4s ease-in-out;will-change:opacity;backface-visibility:hidden}
.archive-letter-link:hover .archive-letter-icon,.archive-letter-link:focus-visible .archive-letter-icon{transform:translateY(-8px) rotate(-2deg);filter:drop-shadow(4px 12px 6px #0005)}
@media(prefers-reduced-motion:reduce){.archive-letter-icon,.archive-letter-icon img{transition:none}.archive-letter-link:hover .archive-letter-icon,.archive-letter-link:focus-visible .archive-letter-icon{transform:none}}
.archive-letter-name{margin-top:-30px;position:relative;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,2px 3px 4px #000}
.archive-letter-icon img{filter:drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000)}

.archive-letter-icon .letter-icon-closed{opacity:1;transition-delay:0s}.archive-letter-icon .letter-icon-open{opacity:0;transition-delay:.06s}
.archive-letter-link:is(:hover,:focus-visible) .letter-icon-closed{opacity:0;transition-delay:.06s}.archive-letter-link:is(:hover,:focus-visible) .letter-icon-open{opacity:1;transition-delay:0s}
@media(prefers-reduced-motion:reduce){.archive-letter-icon img{transition:none;transition-delay:0s}}
