/* The placeholder's one stylesheet. No build step, no external font, one
   script (backdrop.js, the animated backdrop): what is in this directory
   is what is served.

   Colours are the Guardrail register of branding/branding.md: sand and rope
   brown, taken from the mascot. The rope brown is the "fence" colour, so it
   is used for the page's one boundary (the rule beside the status line) and
   for nothing decorative. --surface is the ground the logo is drawn on.

   404.html carries its own copy of the tokens inline, because it is served
   at any path and cannot rely on a relative URL. Change both together. */

:root {
  --bg: #e8dcc8;
  --surface: #f8efe6;
  --text: #2a2118;
  --text-muted: #5e4a36;
  --rope: #8b6b4a;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1812;
    --surface: #f8efe6;
    --text: #e8dcc8;
    --text-muted: #b9a88e;
    --rope: #c9a27a;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* The animated backdrop (backdrop.js) draws behind the page in this
   element's `color`, so it follows the scheme, plus the two accents below:
   the held (reserved) tint is the Ledger register's periwinkle, the flash
   is the gold coin accent, both kept for what they mean in branding.md.
   The page sits above it; the script fades its drawing out under the
   page's box. */
.backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  color: var(--text);
  --coin-held: #6f63c8;
  --coin-gold: #c99a2e;
}

@media (prefers-color-scheme: dark) {
  .backdrop {
    --coin-held: #a9a1e6;
    --coin-gold: #e0b858;
  }
}

.page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 36rem;
  padding: 3rem 1rem;
}

.mark {
  display: block;
  width: 6rem;
  height: 6rem;
  border-radius: 1.25rem;
  background: var(--surface);
}

.wordmark {
  margin: 1.5rem 0 0;
  font-family: var(--mono);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.status {
  margin: 0.75rem 0 1.75rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--rope);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

p {
  margin: 0 0 1rem;
}

a {
  color: inherit;
  text-decoration-color: var(--rope);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-color: currentColor;
}

a:focus-visible {
  outline: 2px solid var(--rope);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (min-width: 40rem) {
  .page {
    padding: 4rem 2rem;
  }

  .wordmark {
    font-size: 2.75rem;
  }
}