@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500&family=Public+Sans:wght@400;500&display=swap");

:root {
  --paper: #F6F1E7;
  --paper-2: #EDE6D6;
  --ink: #1E2A2E;
  --muted: #60686D;
  --rule: #B9B1A3;
  --track: #DDD5C6;
  --atlas: #1F6F73;
  --pen: #B33A32;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Public Sans", system-ui, sans-serif;
}

html { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; }
h1, h2, .question { font-family: var(--serif); font-weight: 400; }
h1 { font-size: 22px; }
.question { font-size: 19px; }
small, .muted { color: var(--muted); font-size: 13px; }
.rule-list > * { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 0.5px solid var(--rule); }
.rule-list { border-top: 0.5px solid var(--rule); }
.btn { font: 500 14px var(--sans); padding: 10px 18px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); border-radius: 0; cursor: pointer; }
.btn-primary { background: var(--ink); color: var(--paper); }
.link { color: var(--muted); font-size: 13px; text-decoration: underline; background: none; border: 0; padding: 0; }
.field { width: 100%; font: 16px var(--sans); padding: 8px 0; border: 0; border-bottom: 1.5px solid var(--ink); background: transparent; border-radius: 0; }
.field:focus { outline: none; border-bottom-color: var(--atlas); }
.field::placeholder { color: var(--muted); }
.progress { height: 3px; background: var(--track); }
.progress > span { display: block; height: 3px; background: var(--atlas); }
.map { background: var(--paper-2); border-radius: 6px; }
.map .marker { fill: none; stroke: var(--pen); stroke-width: 2; }
.feedback { margin-top: 14px; padding: 10px 12px; border-left: 3px solid var(--pen); font-size: 13px; border-radius: 0; }
.feedback.ok { border-left-color: var(--atlas); }
.feedback strong { font-weight: 500; color: var(--pen); }
.feedback.ok strong { color: var(--atlas); }