:root {
  --ink: #111;
  --desk: #e5e5e5;
  --paper: #fff;
  --accent: #164f7a;
  --grid: #000;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--desk);
  color: var(--ink);
  font-family: "Times New Roman", Times, serif;
}

.toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 12px;
  background: #f8f8f6;
  border-bottom: 1px solid #c8c8c0;
}

button {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid #9da8ad;
  border-radius: 6px;
  background: #fff;
  color: #10212c;
  font: 600 14px/36px Arial, sans-serif;
  cursor: pointer;
}

#printBtn {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

button:focus-visible,
textarea:focus-visible {
  outline: 2px solid #2274a5;
  outline-offset: 1px;
}

.page {
  width: min(100%, 900px);
  margin: 26px auto 42px;
  padding: 0 10px;
}

form {
  margin: 0 auto;
  width: 100%;
  max-width: 820px;
}

h1 {
  margin: 0;
  text-align: center;
  font-size: 38px;
  font-weight: 700;
}

h2 {
  margin: 28px 0 28px;
  text-align: center;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.copy-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--paper);
}

.copy-grid th,
.copy-grid td {
  border: 1px solid var(--grid);
}

.copy-grid thead th {
  height: 142px;
  padding: 0;
  font-size: 21px;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
}

.vertical {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1.05;
}

.copy-grid .entry-row td {
  height: 420px;
  padding: 0;
  vertical-align: top;
}

.copy-grid .address-row td {
  height: 154px;
  padding: 0;
  vertical-align: top;
}

.copy-grid textarea {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 8px 6px;
  background: transparent;
  color: var(--ink);
  font: 24px/1.2 "Times New Roman", Times, serif;
  resize: none;
}

.address-cell {
  position: relative;
}

.address-label {
  position: absolute;
  top: 10px;
  left: 8px;
  font-size: 24px;
}

.address-cell textarea {
  padding-top: 54px;
}

.c1 { width: 7.5%; }
.c2 { width: 9%; }
.c3 { width: 9%; }
.c4 { width: 7.5%; }
.c5 { width: 10.5%; }
.c6 { width: 9%; }
.c7 { width: 9%; }
.c8 { width: 28.5%; }
.c9 { width: 10%; }

@media (max-width: 720px) {
  h1 { font-size: 28px; }
  h2 { font-size: 32px; margin: 18px 0; }
  .copy-grid thead th { font-size: 14px; height: 104px; }
  .copy-grid .entry-row td { height: 300px; }
  .copy-grid .address-row td { height: 120px; }
  .copy-grid textarea { font-size: 16px; }
  .address-label { font-size: 22px; top: 8px; left: 6px; }
  .address-cell textarea { padding-top: 36px; }
}

@media print {
  @page {
    size: A4;
    margin: 10mm;
  }

  body {
    background: #fff;
  }

  .toolbar {
    display: none;
  }

  .page {
    width: auto;
    margin: 0;
    padding: 0;
  }

  form {
    max-width: none;
  }

  h1 {
    font-size: 20pt;
  }

  h2 {
    font-size: 22pt;
    margin: 12pt 0 14pt;
  }

  .copy-grid thead th {
    height: 90pt;
    font-size: 11pt;
  }

  .copy-grid .entry-row td {
    height: 250pt;
  }

  .copy-grid .address-row td {
    height: 90pt;
  }

  .copy-grid textarea {
    font-size: 11pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .address-label {
    font-size: 11pt;
  }
}