/*
  Help Me Local — Phase 1 locked theme
  Locked 2026-10-24 by Jason: cream paper + terracotta/clay accents + Georgia headlines.
  Do not revert to navy/teal without an explicit palette change.
*/

:root {
  /* Surfaces */
  --cream: #f7f1e8;          /* page background (cream paper) */
  --paper: #fffbf5;          /* cards, header, forms */
  --white: #ffffff;

  /* Ink */
  --ink: #2c241c;            /* primary text (warm brown-black) */
  --muted: #6b5e52;          /* secondary text */
  --banner-ink: #5a4020;     /* mockup banner text */

  /* Lines & soft fills */
  --line: #e4d5c3;
  --banner: #efe0c8;
  --tag-bg: #efe4d4;
  --promise-bg: #eef2e8;
  --promise-ink: #3d4a32;
  --accent-grad-start: #fff7ec;
  --accent-grad-end: #f3e4d2;

  /* Accents */
  --clay: #c45c26;           /* terracotta primary CTA / logo accent */
  --clay-dark: #9a4418;      /* terracotta hover / links */
  --sage: #5c6b4a;           /* tag / eyebrow accent */

  /* Type */
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
}

a { color: var(--clay-dark); }
a:hover { color: var(--clay); }

.sample {
  background: var(--banner);
  color: var(--banner-ink);
  padding: 10px 16px;
  text-align: center;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: inherit;
}

.logo span {
  color: var(--clay);
  font-style: italic;
  font-weight: 400;
}

nav a {
  margin-left: 22px;
  text-decoration: none;
  color: var(--muted);
  font-size: 15px;
}

nav a:hover { color: var(--ink); }

form.s {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--paper);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

select,
input {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  min-width: 140px;
}

input { flex: 1; min-width: 160px; }

button {
  padding: 14px 26px;
  border: 0;
  border-radius: 10px;
  background: var(--clay);
  color: var(--white);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}

button:hover { background: var(--clay-dark); }

.tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--tag-bg);
  color: var(--sage);
  font-weight: 700;
  width: fit-content;
}

.muted { color: var(--muted); }

footer {
  padding: 28px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: 14px;
  background: var(--paper);
}