/* quitporn.bot landing page. Tokens from design-system/tokens.json. Every value is a multiple of 8px. */

:root {
  --paper: #ffffff;
  --ink: #111111;
  --muted: #5e5e58;
  --line: #d9d9d3;
  --maze: #2121de;
  --on-maze: #ffffff;
  --alert: #c8201f;
  --font-pixel: "Silkscreen", "Courier New", monospace;
  --font-mono: "IBM Plex Mono", "Geist Mono", ui-monospace, Menlo, monospace;
  --cell: 8px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0d0d0d;
    --ink: #f2f2ee;
    --muted: #a2a29b;
    --line: #2b2b29;
    --maze: #8f8fff;
    --on-maze: #0d0d0d;
    --alert: #ff7b78;
  }
}

html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font-family: var(--font-mono); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; }
::selection { background: var(--maze); color: var(--on-maze); }
a { color: var(--maze); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--maze); outline-offset: 2px; }
p { margin: 0; }
h1, h2 { margin: 0; font-weight: 500; }

.g { padding: 24px; max-width: 720px; box-sizing: border-box; width: 100%; }
.hero { display: flex; flex-direction: column; gap: 32px; padding-top: 32px; }
.below { display: flex; flex-direction: column; gap: 48px; padding-top: 48px; padding-bottom: 48px; }
.hr { border-top: 1px solid var(--line); }

.top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.wm { font-family: var(--font-pixel); font-size: 16px; line-height: 16px; }
.h1 { font-size: 28px; line-height: 38px; }
.lede { font-size: 16px; line-height: 26px; max-width: 36em; }
.lede-box { position: relative; }
.lede.ghost { visibility: hidden; }
.lede.live { position: absolute; top: 0; left: 0; right: 0; }
.small { font-size: 13px; line-height: 20px; }
.muted { color: var(--muted); }
.note { max-width: 36em; }
.label { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hid { visibility: hidden; }

.cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 56px; padding: 0 32px; background: var(--maze); color: var(--on-maze); text-decoration: none; font-size: 15px; line-height: 20px; font-weight: 500; width: 100%; box-sizing: border-box; border-radius: 0; }
.btn:active { transform: translate(2px, 2px); }

.block { display: flex; flex-direction: column; gap: 16px; }
.rows { display: flex; flex-direction: column; gap: 16px; max-width: 36em; }
.row { display: flex; flex-direction: column; gap: 2px; }
.title { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; flex-wrap: wrap; font-weight: 500; }
.foot { display: flex; flex-direction: column; gap: 12px; }
.links { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; line-height: 20px; }

/* The cursor: ink, 0.55em by 0.9em, square, blinks at 1s with steps(2, start). */
.cur { display: inline-block; width: 0.55em; height: 0.9em; background: var(--ink); vertical-align: -0.12em; margin-left: 0.2em; animation: curblink 1s steps(2, start) infinite; }
@keyframes curblink { to { visibility: hidden; } }

/* The face: 16 by 16 grid, no gaps, no border. Eyes, mouth and corners are single blocks spanning cells.
   Expression is driven by the phase class on .face (clutter, sad, calm), set by site.js. */
.face { display: grid; grid-template-columns: repeat(16, var(--cell)); grid-template-rows: repeat(16, var(--cell)); width: calc(16 * var(--cell)); height: calc(16 * var(--cell)); }
.face div { background: var(--ink); }
.face .x, .face .s, .face .n { display: none; }
.face.clutter .x, .face.sad .x { display: block; }
.face.calm .s { display: block; }
.face.clutter .n { display: block; animation: flick 2.3s steps(1, end) both, drop 0.16s steps(1, end) forwards; }
.face.clutter .e, .face.clutter .f, .face.clutter .x { animation: flick 2.3s steps(1, end) both; }
.face.calm .e { animation: blink 6s steps(1, end) 1.3s infinite; }
@keyframes flick { 0% { opacity: 1 } 12% { opacity: 0 } 20% { opacity: 1 } 34% { opacity: 0 } 41% { opacity: 1 } 58% { opacity: 0 } 66% { opacity: 1 } 100% { opacity: 1 } }
@keyframes drop { 0% { opacity: 1; transform: none } 50% { opacity: 1; transform: translateY(100%) } 100% { opacity: 0; transform: translateY(100%) } }
@keyframes blink { 0% { opacity: 1 } 96% { opacity: 1 } 97% { opacity: 0 } 100% { opacity: 0 } }

@media (min-width: 720px) {
  :root { --cell: 12px; }
  .g { padding: 64px; }
  .wm { font-size: 20px; line-height: 20px; }
  .h1 { font-size: 40px; line-height: 52px; }
  .lede { font-size: 18px; line-height: 28px; }
  .btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .face div, .cur { animation: none !important; }
}

/* Added for the welcome and policy pages. Same tokens, same rules. */
[hidden] { display: none !important; }
a.wm { color: var(--ink); text-decoration: none; }
.key { font-size: 28px; line-height: 38px; font-weight: 500; letter-spacing: 0.04em; user-select: all; word-break: break-all; }
.keybox { display: flex; flex-direction: column; gap: 8px; }
[data-state] .state { display: none; }
[data-state="checking"] .state.checking, [data-state="paid"] .state.paid, [data-state="unpaid"] .state.unpaid, [data-state="error"] .state.error { display: flex; }
.state { flex-direction: column; gap: 32px; }
.doc { display: flex; flex-direction: column; gap: 32px; }
.doc section { display: flex; flex-direction: column; gap: 12px; max-width: 36em; }
.doc h2 { font-size: 16px; line-height: 26px; }
.doc ul { margin: 0; padding-left: 2ch; display: flex; flex-direction: column; gap: 8px; }
.doc .h1 { font-size: 28px; line-height: 38px; }
@media (min-width: 720px) { .key { font-size: 40px; line-height: 52px; } }