/* Colours are PropertAI's ratified palette. The values, the roles they are
   named for, and the contrast figures live on the design system page in
   propert-ai/propertai-wiki, rendered at /brand. The variable names here
   predate the palette and are kept: --text is Ink, --bg is Ground, --muted is
   Muted. Token names for the whole system are owed by propertai-wiki #94, so
   this file does not invent any. Only the roles the site uses are defined;
   Surface and Hairline have no use here yet. */
:root {
  color-scheme: light dark;
  --text: #122C42;
  --muted: #4E6069;
  --bg: #F9FDFC;
  --accent: #16456B;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #E1EFEB;
    --muted: #8DA1AA;
    --bg: #0A1620;
    --accent: #5E96C2;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  padding: 3rem 1.75rem;
  text-align: center;
}

main {
  display: grid;
  gap: 1.5rem;
  max-width: 32rem;
}

/* The lockups are the masters from the identity release, copied unchanged.
   Their proportions are ratios, so they hold at any width. At this width the
   wordmark's cap height matches the h1 on the pages that have a visible one.

   Both files ship and CSS hides one, rather than a single <picture> element
   choosing between them. A <picture> picks its source when the page loads and
   does not pick again when the reader's colour scheme changes, so a page left
   open across a sunset switch would keep the wrong lockup, invisible against
   the ground it landed on. A media query re-evaluates. */
.lockup {
  display: block;
  width: min(15rem, 62vw);
  height: auto;
}

.lockup.on-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .lockup.on-light {
    display: none;
  }

  .lockup.on-dark {
    display: block;
  }
}

/* Off-screen but still read aloud and still counted as a heading. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

h1 {
  font-size: 1.875rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 1.125rem;
  margin-top: 1.75rem;
}

p {
  font-size: 1rem;
  line-height: 1.7;
}

a {
  color: var(--accent);
}

footer p {
  font-size: 0.8125rem;
  color: var(--muted);
}

.honeypot {
  display: none;
}

.contact {
  display: grid;
  gap: 0.6rem;
  text-align: left;
  margin-top: 1.5rem;
}

/* Every control keeps its 1rem text. Below 16px, Safari on iOS zooms the page
   when a field takes focus, so the form does not follow the type scale down. */
.contact > label,
.contact legend {
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Borders on form controls stay Muted rather than moving to the palette's
   Hairline. Hairline is for rules and meter tracks. A control's edge is what
   tells a visitor where to click, so it needs 3:1 against the background;
   Hairline is 1.12:1 on Ground and would not clear it. */
.contact input[type="text"],
.contact input[type="email"],
.contact textarea {
  font: inherit;
  font-size: 1rem;
  width: 100%;
  padding: 0.6rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--muted);
  border-radius: 4px;
}

.contact textarea {
  resize: vertical;
}

.contact input:focus-visible,
.contact textarea:focus-visible,
.contact button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.contact fieldset {
  border: 1px solid var(--muted);
  border-radius: 4px;
  padding: 0.5rem 0.9rem 0.75rem;
  margin-top: 0.9rem;
}

.contact fieldset label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.25rem 0;
  font-size: 1rem;
  cursor: pointer;
}

.contact input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.contact button {
  font: inherit;
  font-size: 1rem;
  justify-self: start;
  margin-top: 0.9rem;
  padding: 0.6rem 1.5rem;
  color: var(--bg);
  background: var(--accent);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.contact .note {
  font-size: 0.8125rem;
  line-height: 1.6;
  margin-top: 0.4rem;
  color: var(--muted);
}