/* Hallmark · shape: Holding page with sign-up (/), Long Document (/signup-privacy), Note (/signed-up, /removed, /check-email, /confirm, /unsubscribe, /link-expired, /signup-error, /signup-busy) · genre: modern-minimal · theme: brand, the full site's whiteprint sheet · job: sign-up · draw: 4d19d3
 * paper: #f1f3f0 drafting white · accent: #1b4a94 blueprint blue · display: Chakra Petch 600 · body: IBM Plex Sans · outlier: IBM Plex Mono (the contact address only) · hero: Banner (every page) · nav: the wordmark alone · footer: one keylined legal row
 * axes: light/geometric-sans/chromatic-blue · posture: quiet (the sign-up card is the only framed object) · v2.0.0 */
/* Hallmark · copy: verbatim · the consent sentence, sender and contact are the wording CASL requires on a sign-up form, so 58 reports as a note */
/* Hallmark · waive 44c · the headline and the sign-up card are centred as one pair in the first screen · a holding page before launch has nothing else to show, so it is not padded out with copy */
/* Hallmark · waive 79 · the pair sits in the middle of the screen with equal space above and below · nothing else exists before launch */
/* Hallmark · waive 85 · the stamp names job: sign-up · the sign-up is what a visitor can do before launch */
/* Production holding page and sign-up pages (main branch). Same tokens and base as the full site;
   only the pieces these pages use. Replaced by the full site's style.css at launch. */
a { color: var(--color-accent); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
h1, h2 { text-transform: uppercase; line-height: 1.04; text-wrap: balance; }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
html { scrollbar-color: var(--color-muted) var(--color-paper); }
.lead { color: var(--color-ink-2); }
.mono { font-family: var(--font-outlier); font-size: 0.92em; font-weight: 500; }
.nb { white-space: nowrap; }
.small { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); }

body { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* logo */
.mark { display: block; color: var(--color-ink); text-decoration: none; line-height: 0; }
.logo { display: block; height: 2.25rem; aspect-ratio: 4.1015; width: auto; }
.lg-f { fill: none; stroke: currentColor; stroke-width: 82.4; stroke-linejoin: miter; }
.lg-t { fill: none; stroke: var(--color-tick); stroke-width: 102.9; stroke-linecap: square; stroke-linejoin: miter; }
.lg-w { fill: currentColor; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* header */
.top { background: var(--color-paper-2); border-bottom: var(--rule-heavy) solid var(--color-frame); }
.top .wrap { display: flex; align-items: center; min-height: var(--nav-h); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-heavy) solid var(--color-btn); border-radius: 0; background: var(--color-btn); color: var(--color-btn-ink); font: 600 var(--text-md)/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.btn:hover { background: var(--color-btn-hover); border-color: var(--color-btn-hover); color: var(--color-accent-ink); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--color-ink); border-color: var(--color-frame); }
.btn.ghost:hover { background: var(--color-paper-3); color: var(--color-ink); }

/* the sheet */
.sheet { display: grid; align-content: center; padding-block: var(--space-3xl); }
.hold { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.intro { display: grid; gap: var(--space-lg); align-content: start; }
.hold .intro { grid-column: 1 / span 7; }
.hold .signup { grid-column: 8 / -1; }
.tag { font: 500 var(--text-lg)/1.3 var(--font-display); color: var(--color-ink); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-md); max-width: 52ch; }

/* sign-up card */
.signup { display: grid; gap: var(--space-lg); padding: var(--space-xl); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-top: var(--rule-heavy) solid var(--color-frame); }
.signup h2 { font-size: var(--text-2xl); }
.nform { display: grid; gap: var(--space-md); max-width: 40rem; }
.field { display: grid; gap: var(--space-xs); }
.field > label { font-weight: 500; }
.nrow { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.nrow input { flex: 1 1 14rem; min-width: 0; }
.field > input { width: 100%; }
.nform input[type="email"] { min-height: 48px; padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: 0; background: var(--color-paper); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; }
.nform input[type="email"]:focus-visible { outline-color: var(--color-focus); }
.ckline { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-sm); align-items: start; font-size: var(--text-sm); line-height: 1.5; }
.ckline input { width: 20px; height: 20px; margin: var(--space-3xs) 0 0; accent-color: var(--color-accent); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* single-message and privacy pages */
.note { display: grid; gap: var(--space-2xl); }
.note > * { max-width: 48rem; }
.note .intro p:not(.lead) { max-width: 60ch; }
.doc { display: grid; gap: var(--space-md); border-top: var(--rule-heavy) solid var(--color-frame); padding-top: var(--space-xl); }
.doc h2 { font-size: var(--text-xl); margin-top: var(--space-lg); }
.doc h2:first-child { margin-top: 0; }
.doc p { max-width: 65ch; }
.doc .nform { margin-top: var(--space-xs); }

/* footer */
.foot { border-top: var(--rule-hair) solid var(--color-rule); }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-xl); padding-block: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }

@media (max-width: 60rem) {
  .sheet { padding-block: var(--space-2xl); }
  .hold .intro, .hold .signup { grid-column: 1 / -1; }
  .signup { padding: var(--space-lg); }
}
@media (max-width: 26rem) { .nrow .btn, .nform > div > .btn { width: 100%; } }