/* Tend — static site shell. Palette mirrors TendDesignSystem/Colors.swift. */
:root {
  --paper: #F1EADF;
  --surface: #FFFDF9;
  --border: #E8DFCF;
  --text: #2B2620;
  --text-secondary: #6B6356;
  --text-tertiary: #857863;
  --terracotta: #E07856;
  --sage: #7C9885;
  --maxw: 42rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1A1612;
    --surface: #2C261E;
    --border: rgba(255,255,255,0.16);
    --text: #F4EFE7;
    --text-secondary: #BFB3A2;
    --text-tertiary: rgba(244,239,231,0.55);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }

header.site { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 2.5rem; }
header.site .logo {
  font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em;
  color: var(--text); text-decoration: none;
}
header.site .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--terracotta); }
header.site nav { margin-left: auto; display: flex; gap: 1.25rem; }
header.site nav a { color: var(--text-secondary); text-decoration: none; font-size: 0.95rem; }
header.site nav a:hover { color: var(--text); }

h1 { font-size: 2rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
h2 { font-size: 1.2rem; letter-spacing: -0.01em; margin: 2rem 0 0.5rem; }
.lede { font-size: 1.15rem; color: var(--text-secondary); margin: 0 0 2rem; }
p, li { color: var(--text); }
a { color: var(--terracotta); }
.meta { color: var(--text-tertiary); font-size: 0.9rem; margin-bottom: 2rem; }

.hero {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 1.25rem; padding: 2.25rem; margin-bottom: 2rem;
}
.hero p { color: var(--text-secondary); font-size: 1.1rem; }

.placeholder {
  border-left: 3px solid var(--terracotta); background: var(--surface);
  padding: 0.75rem 1rem; border-radius: 0.4rem; margin: 1.25rem 0;
  color: var(--text-secondary); font-size: 0.92rem;
}
.placeholder strong { color: var(--text); }

footer.site {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
  color: var(--text-tertiary); font-size: 0.88rem;
  display: flex; flex-wrap: wrap; gap: 1rem;
}
footer.site a { color: var(--text-tertiary); text-decoration: none; }
footer.site a:hover { color: var(--text-secondary); }