:root {
  color-scheme: light;
  --ink: #233a30;
  --ground: #e3e7d9;
  --paper: #f8f7f0;
  --serif: Georgia, "Noto Serif CJK SC", "Songti SC", "STSong", "SimSun", serif;
  --text: "Source Sans 3", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0 auto;
  max-width: 1640px;
  padding: 0 clamp(20px, 5vw, 88px);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.6 var(--text);
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #a94c15; outline-offset: 5px; }
.masthead, footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.masthead { padding: clamp(20px, 3.3vw, 48px) 0; }
.wordmark {
  font: 700 clamp(26px, 2.5vw, 38px)/1 Georgia, var(--serif);
  letter-spacing: -.07em;
}
.wordmark span { color: #866018; }
.source { padding: 5px 0; }
.source:hover { text-decoration: underline; text-underline-offset: .25em; }
.source span { margin-left: .3em; }
main { flex: 1; display: grid; align-content: center; }
.postcard {
  display: grid;
  grid-template-columns: 57% 43%;
  background: var(--paper);
}
.postcard picture { position: relative; display: block; min-height: clamp(500px, 40vw, 640px); }
.postcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.letter { display: flex; flex-direction: column; padding: clamp(30px, 4vw, 70px); }
.message { margin: auto 0; padding: 30px 0; }
h1 { margin: 0 0 22px; font: 700 clamp(44px, 4.85vw, 82px)/1.16 var(--serif); letter-spacing: -.06em; }
.message p { margin: 0; max-width: 25em; line-height: 1.95; text-wrap: pretty; }
.visit {
  display: inline-flex;
  align-items: center;
  gap: 1.4em;
  margin-top: 27px;
  padding: 12px 21px;
  background: #304d3c;
  color: var(--paper);
  font-weight: 600;
}
.visit:hover, .visit:focus-visible { background: #21392c; }
.visit span { font-size: 1.25em; line-height: 1; transition: transform .18s ease; }
.visit:hover span { transform: translateX(3px); }
.signature { margin: 0; align-self: flex-end; font: italic 29px/1.25 Georgia, var(--serif); letter-spacing: -.055em; }
footer { padding: 24px 0; font-size: 14px; }
@media (max-width: 760px) {
  .postcard { grid-template-columns: 1fr; }
  .postcard picture { min-height: 0; aspect-ratio: 1.8; }
  .letter { padding: 24px clamp(20px, 6vw, 38px); }
  .message { padding: 16px 0 22px; }
  h1 { margin-bottom: 14px; }
  .message p { line-height: 1.8; }
  .visit { margin-top: 20px; }
  .signature { font-size: 24px; }
  footer { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: no-preference) {
  .postcard { animation: arrive .45s ease-out both; }
  .message { animation: arrive .55s .07s ease-out both; }
  @keyframes arrive { from { transform: translateY(6px); opacity: .82; } }
}
@media (prefers-reduced-motion: reduce) {
  .visit span { transition: none; }
}