/* The supplied photograph stays photographic; blending/framing are CSS only. */
.letter{padding:0;overflow:hidden;isolation:isolate;border-radius:2px;outline:none;background:var(--ivory);box-shadow:inset 0 0 0 5px var(--ivory),inset 0 0 0 6px #b2945566}
.letter-portrait{position:absolute;top:18%;left:6px;right:6px;bottom:6px;width:calc(100% - 12px);height:calc(82% - 6px);object-fit:cover;object-position:50% 10%;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 68%,transparent 100%);z-index:-3;display:block}
.letter-portrait-temple{object-position:52% 100%;mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 78%,transparent 100%)}
.letter:before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#f8f1df 0%,#f8f1df99 5%,#f8f1df00 19%,#f8f1df00 81%,#f8f1df99 95%,#f8f1df 100%),linear-gradient(to bottom,#f8f1df 0%,#f8f1df80 22%,#f8f1df00 35%,#f8f1df00 63%,#f8f1dfcc 82%,#f8f1df 96%);pointer-events:none}
.letter:after{content:'';position:absolute;inset:6px;z-index:-1;background:url('assets/engraved-background-v1.png') center/100% 100% no-repeat;opacity:.24;mask-image:linear-gradient(90deg,#000,#0002 12%,transparent 24%,transparent 76%,#0002 88%,#000);pointer-events:none;border:1px solid #b2945570}
.letter-heading{position:absolute;top:12px;left:8px;right:8px;display:flex;align-items:center;flex-direction:column;text-align:center;gap:4px}
.letter .letter-crest{width:26px;height:34px;margin:0;object-fit:contain}
.letter .letter-heading .khmer-display{font-size:clamp(8px,.8vw,11px);line-height:1.8;color:var(--forest);max-width:100%;margin:0}
.letter-copy{position:absolute;left:12px;right:12px;bottom:13px;text-align:center}
.letter .letter-names{display:flex;flex-direction:column;align-items:center;margin:0;color:var(--forest);font:400 clamp(18px,1.7vw,25px)/1.05 Cormorant,serif}
html[lang=km] .letter .letter-names{font:400 clamp(11px,1.15vw,15px)/1.7 Moul,serif}
.letter .letter-names>span:not(.ampersand){font:inherit;color:var(--forest);font-style:normal}
.letter .letter-names .ampersand{font:italic 13px/1.1 Cormorant,serif;color:var(--gold);margin:2px 0}
.letter .letter-date{display:block;font:9px/1.5 system-ui,sans-serif;letter-spacing:.15em;color:var(--brown);margin-top:7px}
@media(max-height:700px){.letter-heading{top:10px;gap:2px}.letter .letter-crest{width:20px;height:26px}.letter .letter-heading .khmer-display{font-size:8px}.letter-copy{bottom:10px}.letter .letter-names .ampersand{font-size:10px;margin:1px 0}.letter .letter-date{margin-top:5px;font-size:8px}}