/* Sessionmates website – same warm, editorial look as the app. Fonts are self-hosted (no Google). */
@font-face { font-family: 'Newsreader'; src: url('fonts/Newsreader_400Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('fonts/Newsreader_500Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('fonts/Newsreader_500Medium_Italic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('fonts/DMMono_400Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }

:root {
  --bg: #EEEBE5; --surface: #F8F6F2; --muted-surface: #E4E0D8; --border: #D8D3C9;
  --text: #1A1917; --muted: #6F6A62; --accent: #D9480F; --ink: #1A1917; --on-ink: #F8F6F2;
  --todo: #FFE8A3; --todo-text: #5A4300;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'DM Mono', ui-monospace, Menlo, monospace;
  --radius: 18px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141312; --surface: #1E1D1B; --muted-surface: #2A2826; --border: #353230;
    --text: #F2EFE9; --muted: #A8A399; --accent: #FF7A45; --ink: #F2EFE9; --on-ink: #141312;
    --todo: #4A3A08; --todo-text: #FFE08A;
  }
  .logo { filter: none; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.6; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
img { max-width: 100%; display: block; }
/* The logo files are drawn light: dark ink on the light background, as they are in dark mode. */
.logo { filter: invert(0.9); }

.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 720px; }

header.site { padding: 18px 0; }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
header.site .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
header.site .brand img { height: 30px; width: auto; }
header.site .brand span { font-family: var(--mono); letter-spacing: 2px; font-size: 13px; }
header.site nav { display: flex; gap: 16px; font-size: 15px; }
header.site nav a { text-decoration: none; color: var(--muted); }
header.site nav a:hover { color: var(--text); }

.label { font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: clamp(38px, 7vw, 64px); margin: 0.2em 0 0.3em; }
h1 em, h2 em { font-style: italic; }
h2 { font-size: clamp(26px, 4vw, 34px); margin: 1.6em 0 0.4em; }
h3 { font-size: 22px; margin: 1.4em 0 0.3em; }
p.lead { font-size: 20px; color: var(--muted); max-width: 34em; }

.hero { padding: 48px 0 32px; text-align: center; }
.hero .logo-full { width: min(360px, 80%); margin: 0 auto 28px; }
.hero p.lead { margin: 0 auto; }
.cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; padding: 14px 24px; border-radius: 999px;
  background: var(--ink); color: var(--on-ink); text-decoration: none; font-weight: 600; }
.cta:hover { color: var(--on-ink); opacity: 0.85; }
.cta.secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
.note { font-size: 14px; color: var(--muted); margin-top: 12px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 32px 0; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.card h3 { margin-top: 6px; }
.card p { margin: 0; color: var(--muted); font-size: 16px; }

.legal { padding: 24px 0 48px; }
.legal h1 { font-size: clamp(34px, 6vw, 48px); }
.legal h2 { font-size: 24px; }
.legal ul { padding-left: 1.2em; }
.legal li { margin: 0.25em 0; }
.legal .meta { color: var(--muted); font-size: 15px; }
.draft { background: var(--muted-surface); border-radius: 12px; padding: 12px 16px; font-size: 15px; }
mark.todo { background: var(--todo); color: var(--todo-text); padding: 1px 6px; border-radius: 6px; }

form.contact { display: grid; gap: 14px; margin: 24px 0; }
form.contact label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
form.contact input, form.contact select, form.contact textarea {
  font: inherit; font-weight: 400; color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; width: 100%; }
form.contact textarea { min-height: 160px; resize: vertical; }
form.contact button { justify-self: start; border: 0; cursor: pointer; font: inherit; }
form.contact .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.status { padding: 12px 16px; border-radius: 12px; display: none; }
.status.ok { display: block; background: #E2EFE5; color: #1F7A45; }
.status.err { display: block; background: #F6E4E0; color: #B42318; }
@media (prefers-color-scheme: dark) { .status.ok { background: #15301F; color: #6FD49A; } .status.err { background: #3A1A17; color: #FF8A80; } }

footer.site { border-top: 1px solid var(--border); margin-top: 48px; padding: 28px 0 40px; font-size: 14px; color: var(--muted); }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
footer.site a { text-decoration: none; color: var(--muted); }
footer.site a:hover { color: var(--text); }

@media (max-width: 560px) {
  header.site nav a.hide-small { display: none; }
  body { font-size: 16px; }
}

/* Dark mode: the light logo files are used as they are (must come after the .logo rule above). */
@media (prefers-color-scheme: dark) { .logo { filter: none; } }