:root {
  --paper: #f5f3ee;
  --paper-2: #efece4;
  --ink: #2b2b27;
  --ink-soft: rgba(43,43,39,0.6);
  --ink-mid: #45443f;
  --ink-dim: #5a584f;
  --accent: #527947;
  --accent-deep: #45663c;
  --accent-wash: rgba(82,121,71,0.10);
  --muted: #918f86;
  --hairline: rgba(43,43,39,0.10);
  --hairline-2: rgba(43,43,39,0.16);
  --row-bottom: rgba(43,43,39,0.09);

  --shadow-float: 0 6px 16px rgba(82,121,71,0.28);
  --shadow-float-sm: 0 3px 10px rgba(82,121,71,0.22);

  --display: 'Newsreader', serif;
  --serif: var(--display);
  --body: 'Hanken Grotesk', sans-serif;
  --hand: var(--body);
  --mono: var(--body);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--body);
  color: var(--ink);
  background: #e7e4da;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* device column */
.app {
  max-width: 440px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--hairline);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

input,
textarea {
  font: inherit;
  color: inherit;
}