:root { color-scheme: light; --paper: #f4f2e9; --ink: #293f36; --muted: #677069; --line: #c9ccc0; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%237d796a' opacity='.25' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
a { color: inherit; }
.masthead { max-width: 1240px; margin: 0 auto; padding: 44px 0 33px; border-bottom: 1px solid var(--ink); display: flex; align-items: flex-end; justify-content: space-between; }
.wordmark { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.06; letter-spacing: -.07em; text-decoration: none; }
.wordmark em { font-weight: 400; }
.edition { margin: 0 0 3px; text-align: right; font-size: .75rem; letter-spacing: .16em; line-height: 2; }
.edition span { font-size: .875rem; letter-spacing: 0; color: var(--muted); }
main { max-width: 1050px; margin: auto; }
.journal-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 36px 0 47px; }
h1 { font-size: .875rem; font-weight: 500; margin: 0; }
.instruction { color: var(--muted); font-size: .8125rem; }
.instruction span { display: inline-block; margin-left: 9px; font-size: 1.25rem; }
.entry { margin-bottom: 95px; }
.entry-meta { display: flex; align-items: center; gap: 18px; margin: 0 10px 20px; }
.post-number { font-size: .75rem; letter-spacing: .1em; color: var(--muted); }
.location { font-size: .875rem; font-weight: 500; margin: 0; border-left: 1px solid var(--line); padding-left: 18px; }
.date { margin-left: auto; font-size: .8125rem; color: var(--muted); }
.postcard { display: block; width: 100%; border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; perspective: 2000px; text-align: left; font: inherit; -webkit-tap-highlight-color: transparent; }
.postcard:focus-visible { outline: 3px solid #9c4b35; outline-offset: 12px; }
.postcard-inner { display: grid; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2,.65,.25,1); transform: rotate(-1deg); }
.postcard:hover .postcard-inner { transform: rotate(0deg) translateY(-3px); }
.postcard.is-flipped .postcard-inner { transform: rotateY(180deg) rotate(1deg); }
.face { grid-area: 1 / 1; display: flex; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fffdf5; border: 1px solid #e2dfd3; box-shadow: 0 3px 5px #29342615, 0 18px 36px -16px #29342640; }
.front { padding: 19px 19px 0; flex-direction: column; }
.photo { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.front-caption { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 7px 24px; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 1.125rem; }
.turn-label { font: 500 .6875rem Arial, Helvetica, sans-serif; letter-spacing: .14em; }
.back { transform: rotateY(180deg); padding: 37px; flex-direction: column; }
.back-top { display: flex; align-items: flex-start; justify-content: space-between; }
.back-heading { font: 1.9rem Georgia, 'Times New Roman', serif; letter-spacing: .22em; }
.stamp { white-space: pre-line; border: 2px dashed #849181; padding: 12px 15px; font: .875rem/1.7 Georgia, 'Times New Roman', serif; text-align: center; color: #64745f; }
.back-content { display: grid; grid-template-columns: 1.3fr 1fr; flex: 1; margin: 40px 0; }
.note { display: flex; flex-direction: column; padding-right: 40px; }
.note-title { font: italic 1.8rem/1.5 Georgia, 'Times New Roman', serif; margin-bottom: 25px; }
.note-body { font: 1.25rem/1.9 Georgia, 'Times New Roman', serif; white-space: pre-wrap; }
.signature { font: italic 1rem/1.8 Georgia, 'Times New Roman', serif; margin-top: 30px; }
.address { display: flex; flex-direction: column; border-left: 1px solid var(--line); padding: 30px 0 0 35px; }
.address-label { font-size: .75rem; letter-spacing: .16em; margin-bottom: 12px; color: var(--muted); }
.address-line { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 35px; font: italic 1.125rem/1.7 Georgia, 'Times New Roman', serif; }
.back-bottom { border-top: 1px solid var(--line); padding-top: 16px; font-size: .6875rem; letter-spacing: .12em; white-space: pre-wrap; line-height: 1.7; }
footer { max-width: 1240px; margin: 0 auto; padding: 25px 0 38px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: .8125rem; }
footer > span { font-size: .6875rem; letter-spacing: .14em; }
footer a { text-decoration: none; }
@media (min-width: 1450px) { main { max-width: 1080px; } }
@media (max-width: 1320px) { .masthead, footer { margin-left: 5%; margin-right: 5%; } main { width: 82%; } }
@media (max-width: 700px) {
  .masthead { padding: 28px 0 24px; }
  .edition { font-size: .625rem; } .edition span { font-size: .75rem; }
  main { width: 90%; }
  .journal-heading { display: block; padding: 27px 0 32px; }
  .instruction { display: block; margin-top: 8px; font-size: .75rem; }
  .entry-meta { margin: 0 2px 16px; gap: 12px; }
  .location { padding-left: 12px; font-size: .8125rem; }
  .front { padding: 10px 10px 0; }
  .front-caption { padding: 15px 4px; font-size: 1rem; flex-wrap: wrap; }
  .turn-label { font-size: .625rem; letter-spacing: .06em; }
  .back { padding: 20px; }
  .back-heading { font-size: 1.2rem; }
  .stamp { padding: 5px 8px; font-size: .625rem; }
  .back-content { grid-template-columns: 1fr; margin: 20px 0; }
  .note { padding: 0; } .note-title { font-size: 1.25rem; margin-bottom: 12px; }
  .note-body { font-size: 1rem; line-height: 1.8; }
  .signature { font-size: .875rem; margin-top: 18px; }
  .address { display: none; }
  .back-bottom { font-size: .625rem; }
  .entry { margin-bottom: 55px; }
  footer { flex-wrap: wrap; font-size: .75rem; } footer p { order: 3; width: 100%; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .postcard-inner { transition: none; } }