/* Compact envelopes, then a continuous paper-to-reader transition. */
.library-page { width: min(100%,1100px); }
.library-page .view-heading { margin-bottom: 20px; }
.library-tools { max-width: 960px; margin: 34px auto 20px; }
#libraryStatus { max-width: 960px; margin-inline: auto; }
.letter-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px 28px; padding-top: 20px; }
.letter-card.envelope-card { display: block; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transition: none; animation: page-rise 600ms ease var(--delay,0ms) both; }
.letter-card.envelope-card::before { display: none; }
.letter-card.envelope-card:hover { transform: none; box-shadow: none; }
.archive-envelope { position: relative; display: block; width: 100%; max-width: 326px; height: 292px; margin-inline: auto; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: inherit; perspective: 1100px; isolation: isolate; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.archive-envelope:focus-visible { outline-offset: 7px; border-radius: 8px; }
.archive-envelope-back { position: absolute; z-index: 0; inset: 42px 0 22px; border: 1px solid var(--paper-edge); border-radius: 7px 7px 8px 8px; background: var(--kraft); box-shadow: 0 12px 26px var(--warm-shadow); }
.archive-sheet { position: absolute; z-index: 1; inset: 58px 17px 35px; display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--paper-edge); border-radius: 5px; background: var(--ivory); transform: translateY(0); transition: transform 760ms cubic-bezier(.22,.68,.24,1); }
.archive-sheet-label { font: 10px/1.5 var(--letter-ui); color: var(--ink-soft); }
.archive-sheet-title { margin: 10px 0; font: 500 19px/1.5 var(--letter-serif); overflow-wrap: anywhere; }
.archive-sheet-copy { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font: 13px/1.8 var(--letter-serif); white-space: pre-wrap; overflow-wrap: anywhere; }
.archive-pocket { position: absolute; z-index: 2; inset: 42px 0 22px; overflow: hidden; border: 1px solid rgba(135,94,63,.18); border-radius: 7px 7px 8px 8px; background: linear-gradient(145deg,var(--kraft-light),var(--kraft)); clip-path: polygon(0 0,50% 44%,100% 0,100% 100%,0 100%); }
.archive-pocket::before { content: ""; position: absolute; inset: 0; background: linear-gradient(34deg,transparent 49.7%,rgba(135,94,63,.14) 50%,transparent 50.3%),linear-gradient(-34deg,transparent 49.7%,rgba(135,94,63,.14) 50%,transparent 50.3%); }
.archive-flap { position: absolute; z-index: 4; top: 42px; left: 0; right: 0; height: 108px; transform-origin: center top; transform: rotateX(0deg); backface-visibility: visible; background: linear-gradient(170deg,var(--kraft-light),var(--kraft)); clip-path: polygon(0 0,100% 0,50% 100%); filter: drop-shadow(0 2px 1px rgba(135,94,63,.12)); transition: transform 720ms cubic-bezier(.24,.64,.24,1) 160ms; }
.archive-front { position: absolute; z-index: 3; left: 22px; right: 22px; bottom: 38px; display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; }
.archive-category { position: absolute; z-index: 5; top: 58px; left: 18px; color: var(--ink); font: 10px/1.5 var(--letter-ui); letter-spacing: .08em; opacity: .65; pointer-events: none; transition: opacity 250ms ease; }
.letter-card .archive-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%; margin: 0; font: 500 20px/1.5 var(--letter-serif); overflow-wrap: anywhere; }
.archive-address { margin-top: 8px; font: 11px/1.5 var(--letter-ui); color: var(--ink); opacity: .8; }
.archive-seal { position: absolute; z-index: 5; left: calc(50% - 19px); top: 130px; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(152,83,50,.24); border-radius: 50%; color: var(--ivory); background: var(--orange); box-shadow: 0 3px 8px var(--warm-shadow),inset 0 0 0 3px rgba(255,250,241,.15); font: 23px/1 Georgia,serif; transition: opacity 220ms ease,transform 280ms ease; }
.archive-open-hint { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font: 10px/1.4 var(--letter-ui); color: var(--ink-soft); opacity: 0; translate: 0 3px; transition: opacity 250ms ease,translate 250ms ease; }
.envelope-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: min(100%,326px); margin-inline: auto; padding: 5px 4px 0; }
.envelope-footer .record-date { font: 10px/1.6 var(--letter-ui); }
.envelope-footer .text-link { font-size: 11px; }
.envelope-card:nth-child(4n + 2) .archive-envelope-back,.envelope-card:nth-child(4n + 2) .archive-pocket,.envelope-card:nth-child(4n + 2) .archive-flap { background: linear-gradient(150deg,var(--apricot),var(--peach)); }
.archive-envelope.is-opening .archive-seal { opacity: 0; transform: translateY(-6px) scale(.9); }
.archive-envelope.is-opening .archive-category { opacity: 0; }
.archive-envelope.is-opening .archive-flap { transform: rotateX(168deg); transition-delay: 70ms; }
.archive-envelope.is-opening .archive-sheet { transform: translateY(-74px); transition-delay: 180ms; }
.archive-envelope.is-opening .archive-open-hint { opacity: 0; }
@media (hover:hover) and (pointer:fine) {
  .archive-envelope:hover .archive-open-hint { opacity: 1; translate: 0 0; }
  .archive-envelope:hover .archive-seal { transform: rotate(-5deg); }
}
/* Every source, including the first letter, uses this same in-place reader. */
.archive-reader { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 68px 22px 45px; border: 0; background: transparent; color: var(--ink); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.archive-reader::backdrop { background: rgba(72,49,36,.36); animation: archive-backdrop-in 550ms ease both; }
.archive-reader.is-closing::backdrop { animation: archive-backdrop-out 430ms ease both; }
.archive-reader .archive-reader-paper { position: relative; width: min(100%,800px); max-width: 800px; margin: 0 auto; transform-origin: 50% 0; animation: none; }
.archive-reader-ink { position: relative; }
.archive-reader .reader-heading { margin-bottom: 30px; }
.archive-reader .typesetting-toolbar { margin-bottom: 24px; padding-block: 0 18px; border-bottom: 1px solid var(--paper-edge); }
.archive-reader-close { position: fixed; z-index: 3; top: 14px; right: max(22px,calc((100vw - 800px)/2)); min-width: 44px; min-height: 42px; padding: 8px 17px; border: 1px solid var(--paper-edge); border-radius: 999px; color: var(--ink); background: var(--ivory); box-shadow: 0 4px 14px var(--warm-shadow); font: 13px/1.5 var(--letter-ui); cursor: pointer; }
.archive-reader-status { margin-top: 18px; }
.archive-reader .record-image-frame { margin-top: 32px; }
.archive-reader .record-image-preview { max-height: 440px; object-fit: contain; }
.archive-reader .reply-entry-button { margin-top: 30px; }
.archive-reader [tabindex="-1"]:focus { outline: none; }
.archive-reader.is-closing .archive-reader-close { opacity: 0; transition: opacity 180ms ease; }
@keyframes archive-backdrop-in { from { background: rgba(72,49,36,0); } to { background: rgba(72,49,36,.36); } }
@keyframes archive-backdrop-out { from { background: var(--backdrop-start,rgba(72,49,36,.36)); } to { background: rgba(72,49,36,0); } }
@media (max-width:960px) { .letter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 32px; max-width: 720px; margin-inline: auto; } }
@media (max-width:600px) {
  .letter-grid { grid-template-columns: minmax(0,1fr); gap: 12px; max-width: 320px; padding-top: 6px; }
  .archive-envelope { height: 282px; max-width: 306px; }
  .archive-envelope-back,.archive-pocket { bottom: 18px; }
  .archive-front { bottom: 33px; }
  .archive-open-hint { display: none; }
  .envelope-footer { max-width: 306px; }
  .archive-reader { padding: 66px 12px 28px; }
  .archive-reader-close { top: 12px; right: 15px; }
  .archive-reader .archive-reader-paper { padding: 32px 23px; }
  .archive-reader .reader-heading { margin-bottom: 26px; }
}
@media (prefers-reduced-motion:reduce) { .archive-envelope *,.letter-card.envelope-card,.archive-reader::backdrop { animation: none !important; transition: none !important; } }
@media print {
  body:has(.archive-reader[open]) > .app-shell { display: none !important; }
  .archive-reader[open] { position: static; display: block; width: 100%; height: auto; padding: 0; overflow: visible; }
  .archive-reader::backdrop,.archive-reader-close,.archive-photo { display: none !important; }
  .archive-reader .archive-reader-paper { width: 100%; max-width: none; padding: 0; margin: 0; }
}

.archive-reader.is-flap-open::backdrop { background: transparent; animation: none; }
.archive-reader.is-flap-open .archive-reader-close { opacity: 0; }
.archive-flap { transition-duration: 560ms; }
.archive-sheet { transition-duration: 600ms; }
.archive-reader.is-closing::backdrop { animation-duration: 280ms; }