/*
 * ページ全体の土台。封筒の演出（envelope*.css）と便箋（letter.css）が共有する色と書体を置く。
 */

:root {
  --bg: #efede8;
  --paper: #fcfbf7;
  --ink: #202429;
  --text: #33373c;
  --muted: #5b5f64;
  --gold: #a4864b;
  --gold-line: rgba(164, 134, 75, 0.55);
  --gold-faint: rgba(164, 134, 75, 0.28);
  --hanko: #c0392e;
  --serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  --letter-shadow:
    0 0 0 1px rgba(60, 48, 24, 0.05),
    0 2px 6px rgba(30, 30, 30, 0.05),
    0 24px 48px -24px rgba(30, 30, 30, 0.28);
  scrollbar-gutter: stable;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 演出中は本文をスクロールさせない。終わったらスクリプトがクラスを外す。 */
html.is-intro,
html.is-intro body {
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

p,
h1 {
  margin: 0;
}

.page {
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    calc(32px + env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}

@media (min-width: 720px) {
  .page {
    padding: 48px 24px 72px;
  }
}