/* cuemark site — shared brand styles.
   Locked palette: warm paper ground, ink letters, oxblood editorial accent,
   one amber dot (the period). Spectral serif for the wordmark + headings,
   Hanken Grotesk for body. Mirrors the iOS app's "matinee + oxblood" system. */

:root {
  --paper: #F4F1EA;
  --surface: #FBF8F1;
  --ink: #0A0907;
  --mute: #6E685E;
  --oxblood: #6B2D26;
  --amber: #FBC53C;
  --line: rgba(10, 9, 7, 0.12);
  --serif: 'Spectral', Georgia, serif;
  --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 22px; }

/* ── Wordmark ──────────────────────────────────────────────────────── */
.mark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.5px;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
}
.mark .dot { color: var(--amber); }

/* ── Header / footer chrome ────────────────────────────────────────── */
header.site {
  padding: 26px 0 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 34px;
}
footer.site {
  margin-top: 56px;
  padding: 24px 0 48px;
  border-top: 1px solid var(--line);
  color: var(--mute);
  font-size: 14px;
}
footer.site a { color: var(--oxblood); }

/* ── Type ──────────────────────────────────────────────────────────── */
h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0 0 6px;
}
h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  margin: 38px 0 10px;
}
h3 { font-size: 16px; font-weight: 600; margin: 22px 0 4px; }
p, li { color: var(--ink); }
a { color: var(--oxblood); text-decoration: underline; text-underline-offset: 2px; }
.updated { color: var(--mute); font-size: 15px; margin: 0 0 8px; }
.lede { color: var(--mute); font-size: 19px; line-height: 1.5; }
hr { border: none; border-top: 1px solid var(--line); margin: 30px 0; }
code { background: var(--surface); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }

/* ── Landing ───────────────────────────────────────────────────────── */
.hero { padding: 64px 0 12px; text-align: left; }
.hero .tagline { font-family: var(--serif); font-style: italic; color: var(--mute); font-size: 21px; margin: 10px 0 30px; }
.value { list-style: none; padding: 0; margin: 0 0 36px; }
.value li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.value li b { font-weight: 600; }
.value .lead { color: var(--oxblood); font-family: var(--serif); font-weight: 600; min-width: 22px; }
.coming {
  display: inline-block;
  margin: 8px 0 0;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
}
.muted-note { color: var(--mute); font-size: 14px; margin-top: 14px; }