/* Phone-optimized — fills the actual viewport */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  background: #f4ede0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: "Source Serif 4", Georgia, serif;
  overscroll-behavior-y: contain;
}
body { display: block; }

.app {
  --paper: #f4ede0;
  --paper-2: #ebe1cf;
  --paper-3: #e0d4bc;
  --ink: #1f1a14;
  --ink-soft: #6b5e44;
  --rule: #2b231a;
  --accent: #8a2a1e;
  --accent-2: #c8843a;
  --leaf: #4a5a2b;
  background: var(--paper);
  color: var(--ink);
  font-family: "Source Serif 4", Georgia, serif;
  min-height: 100dvh;
  position: relative;
  font-size: 13px;
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}