/* Postmark — structure stylesheet. Colors come ONLY from var(--m-*) set in seasoning.css.
   Paper genre: the page is a letter. No hero, no buttons, no grids. */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--m-bg);
  color: var(--m-text);
  font-family: var(--m-font-body), Georgia, serif;
  font-size: 17px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  padding: 48px 20px 40px;
}

/* ---- The sheet ---- */
.sheet-holder { max-width: 660px; margin: 0 auto; }
.sheet {
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 12px 34px rgba(0,0,0,0.07);
  padding: 56px 64px 48px;
  position: relative;
}
/* airmail-style border: accent + heading stripes on the sheet edge */
.sheet::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px;
  background: repeating-linear-gradient(-45deg,
    var(--m-accent) 0 14px, var(--m-surface) 14px 22px,
    var(--m-heading) 22px 36px, var(--m-surface) 36px 44px);
  opacity: 0.85;
}

/* ---- Letterhead ---- */
.letterhead {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 40px; min-height: 64px;
}
.dateline {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem; color: var(--m-faint); padding-top: 20px;
}
.dateline a { color: var(--m-accent); }
.corner { display: flex; gap: 10px; align-items: flex-start; }
.stamp-frame {
  width: 64px; height: 78px; padding: 5px; background: var(--m-bg);
  /* perforated stamp edge */
  --perf: radial-gradient(circle 3.5px, transparent 3px, var(--m-bg) 3px);
  border: 1px solid var(--m-line);
  transform: rotate(2deg);
}
.stamp-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.postmark { color: var(--m-soft); transform: rotate(-7deg); margin-left: -34px; margin-top: 8px; opacity: 0.85; position: relative; }

/* ---- Letter text ---- */
.salutation {
  font-family: var(--m-font-display), Georgia, serif;
  font-size: 1.45rem; color: var(--m-heading); margin-bottom: 26px;
}
.sheet p { margin-bottom: 22px; }
.sheet a { color: var(--m-accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.sheet a:hover { text-decoration-thickness: 2px; }

.closing { margin-top: 34px; margin-bottom: 4px; color: var(--m-soft); }
.signature {
  font-family: 'Dancing Script', cursive;
  font-size: 2.2rem; color: var(--m-heading);
  transform: rotate(-2deg); transform-origin: left;
  margin-bottom: 8px !important;
}

.fold { border: 0; border-top: 1px dashed var(--m-line); margin: 34px 0 24px; }
.ps { font-size: 0.95rem; color: var(--m-soft); font-style: italic; margin-bottom: 0 !important; }

/* ---- Q&A (questions page) ---- */
.qa { margin-bottom: 30px; }
.qa .q {
  font-family: var(--m-font-display), Georgia, serif;
  font-size: 1.12rem; color: var(--m-heading); margin-bottom: 6px !important;
}
.qa p:last-child { margin-bottom: 0; }

/* ---- Beneath the sheet ---- */
.envelope-line {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 22px; padding: 0 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem; color: var(--m-faint);
}

@media (max-width: 620px) {
  body { padding: 24px 12px 30px; }
  .sheet { padding: 40px 26px 36px; }
  .letterhead { flex-direction: column-reverse; gap: 10px; }
  .corner { align-self: flex-end; }
  .envelope-line { flex-direction: column; gap: 4px; }
}