/* One-page memo — Letter sheet, same tokens at print scale.
 * On screen: a white sheet on a desk background. At print: the sheet IS the
 * page (@page letter, margin 0; the 0.8in inset is the sheet's own padding). */

:root {
  --go: #2E7B4F;
  --ink: #211D17;
  --mut: #6E6759;
  --line: #DCD5C6;
  --subink: #3B362D;
  --desk: #EDE9E0;
  --serif: 'Newsreader', Georgia, serif;
  --mono: 'IBM Plex Mono', monospace;
}

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 12.5pt;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-width: max-content; /* desk background reaches the sheet edge when scrolling horizontally */
  padding: 48px 24px;
  box-sizing: border-box;
}

a { color: var(--ink); }
a:hover { color: var(--go); }

.sheet {
  width: 8.5in;
  min-height: 11in;
  margin: 0 auto;
  background: #FFFFFF;
  box-shadow: 0 2px 14px rgba(20, 20, 19, 0.12);
  border-radius: 2px;
  box-sizing: border-box;
  padding: 0.8in;
}

.memo-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 8.5pt;
  letter-spacing: 0.12em;
  color: var(--mut);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8pt;
}

h1 {
  font-size: 24pt;
  font-weight: 500;
  line-height: 1.15;
  margin: 16pt 0 4pt;
  text-wrap: balance;
}

.memo-subtitle {
  font-style: italic;
  font-size: 13pt;
  margin: 0 0 14pt;
  color: var(--subink);
}

.memo-kicker {
  font-family: var(--mono);
  font-size: 8.5pt;
  letter-spacing: 0.14em;
  color: var(--mut);
  margin: 12pt 0 4pt;
}

p { margin: 0 0 8pt; }

.memo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  break-inside: avoid;
  margin: 4pt 0 8pt;
}
.memo-cell {
  background: #FFFFFF;
  padding: 8pt 10pt;
  font-size: 10.5pt;
  line-height: 1.45;
}
.memo-cell-label {
  font-family: var(--mono);
  font-size: 7.5pt;
  letter-spacing: 0.12em;
  color: var(--mut);
  display: block;
  margin-bottom: 3pt;
}

.memo-closing {
  margin: 10pt 0 0;
  border-top: 1px solid var(--ink);
  padding-top: 10pt;
  font-weight: 500;
}

.memo-footer {
  font-family: var(--mono);
  font-size: 8pt;
  letter-spacing: 0.1em;
  color: var(--mut);
  margin-top: 8pt;
}
.memo-footer a { color: var(--mut); }
.memo-footer a:hover { color: var(--ink); }

@page {
  size: letter;
  margin: 0;
}

@media print {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    min-width: 0;
    min-height: 0;
  }
  .sheet {
    width: auto;
    min-height: 0;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0.8in;
  }
  p { orphans: 3; widows: 3; }
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* The content runs ~20% past one Letter page at its screen scale, so
   * compact the sheet for print. zoom (unlike transform) reflows the text,
   * keeping the full 6.9in measure. Gated so browsers without zoom fall
   * back to a two-page flow instead of clipping. */
  @supports (zoom: 0.9) {
    .memo-body { zoom: 0.9; }
    .sheet { height: 11in; overflow: hidden; }
  }
}