/* The website's own layout, over tokens.css. The canvas (../../design/) is
   where these pages are drawn; this is that drawing, as classes. */

html { background: var(--mm-bg); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--mm-bg); color: var(--mm-fg); font: var(--mm-ui-weight) 17px/1.5 var(--mm-ui); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { text-decoration-color: currentColor; }
img { display: block; }

/* The title: the name over 見守り and the seal, as at the top of the app's screens. */
.title { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; }
.title .name { font: var(--mm-mark-weight) 17px/22px var(--mm-voice); letter-spacing: .26em; text-transform: uppercase; padding-left: .26em; }
.title .under { display: flex; align-items: center; gap: 8px; }
.title .kanji { font: var(--mm-voice-weight) 14px/14px var(--mm-voice); letter-spacing: .3em; padding-left: .3em; opacity: .85; }
.title .seal { width: 14px; height: 14px; }

/* The lockup: the ensō beside the title, one line, for the head of a page. */
.lockup { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.lockup img { width: 48px; height: 48px; }
.lockup .title { align-items: flex-start; gap: 6px; }

/* Home: the app's first screen at the size of a window. */
.home { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; padding: 72px 24px 80px; text-align: center; }
.home .enso { width: 272px; height: 272px; max-width: 70vw; max-height: 70vw; }
.home .line { margin: 0; max-width: 26rem; font: var(--mm-voice-weight) clamp(19px, 1.6vw, 22px)/1.45 var(--mm-voice); }
.join { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 8px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border-radius: 12px; background: var(--mm-fg); color: var(--mm-bg); font: 600 17px/1 var(--mm-ui); text-decoration: none; }
.button:hover { text-decoration: none; }
.note { margin: 0; font: var(--mm-ui-weight) 14px/1.4 var(--mm-ui); letter-spacing: .02em; opacity: .8; }

/* Privacy and support: the lockup home, then the words. */
header.site { width: 100%; max-width: 68rem; margin: 0 auto; padding: 28px 24px 0; box-sizing: border-box; }
.prose { flex: 1; width: 100%; max-width: 38rem; margin: 0 auto; padding: 64px 24px 104px; box-sizing: border-box; display: flex; flex-direction: column; gap: 36px; }
.prose .head { display: flex; flex-direction: column; gap: 10px; }
.prose h1 { margin: 0; font: var(--mm-mark-weight) 28px/1.25 var(--mm-voice); }
.prose .effective { margin: 0; font: var(--mm-ui-weight) 14px/1.4 var(--mm-ui); letter-spacing: .02em; opacity: .8; }
.prose section { display: flex; flex-direction: column; gap: 12px; }
.prose h2 { margin: 0; font: 600 20px/1.3 var(--mm-voice); }
.prose p, .prose ul { margin: 0; font: var(--mm-ui-weight) 17px/1.5 var(--mm-ui); }
.prose ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 10px; }

/* Every page ends the same way. */
footer.site { width: 100%; max-width: 68rem; margin: 0 auto; padding: 0 24px 40px; box-sizing: border-box; }
footer.site > div { padding-top: 20px; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font: var(--mm-ui-weight) 14px/1.4 var(--mm-ui); letter-spacing: .02em; opacity: .8; }
footer.site p { margin: 0; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }