/* An envelope on a quiet writing desk. The full letter remains readable without JS. */
html:has([data-post-letter]) { overflow-anchor:none; }
.post-letter-sheet h3:focus { outline:none; }
.post-letter-sheet { scroll-margin-top:28px; }
.post-sample .post-sample-intro { text-align:center; margin-bottom:48px; }
.post-sample-intro .eyebrow { justify-content:center; color:#8d785a; letter-spacing:.24em; }
.post-sample .post-sample-intro h2 { font-size:clamp(34px,4vw,48px); margin-bottom:18px; }
.post-sample .post-sample-intro>p:last-child { color:#78806f; line-height:2; }
.post-mail-layout { grid-template-columns:minmax(0,1.65fr) minmax(250px,.85fr); gap:52px; }
.post-letter-experience { min-width:0; overflow-anchor:none; }
.post-letter-desk { padding:24px 25px 22px; background:radial-gradient(ellipse at 50% 45%,#fbf8f0 0,#edece2 100%); border:1px solid #e3e1d5; border-radius:8px; }
.post-desk-caption { display:flex; justify-content:space-between; gap:12px; color:#979681; font-size:9px; letter-spacing:.16em; padding-bottom:16px; border-bottom:1px solid #a49e7c30; }
.post-desk-caption span:last-child { letter-spacing:.07em; }
.post-letter-stage { position:relative; display:flow-root; isolation:isolate; padding-top:20px; min-height:385px; }
.post-letter-reveal { position:relative; z-index:3; margin:0 22px 140px; }
.post-letter-clip { min-height:0; padding:12px; }
.post-letter-experience .post-letter-sheet { border:1px solid #e4dccb; border-radius:2px; padding:32px 30px 30px; background:repeating-linear-gradient(0deg,#99794504 0 1px,transparent 1px 4px),#fffdf7; box-shadow:0 5px 8px #5c4a2510,0 18px 35px #5c4a2514; }
.post-letter-heading { display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid #d8d3c2; }
.post-letter-heading .post-wordmark { font-size:9px; letter-spacing:.17em; color:#8b806e; }
.post-letter-heading>span { color:#a68a71; font:24px var(--serif); }
.post-letter-sheet .post-letter-label { text-align:left; font-size:10px; letter-spacing:.05em; margin:12px 0 36px; color:#8c8273; }
.post-letter-sheet .post-date { font:11px var(--sans); letter-spacing:.03em; color:#96886f; }
.post-letter-sheet h3 { font:400 clamp(24px,2.5vw,33px)/1.65 var(--serif); letter-spacing:-.05em; margin:18px 0 28px; }
.post-letter-photo { width:87%; margin:0 auto 12px; padding:10px 10px 0; background:#fff; box-shadow:0 3px 13px #5d4a2520; transform:rotate(-2deg); }
.post-letter-sheet .post-letter-photo img { border-radius:0; aspect-ratio:5/4; max-height:280px; object-fit:cover; object-position:center 40%; }
.post-letter-photo figcaption { padding:13px 4px 15px; font:12px/1.7 var(--serif); color:#8a7d67; letter-spacing:.02em; }
.post-letter-sheet .post-letter-copy { padding-top:22px; }
.post-letter-sheet .post-letter-copy p { font:15px/2.25 var(--serif); color:#626651; margin-bottom:18px; }
.post-letter-sheet .post-signature { font:18px/1.9 var(--serif); color:#677354; margin:28px 0 18px; }
.post-letter-sheet .post-letter-from { padding-top:18px; border-top:1px solid #e6dfd0; font:11px/1.8 var(--sans); color:#9b8d78; margin-bottom:0; }
.post-letter-fold { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin:24px 0 0; padding:13px 10px; border:1px solid #d7d9c7; border-radius:3px; background:#f0f2e7; color:#586c4d; font:12px/1.8 var(--sans); cursor:pointer; }
.post-letter-fold[hidden] { display:none; }
.post-letter-fold:hover { background:#e7ebdc; border-color:#9ca88b; }
.post-letter-fold:focus-visible,.post-letter-control:focus-visible { outline:2px solid #738264; outline-offset:5px; }
.post-letter-fold:disabled,.post-letter-control:disabled { cursor:wait; }
.post-envelope-button { position:absolute; z-index:2; bottom:12px; left:14px; width:calc(100% - 28px); height:290px; padding:0; border:0; color:#62654f; background:transparent; text-align:left; perspective:1200px; transform:rotate(-3deg); transition:transform .6s; }
.post-envelope-button:hover { transform:rotate(-1deg) translateY(-4px); }
.post-envelope-button:focus-visible { outline:2px solid #738264; outline-offset:9px; border-radius:4px; }
.post-envelope-back { position:absolute; inset:0; background:#d9cbb2; border-radius:3px; box-shadow:0 22px 30px -13px #52452750,0 4px 7px #5443211a; }
.post-envelope-front { position:absolute; inset:0; border:1px solid #dfd1b8; border-radius:3px; background:repeating-linear-gradient(22deg,#7e5d2c04 0 1px,transparent 1px 3px),linear-gradient(110deg,#eee4d1,#f5eddd 65%,#e9ddc5); }
.post-envelope-seams { position:absolute; inset:0; overflow:hidden; border-radius:3px; }
.post-envelope-seams::before,.post-envelope-seams::after { content:""; position:absolute; width:72%; height:100%; top:51%; border-top:1px solid #c5b69570; }
.post-envelope-seams::before { left:-20%; transform:rotate(33deg); background:linear-gradient(170deg,#f2e9d5,transparent 45%); }
.post-envelope-seams::after { right:-20%; transform:rotate(-33deg); background:linear-gradient(190deg,#f2e9d5,transparent 45%); }
.post-envelope-flap { position:absolute; z-index:4; top:0; left:0; width:100%; height:52%; transform-origin:50% 0; clip-path:polygon(0 0,100% 0,50% 100%); background:linear-gradient(180deg,#e8dbc3,#e0d1b5); transition:transform .65s ease,z-index 0s .3s; filter:drop-shadow(0 2px 1px #765a301f); }
.post-envelope-address { position:absolute; z-index:5; left:32px; bottom:35px; width:68%; }
.post-envelope-address>span { display:block; }
.post-to { font:9px/1.7 var(--sans); letter-spacing:.18em; color:#9b8869; margin-bottom:9px; }
.post-addressee { font:clamp(19px,2vw,26px)/1.8 var(--serif); color:#65684f; letter-spacing:-.055em; }
.post-envelope-rule { border-bottom:1px solid #bcb49580; width:95%; margin:8px 0 9px; }
.post-envelope-from { font:10px/1.8 var(--sans); color:#95876e; }
.post-postage { position:absolute; z-index:5; top:20px; right:22px; width:85px; padding:7px; background:radial-gradient(circle at 4px 4px,transparent 3px,#fffdf5 3.5px) 0 0/8px 8px; transform:rotate(8deg); filter:drop-shadow(1px 2px 2px #665e4228); }
.post-postage-inner { display:flex; flex-direction:column; align-items:center; padding:8px 4px 6px; color:#f9f5e8; background:#879376; border:1px solid #718162; outline:1px solid #f6f0dc; outline-offset:-4px; }
.post-postage-inner>span:first-child { font:8px var(--serif); }
.post-postage-inner>span:last-child { font:5px/1.8 var(--sans); letter-spacing:.035em; }
.post-postage svg { width:61px; height:55px; stroke:#efe9ce; stroke-width:1.5; }
.post-stamp-heart { fill:#e9d4b8; stroke:none; }
.post-postmark { position:absolute; z-index:6; top:30px; right:70px; width:180px; transform:rotate(-12deg); opacity:.52; pointer-events:none; }
.post-postmark svg { width:100%; stroke:#6f715d; stroke-width:1; }
.post-postmark text { fill:#6f715d; stroke:none; text-anchor:middle; font:6px var(--sans); letter-spacing:1px; }
.post-postmark .post-postmark-date { font:14px var(--serif); letter-spacing:2px; }
.post-wax-seal { position:absolute; z-index:5; top:calc(52% - 23px); left:calc(50% - 23px); display:grid; place-items:center; width:46px; height:46px; border-radius:47% 52% 46% 50%; border:3px solid #ad7865; background:#b98571; box-shadow:inset 0 0 0 1px #cea190,0 3px 5px #67473530; transition:opacity .2s,transform .4s; }
.post-wax-seal svg { width:22px; height:22px; stroke:#ead1c1; stroke-width:1; }
.post-letter-control { display:flex; align-items:center; justify-content:center; gap:18px; padding:12px 3px; margin:7px auto 0; color:#727b61; background:none; border:0; border-bottom:1px solid #b4b89f; font:12px/1.8 var(--sans); }
.post-control-arrow { transition:transform .4s; }
.post-letter-control:hover .post-control-arrow { transform:translate(3px,-3px); }
.post-letter-desk .post-letter-note { font:10px/1.8 var(--sans); text-align:center; color:#92927f; margin:18px 0 0; }
.post-letter-experience>.post-sample-badge { display:block; text-align:center; margin:12px 0 0; padding:0; background:none; color:#929481; font-size:10px; }
.post-companion { padding-top:12px; }
.post-companion .post-companion-label { color:#988265; font-size:9px; letter-spacing:.18em; margin-bottom:18px; }
.post-companion h3 { font-size:28px; line-height:1.7; margin-bottom:22px; }
.post-companion li { padding:17px 0; }
.post-companion li strong { font:17px/1.8 var(--serif); color:#5f6d54; }
.post-companion li span { font-size:13px; }
.post-companion .button { width:100%; }

/* Enhance an already readable letter only once its controls are available. */
.post-letter-experience.is-ready .post-letter-reveal { display:grid; grid-template-rows:0fr; transition:grid-template-rows .85s cubic-bezier(.2,.65,.3,1); }
.post-letter-experience.is-ready .post-letter-clip { overflow:hidden; padding:0 12px; }
.post-letter-experience.is-ready .post-letter-sheet { opacity:0; transform:translateY(180px) scale(.92); transition:transform .8s cubic-bezier(.2,.65,.3,1),opacity .3s; }
.post-letter-experience.is-open .post-letter-reveal { grid-template-rows:1fr; transition-delay:.25s; }
.post-letter-experience.is-open .post-letter-sheet { opacity:1; transform:translateY(0) scale(1); transition-delay:.35s; }
.post-letter-experience.is-open .post-envelope-button { transform:rotate(0); }
.post-letter-experience.is-open .post-envelope-flap { transform:rotateX(180deg); z-index:1; }
.post-letter-experience.is-ready:not(.is-open) .post-envelope-flap { transition-delay:.4s; }
.post-letter-experience.is-open .post-wax-seal { opacity:0; transform:translateY(-25px) scale(.8); }
.post-letter-experience.is-open .post-control-arrow { transform:rotate(-90deg); }
.post-letter-experience.is-opening .post-letter-reveal { grid-template-rows:0fr; transition:none; }
.post-letter-experience.is-opening .post-letter-sheet { visibility:hidden; transition:none; }
.post-letter-experience.is-opening.is-landing .post-letter-reveal { grid-template-rows:1fr; }
.post-letter-experience.is-folding .post-letter-reveal { grid-template-rows:0fr; transition-delay:0s; transition-duration:.45s; }
.post-letter-experience.is-folding .post-letter-sheet { visibility:hidden; }
.post-letter-experience.is-stored:not(.is-open) .post-envelope-flap { transition-delay:0s; }
.post-letter-experience.is-stored .post-wax-seal { transition-delay:.35s; }

/* A temporary, noninteractive paper copy folds at two real hinges. */
.post-fold-scene { position:fixed; z-index:1000; margin:0; pointer-events:none; transform-origin:0 0; perspective:1800px; transform-style:preserve-3d; }
.post-fold-panel { position:absolute; left:0; width:100%; height:33.333333%; transform-style:preserve-3d; }
.post-fold-panel-0 { z-index:2; transform-origin:50% 100%; }
.post-fold-panel-1 { z-index:1; }
.post-fold-panel-2 { z-index:3; transform-origin:50% 0; }
.post-fold-panel-0 .post-fold-front { border-bottom:1px dashed #c9bfa9; }
.post-fold-panel-2 .post-fold-front { border-top:1px dashed #c9bfa9; }
.post-fold-front,.post-fold-back { position:absolute; inset:0; overflow:hidden; backface-visibility:hidden; background:#fffdf7; border:1px solid #e2d9c7; }
.post-fold-front { border-block-color:#e7e0d4; }
.post-fold-back { display:grid; place-items:center; transform:rotateX(180deg); background:repeating-linear-gradient(0deg,#99794504 0 1px,transparent 1px 4px),linear-gradient(#f2ecdf,#fffdf7 12%,#fffdf7 85%,#eee6d8); box-shadow:0 4px 12px #59482d1f; }
.post-fold-back>span { font:24px/1.8 var(--serif); color:#869075; letter-spacing:.15em; }
.post-fold-scene .post-fold-paper { position:absolute!important; left:0; width:var(--paper-width)!important; height:var(--paper-height)!important; margin:0!important; box-sizing:border-box; opacity:1!important; visibility:visible!important; transform:none!important; transition:none!important; box-shadow:none!important; }
.post-fold-paper [data-letter-fold] { visibility:hidden; }

@media(max-width:900px) {
  .post-mail-layout { grid-template-columns:minmax(0,1.4fr) minmax(220px,1fr); gap:28px; }
  .post-letter-desk { padding:20px 14px; }
  .post-letter-reveal { margin-inline:0; }
  .post-envelope-address { left:23px; }
  .post-envelope-button { left:6px; width:calc(100% - 12px); height:260px; }
  .post-letter-stage { min-height:355px; }
  .post-letter-experience .post-letter-sheet { padding:28px 22px; }
}
@media(max-width:760px) {
  .post-mail-layout { grid-template-columns:minmax(0,1fr); gap:36px; }
  .post-sample .post-sample-intro { margin-bottom:32px; }
  .post-letter-desk { padding:20px 16px; }
  .post-letter-stage { min-height:370px; }
  .post-envelope-button { height:280px; }
  .post-letter-sheet .post-letter-copy p { font-size:15px; }
  .post-companion { padding:6px 8px; }
}
@media(max-width:430px) {
  .post-letter-desk { padding:18px 10px; }
  .post-desk-caption { font-size:8px; letter-spacing:.08em; }
  .post-letter-stage { min-height:300px; padding-top:14px; }
  .post-envelope-button { height:222px; left:4px; width:calc(100% - 8px); }
  .post-envelope-address { left:20px; bottom:23px; width:77%; }
  .post-addressee { font-size:20px; }
  .post-envelope-from { font-size:9px; }
  .post-to { font-size:8px; margin-bottom:5px; }
  .post-postage { width:65px; right:16px; top:14px; padding:6px; }
  .post-postage svg { width:45px; height:39px; }
  .post-postage-inner { padding:7px 2px 4px; }
  .post-postage-inner>span:first-child { font-size:7px; }
  .post-postage-inner>span:last-child { font-size:4px; }
  .post-postmark { width:142px; right:50px; top:20px; }
  .post-wax-seal { width:36px; height:36px; left:calc(50% - 18px); top:calc(52% - 18px); }
  .post-letter-reveal { margin-bottom:120px; }
  .post-letter-experience .post-letter-sheet { padding:24px 16px; }
  .post-letter-experience.is-ready .post-letter-clip { padding-inline:4px; }
  .post-letter-sheet h3 { font-size:24px; }
  .post-letter-sheet .post-letter-copy p { font-size:14px; }
  .post-letter-photo { width:94%; padding:8px 8px 0; }
  .post-letter-control { font-size:11px; gap:10px; }
  .post-letter-desk .post-letter-note { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) {
  .post-letter-experience *, .post-letter-experience *::before, .post-letter-experience *::after { transition:none!important; animation:none!important; }
}