:root { color-scheme: dark; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; }
body {
  color: #fff;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.frame {
  position: relative; z-index: 1;
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: max(2rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-right)) max(3rem, env(safe-area-inset-bottom)) max(2rem, env(safe-area-inset-left));
}
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wordmark { font-size: 1.35rem; letter-spacing: 0.01em; font-weight: 400; }
.contact {
  color: rgba(255,255,255,0.8); text-decoration: none;
  border: 1px solid rgba(255,255,255,0.3); border-radius: 6px;
  padding: 0.3rem 0.75rem; font-size: 0.75rem;
  transition: border-color .15s ease, color .15s ease;
}
.contact:hover, .contact:focus-visible { color: #fff; border-color: rgba(255,255,255,0.6); outline: none; }
footer { display: flex; flex-direction: column; gap: 2rem; }
.statement { max-width: 36rem; font-size: 1.125rem; line-height: 1.65; }
.statement strong { font-weight: 700; }
.place { line-height: 1.65; color: rgba(255,255,255,0.85); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 768px) {
  .frame { padding: 2.5rem; padding-bottom: 3rem; }
  .contact { font-size: 0.875rem; }
  footer { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 0; }
  .statement { font-size: 1.25rem; }
  .place { text-align: right; font-size: 1.125rem; }
}
@media (min-width: 1024px) { .frame { padding: 2.5rem 5rem; } }