@font-face { font-family: 'Nimbus Roman'; src: url(NimbusRoman-Regular.woff2) format('woff2'); }
:root { --paper: #F9F9F3; --navy: #0000AA; --ink: #111; --pencil: #555; --pale: #DEE5EF; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; color: var(--ink); font-family: 'Nimbus Roman', 'Times New Roman', serif; }
/* quiet repeating field: offset rows of tiny lowercase "iuvi" in pale navy, like security paper */
body { background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='56'%3E%3Cg font-family='Times New Roman,serif' font-size='15' letter-spacing='-1' fill='%23C9D2E3'%3E%3Ctext x='8' y='20'%3Eiuvi%3C/text%3E%3Ctext x='68' y='48'%3Eiuvi%3C/text%3E%3C/g%3E%3C/svg%3E"); }
html { overflow-x: clip; }
main { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 24px 16px 32px; }
/* arms above the panel; width follows the screen height so arms + panel fit (600x490.7 viewBox) */
.crest { position: relative; width: clamp(220px, calc((100dvh - 390px) * 1.22), 460px); max-width: 100%;
  margin-bottom: 7px; }  /* = the panel's ring: the plinth touches its outer line */
.crest::before { content: ""; position: absolute; inset: -6% -16% -2%; z-index: -1;
  background: radial-gradient(closest-side, var(--paper) 78%, rgba(249,249,243,0)); }
.crest::after { content: ""; position: absolute; left: 8.2167%; right: 8.2167%; bottom: 0; height: 1px;
  background: var(--navy); }  /* plinth base, outer edges x 49.3-550.7 of 600 */
.arms { display: block; width: 100%; height: auto; }
.panel { position: relative; z-index: 0; width: min(360px, 100%); background: var(--paper);
  border: 1px solid var(--ink); padding: 34px 32px 26px; }
.panel::before { content: ""; position: absolute; inset: -8px; z-index: -1; border: 1px solid var(--ink);
  background: var(--paper); }  /* ring 6px out, as the old outline + box-shadow */
form { display: flex; flex-direction: column; gap: 18px; }
label { display: block; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--pencil); margin-bottom: 4px; }
.field { position: relative; }
input { width: 100%; border: 1px solid var(--ink); background: #fff; font: inherit; font-size: 18px;
  padding: 8px 10px 7px; outline: none; border-radius: 0; color: var(--ink); }
input:focus { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
#show { position: absolute; right: 10px; bottom: 11px; border: 0; background: none; font: inherit; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--pencil); cursor: pointer; padding: 0; }
button[type=submit] { margin-top: 6px; border: 0; background: var(--navy); color: var(--paper); font: inherit;
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase; padding: 12px; cursor: pointer; }
button[type=submit]:hover { background: var(--ink); }
#err { min-height: 1.2em; margin: 0; font-style: italic; color: var(--navy); }