/* figsocial.app (2026-11-08): fig purple and cream, the app's fonts, self-hosted. Phone first; no trackers, no cookies. */
@font-face { font-family: 'Cinzel Decorative'; font-weight: 400; font-display: swap; src: url(/assets/fonts/cinzel-decorative-400.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 400; font-display: swap; src: url(/assets/fonts/cormorant-garamond-400.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 400; font-style: italic; font-display: swap; src: url(/assets/fonts/cormorant-garamond-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-display: swap; src: url(/assets/fonts/cormorant-garamond-600.woff2) format('woff2'); }

:root {
  color-scheme: dark;
  --black: #121012; --cream: #f6f1e7; --muted: #c9c0b1; --line: #3a3438; --red: #c4402f; /* near-black (founder, 2026-11-08: fig purple retired); muted and line are neutral now, no plum */
  --display: 'Cinzel Decorative', Georgia, serif; --body: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--black); color: var(--cream); font: 400 20px/1.5 var(--body); display: flex; flex-direction: column; }
a { color: var(--cream); text-underline-offset: 3px; }
main { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 40px 20px 32px; }
footer { width: 100%; max-width: 640px; margin: 0 auto; padding: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 16px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; }
footer a { color: var(--muted); }

/* the lockup: the mask left of the wordmark, as tall as its f (78% of the word) */
.lockup { display: inline-flex; align-items: flex-start; gap: calc(var(--h) * .14); line-height: 0; text-decoration: none; }
.lockup img { display: block; width: auto; }
.lockup .mask { height: calc(var(--h) * .78); }
.lockup .word { height: var(--h); }
.lockup.big { --h: 88px; }
.lockup.small { --h: 30px; }

/* home */
.home main { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: 56px; }
.home .lockup { margin-bottom: 40px; }
h1 { font: 400 30px/1.2 var(--display); letter-spacing: .01em; margin: 0 0 16px; }
.lede { font-size: 22px; margin: 0 auto 12px; max-width: 30em; }
.points { list-style: none; padding: 0; margin: 4px auto 32px; color: var(--muted); font-size: 18px; }
.points li { margin: 4px 0; }
.adult { color: var(--muted); font-size: 17px; margin: 20px 0 0; }
.btn { display: inline-block; padding: 14px 28px; border-radius: 999px; border: 1px solid var(--cream); background: transparent; color: var(--cream); font: 600 18px/1.2 var(--body); letter-spacing: .04em; text-decoration: none; }
.btn.solid { background: var(--cream); color: var(--black); }
.btn[aria-disabled='true'] { cursor: default; }
.btn.block { display: block; width: 100%; text-align: center; margin-top: 12px; font-family: var(--body); cursor: pointer; }

/* text pages */
.doc header { padding: 24px 20px 0; max-width: 640px; margin: 0 auto; width: 100%; }
.doc h1 { font-size: 26px; margin: 24px 0 8px; }
.doc h2 { font: 600 22px/1.3 var(--body); margin: 28px 0 6px; }
.doc p, .doc li { margin: 8px 0; }
.doc .updated { color: var(--muted); font-size: 16px; margin: 0 0 16px; }
.placeholder { border: 1px dashed var(--line); border-radius: 8px; padding: 2px 8px; color: var(--muted); font-style: italic; }

/* the invite page (/j/<code>) */
.invite main { max-width: 420px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.invite .lockup { margin: 0 auto 20px; --h: 56px; }
.invite h1 { font-size: 24px; margin-bottom: 8px; }
.invite .muted { color: var(--muted); font-size: 17px; margin: 8px 0; }
.invite ol { text-align: left; color: var(--muted); font-size: 17px; padding-left: 20px; }
.invite .bad { display: none; }

@media (min-width: 700px) {
  .lockup.big { --h: 120px; }
  h1 { font-size: 38px; }
}