/* WAVERS legal notice — the Office's stationery. Paper world (D18): navy on cream, the one serif.
   System fonts only: the CSP is default-src 'self' with no font-src (see index.css). */

:root {
  --navy: #1b2a4a;
  --orange: #ff6a13;
  --paper: #f4efe4;
  --white: #fffdf8;
  --rule: #d9d2c3;
  --body: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --label: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font: 17px/1.65 var(--body);
}

.skip { position: absolute; left: -9999px; top: 0; background: var(--navy); color: var(--paper); padding: 10px 16px; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ── letterhead ───────────────────────────────────────────────────────────── */
.letterhead { background: var(--navy); color: var(--paper); border-bottom: 4px solid var(--orange); }
.letterhead-inner { max-width: 74ch; margin: 0 auto; padding: 22px clamp(18px, 5vw, 32px); }
.office {
  margin: 0; font: 700 clamp(19px, 3.6vw, 26px)/1.1 var(--label);
  letter-spacing: .07em; text-transform: uppercase;
}
.dept {
  margin: 6px 0 0; font: 400 12px/1.4 var(--label); letter-spacing: .12em;
  text-transform: uppercase; color: rgba(244, 239, 228, .68);
}

/* ── the sheet ────────────────────────────────────────────────────────────── */
.sheet {
  max-width: 74ch; margin: 0 auto; padding: clamp(26px, 5vw, 52px) clamp(18px, 5vw, 32px) 60px;
  background: var(--white); border-left: 1px solid var(--rule); border-right: 1px solid var(--rule);
}
h1 {
  margin: 0; font: 700 clamp(28px, 6vw, 40px)/1.1 var(--label);
  letter-spacing: .04em; text-transform: uppercase;
}
.filed {
  margin: 6px 0 26px; font: 600 11px/1.4 var(--label); letter-spacing: .14em;
  text-transform: uppercase; color: #6b6a5e;
}

.plain {
  border: 2px solid var(--navy); border-left-width: 6px; padding: 16px 18px; margin: 0 0 32px;
  background: var(--paper);
}
.plain p { margin: 0; font-size: 16px; }
/* Second paragraph inside a .plain box. A class, not a style attribute: the CSP is
   style-src 'self', so an inline style is blocked outright and the gap silently vanishes. */
.plain .plain-next { margin-top: 10px; }

section { margin: 0 0 34px; }
h2 {
  margin: 0 0 12px; font: 700 clamp(18px, 3.4vw, 22px)/1.25 var(--label);
  letter-spacing: .03em; border-bottom: 1px solid var(--rule); padding-bottom: 8px;
}
h3 {
  margin: 22px 0 8px; font: 700 13px/1.3 var(--label); letter-spacing: .1em; text-transform: uppercase;
  color: #4a4636;
}
p { margin: 0 0 14px; }
ol, ul { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 8px; }
.lede-line { font-size: 19px; font-style: italic; }
.note { font-size: 15px; color: #4a4636; border-left: 3px solid var(--orange); padding-left: 12px; }

/* ── the record ───────────────────────────────────────────────────────────── */
.record { display: grid; grid-template-columns: minmax(150px, 15ch) 1fr; gap: 2px 18px; margin: 0 0 14px; }
.record dt {
  font: 600 11px/1.5 var(--label); letter-spacing: .1em; text-transform: uppercase;
  color: #6b6a5e; padding: 8px 0; border-bottom: 1px solid var(--rule);
}
.record dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 560px) {
  .record { grid-template-columns: 1fr; gap: 0; }
  .record dt { border-bottom: none; padding-bottom: 0; }
}
.pending {
  font: 600 11px/1 var(--label); letter-spacing: .1em; text-transform: uppercase;
  background: var(--orange); color: var(--navy); padding: 4px 8px; border-radius: 2px;
}

.fields { border-collapse: collapse; width: 100%; margin: 0 0 14px; font-size: 16px; }
.fields th, .fields td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.fields th { font: 600 11px/1.4 var(--label); letter-spacing: .1em; text-transform: uppercase; color: #6b6a5e; }
.fields td:first-child { font-weight: 700; }

/* ── closing ──────────────────────────────────────────────────────────────── */
.closing { margin-top: 44px; padding-top: 22px; border-top: 3px solid var(--navy); font-size: 15px; }
.motto { font-style: italic; margin-bottom: 6px; }
.back { margin-top: 18px; }
.back a {
  display: inline-block; background: var(--navy); color: var(--paper); text-decoration: none;
  font: 700 15px/1 var(--label); padding: 14px 22px; border-radius: 3px;
}

.fr {
  background: var(--paper); border-left: 3px solid var(--navy); padding: 14px 16px;
  font-size: 15.5px; margin-bottom: 14px;
}