/* ============================================================================
   LIFE IS SHORT — the public landing page

   A file rather than a <style> block in templates/index.html. `/` is served
   under `default-src 'self'` with no `unsafe-inline`, so the block that used to
   live in that template was dropped by the browser and the page rendered with
   no styling at all -- silently, with nothing reaching the server.
   tests/test_public_index_csp.py locks that.

   Same palette and type as the console, from the parent site. This page is a
   door onto it, so arriving here and then signing in should not feel like two
   different products.
   ========================================================================== */

:root {
  color-scheme: light;

  --ink:    #183028;
  --ink-3:  #5e6c65;
  --cream:  #f4f0e8;
  --paper:  #fffdf8;
  --orange: #9d4f22;
  --green:  #285b4b;
  --line:   #d8d0c2;

  --font:    "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --display: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 42rem;
  margin: 12vh auto;
  padding: 2rem;
}

h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.8rem);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: .2rem 0 1rem;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  margin: 0;
  color: var(--orange);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

a { color: var(--green); font-weight: 700; text-underline-offset: 3px; }
a:hover { text-decoration: none; }

small { color: var(--ink-3); }

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