/* Scrinia's one page. The palette and the 15px base are the canvas's (canvas/web/app.css), so this reads as part of the
   same family; the dot field is the halftone idea Emilio asked for on 11-10 ("more dot-matrixes in our product as UI
   bits"). No webfonts, no CDN: the page is one HTML, one CSS, one JS. */

:root {
  --bg: #0E1013; --ink: #E8EAEC; --muted: #9CA3AA; --faint: #6E757C;
  --line: #23272B; --accent: #4C7BF0; --dot: 232, 234, 236; --dot-on: 76, 123, 240;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #FAFAF9; --ink: #1A1D21; --muted: #6B7178; --faint: #9AA0A6;
    --line: #E6E4E0; --accent: #2F5BD3; --dot: 26, 29, 33; --dot-on: 47, 91, 211;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  overflow-x: hidden;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
a { color: var(--accent); }

/* the dot field sits behind everything, drawn by dots.js */
/* The field lives in the top-right, where no copy sits, and fades out before it reaches the text column: dots behind
   a paragraph read as dirt, not as a halftone. The second cluster under the form keeps the right edge alive. */
#field {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0; opacity: .95;
  mask-image:
    radial-gradient(64% 52% at 88% 10%, #000 0%, #000 42%, transparent 78%),
    radial-gradient(46% 44% at 96% 74%, #000 0%, #000 26%, transparent 72%);
  -webkit-mask-image:
    radial-gradient(64% 52% at 88% 10%, #000 0%, #000 42%, transparent 78%),
    radial-gradient(46% 44% at 96% 74%, #000 0%, #000 26%, transparent 72%);
  mask-composite: add;
  -webkit-mask-composite: source-over;
}

main {
  position: relative; z-index: 1;
  max-width: 720px; margin: 0 auto;
  padding: 40px 28px 72px;
  display: flex; flex-direction: column; gap: 56px;
}

.top { display: flex; align-items: center; gap: 10px; font: 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.mark { width: 18px; height: 18px; display: block; color: var(--ink); }
.word { color: var(--ink); }
.tag { color: var(--faint); margin-left: auto; border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; }

.hero { display: flex; flex-direction: column; gap: 22px; }
h1 {
  margin: 0; font-size: clamp(34px, 6.4vw, 58px); line-height: 1.04;
  letter-spacing: -.025em; font-weight: 600;
}
.lede { margin: 0; color: var(--muted); font-size: 17px; max-width: 34em; }

.join { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.join input {
  flex: 1 1 260px; min-width: 0; padding: 14px 15px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px;
  font: 15px var(--sans);
  transition: border-color .15s ease;
}
.join input::placeholder { color: var(--faint); }
.join input:focus { outline: none; border-color: var(--accent); }
.join button {
  padding: 14px 18px; border-radius: 9px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; font: 600 15px var(--sans); cursor: pointer;
  transition: filter .15s ease, opacity .15s ease;
}
.join button:hover { filter: brightness(1.08); }
.join button:disabled { opacity: .6; cursor: default; }
.note { margin: 0; min-height: 1.4em; font: 13px/1.5 var(--mono); color: var(--muted); }
.note:not(:empty)::before { content: "→ "; color: var(--accent); }

.points { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 16px; }
.points li { position: relative; padding-left: 22px; color: var(--muted); }
.points li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(var(--dot), .5);
  box-shadow: 0 0 0 3px rgba(var(--dot), .06);
}
.points b { color: var(--ink); font-weight: 600; }

footer { border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 6px; }
.etym { margin: 0; color: var(--faint); font-size: 13px; }
.fine { margin: 0; color: var(--faint); font: 12px/1.6 var(--mono); }

@media (max-width: 640px) {
  main { padding: 28px 20px 56px; gap: 40px; }
  .lede { font-size: 16px; }
  /* a narrow column has no free margin, so the field keeps to a band at the top instead of running behind the copy */
  #field {
    opacity: .5;
    mask-image: radial-gradient(130% 30% at 82% 0%, #000 0%, #000 34%, transparent 82%);
    -webkit-mask-image: radial-gradient(130% 30% at 82% 0%, #000 0%, #000 34%, transparent 82%);
  }
}
@media (prefers-reduced-motion: reduce) {
  #field { opacity: .55; }
}