/* The site's own pages (not pieces). Navy field and type from the Studio System; fonts from /fonts/. */
@font-face { font-family: "Fraunces"; font-weight: 100 900; font-display: swap; src: url("/fonts/fraunces-latin.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("/fonts/archivo-latin.woff2") format("woff2"); }
:root { --field: #1f2a44; --ink: #eef0f2; --quiet: #c3c9d4; }
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--field); color: var(--ink); }
body { font: 1rem/1.5 "Archivo", system-ui, sans-serif; font-stretch: 75%; }
.hold { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem 1.5rem 3rem; max-width: 40rem; }
.hold h1 { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 2.5rem; line-height: 1.1; }
.hold p { margin-top: 0.75rem; font-size: 1.125rem; color: var(--quiet); }
.share iframe { display: block; width: 100%; height: 100%; border: 0; }
.preview form { margin-top: 2rem; max-width: 24rem; display: grid; gap: .75rem; }
.preview label { font-weight: 650; }
.preview input[type="password"], .preview button { min-height: 3rem; border: 1px solid var(--quiet); border-radius: 4px; padding: .75rem; font: inherit; }
.preview input[type="password"] { width: 100%; background: var(--ink); color: var(--field); }
.preview button { background: var(--ink); color: var(--field); cursor: pointer; font-weight: 650; }
.preview input:focus-visible, .preview button:focus-visible, .preview a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.preview a { margin-top: 1.5rem; color: var(--quiet); text-underline-offset: .2em; }
.preview p[role="alert"] { margin: 0; font-size: 1rem; }