/* ===========================================================================
   Tucumcari Tourism -- "the official welcome"

   This is the one entity with no artwork of its own, so the look is built
   from the town's existing web identity. visittucumcarinm.com and
   cityoftucumcari.com independently use the same adobe red (#dd3d3a) over
   sand (#f5dbb8) on a warm cream page, with condensed Oswald headings and
   Sarabun body copy. Matching that makes this site read as part of the town
   rather than a fifth competing brand.

   A turquoise accent -- the other half of the New Mexico palette -- keeps it
   distinct from Love Tucumcari and The Heart of 66, which are also red.

   Adobe     #dd3d3a
   Sand      #f5dbb8
   Turquoise #1f8a8c
   Umber     #3d2010   (the body ink both town sites use)
   =========================================================================== */

:root {
  --font: "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-head: "Oswald", "Arial Narrow", sans-serif;

  --ink: #3d2010;
  --ink-soft: #6f5544;
  --line: #e6d6c0;
  --bg: #faf4ec;
  --bg-soft: #f5dbb8;

  --radius: 6px;
  --head-weight: 600;
  --head-spacing: .01em;
  --head-transform: uppercase;

  --header-bg: #faf4ec;
  --footer-bg: #4a2413;
  --logo-height: 50px;

  /* The town's adobe red is #dd3d3a, and that is what headings, the mesa and
     the rules use. As small text on cream it only reaches 4.37:1, just under
     AA, so anything you actually read or click uses this fractionally deeper
     red instead. The two are indistinguishable side by side. */
  --brand-ui: #c02b27;
}

a { color: var(--brand-ui); }
a:hover { color: #8e2320; }

h1, h2, h3, h4 { color: #64321e; }

/* ---- Header ------------------------------------------------------------- */
.site-header { border-bottom: 3px solid var(--brand); }
.brand-name {
  font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: .02em; color: #64321e; font-size: 1.3rem;
}
.site-nav a { text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; font-weight: 600; }

/* ---- Hero: cream sky over a sand horizon -------------------------------- */
.hero {
  --hero-bg: linear-gradient(180deg, #faf4ec 0%, #fdf0dd 55%, #f5dbb8 100%);
  --hero-ink: #3d2010;
  padding: 88px 20px 96px;
  border-bottom: 6px solid var(--brand);
}
/* A mesa silhouette -- Tucumcari Mountain, drawn in CSS so the site needs
   no artwork until real photography exists. */
.hero::after {
  content: "";
  position: absolute; left: -2%; right: -2%; bottom: 0;
  height: 108px;
  background: #dd3d3a;
  opacity: .16;
  clip-path: polygon(
    0% 100%, 0% 82%, 8% 74%, 16% 70%, 24% 52%, 33% 44%,
    38% 26%, 62% 26%, 67% 44%, 76% 52%, 84% 70%, 92% 76%, 100% 84%, 100% 100%
  );
  pointer-events: none;
}
.hero h1 {
  color: var(--brand);
  font-size: clamp(2.4rem, 6.5vw, 4rem);
  letter-spacing: .01em;
}
.hero .lede { color: #64321e; font-weight: 400; max-width: 42ch; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: .08em; font-weight: 500; font-size: .92rem;
  background: var(--brand-ui); border-color: var(--brand-ui);
}
.btn:hover { background: #8e2320; border-color: #8e2320; }
/* The hero is pale here, so the ghost button needs ink rather than white. */
.btn-ghost { color: #64321e; border-color: #64321e; background: transparent; }
.btn-ghost:hover { background: #64321e; border-color: #64321e; color: #fff; }

/* ---- Cards -------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
}
.card h2 { font-size: 1.2rem; }

.section-title { border-bottom-color: var(--accent); border-bottom-width: 3px; }

.band {
  background: var(--bg-soft);
  border-top: 3px solid var(--brand);
}

.prose blockquote { border-left-color: var(--accent); }
.notice { background: #fdf0dd; border-color: var(--accent); }
.tag { background: #fdf0dd; border-color: var(--line); }

.site-footer { border-top: 6px solid var(--accent); }
.footer-name { font-family: var(--font-head); text-transform: uppercase; }
.site-footer a { color: #f5dbb8; }

/* ---- Mission ---------------------------------------------------------------- */
.mission {
  margin: 0; padding: 26px 30px;
  max-width: 62ch;
  background: #fff;
  border-left: 5px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.15rem; line-height: 1.6; color: #4a2a17;
  box-shadow: 0 1px 0 rgba(61, 32, 16, .07);
}