@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500&family=DM+Serif+Display&display=swap');

:root {
  --bg: #f3efe7;
  --ink: #231d18;
  --body: #2c2620;
  --muted: #6b6962;
  --faint: #9c9890;
  --accent: #cf2018;
  --border: rgba(35, 29, 24, 0.1);
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'DM Sans', system-ui, -apple-system, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--sans);
  background: radial-gradient(120% 110% at 50% 0%, #fcfbf8, #f3efe7 60%, #ece6da);
  color: var(--body);
  line-height: 1.65;
  min-height: 100vh;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 72px 24px 96px; }
h1 { font-family: var(--serif); font-size: clamp(34px, 5vw, 46px); letter-spacing: -0.02em; color: var(--ink); margin-bottom: 6px; }
.tagline { color: var(--muted); font-size: 18px; margin-bottom: 48px; }
h2 { font-family: var(--serif); font-size: 23px; color: var(--ink); margin: 38px 0 12px; }
p, li { margin-bottom: 12px; }
ul { padding-left: 22px; }
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(207, 32, 24, 0.3); }
a:hover { border-bottom-color: var(--accent); }
.lead { font-size: 16px; }
.muted { color: var(--faint); font-size: 14px; }

/* landing — tool list */
.tools { list-style: none; padding: 0; margin: 8px 0 0; }
.tool { display: block; padding: 22px 0; border-top: 1px solid var(--border); border-bottom: none; }
.tool:hover .tool-name { border-bottom-color: var(--accent); }
.tool-name { font-family: var(--serif); font-size: 22px; color: var(--ink); border-bottom: 1px solid transparent; }
.tool-desc { color: var(--muted); font-size: 15px; margin-top: 2px; }

footer { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 13px; color: var(--faint); }
footer a { color: var(--faint); border-bottom: none; }
footer a:hover { color: var(--muted); }
.back { display: inline-block; margin-top: 32px; font-size: 14px; }