/* North Point Land Group — landing site styles.
 *
 * No @font-face and no webfont: headings use a serif stack led by Georgia
 * (Windows/macOS/iOS) falling back to Noto Serif on Android, body text uses the
 * system sans stack. Zero third-party origins, no framework, no reset library.
 *
 * Contrast rules obeyed throughout, from the design's computed table:
 *   --brass on --warm-white is 2.8:1 and FAILS everything, so brass on a light
 *     surface is decorative fill only — never text, never a border. The only
 *     brass-on-light in the page now is inside wordmark.svg's own artwork, which
 *     this stylesheet does not control. (This once cited the header monogram; that
 *     mark is no longer in any page's markup.)
 *   --brass-dk on --warm-white is 4.0:1 — large text and rules only, never body
 *     copy and never link text.
 *   brass text sits on --navy-900 (5.2:1), never on --navy-700 (4.4:1).
 *   links on a light surface use --blue-500 (6.7:1); body text is --ink on
 *     --warm-white (15.8:1).
 */

:root {
  --navy-900: #0f2438;
  --navy-700: #15304d;
  --blue-500: #2c5a85;
  --brass: #ba8a57;
  --brass-dk: #9c7139;
  --warm-white: #f8f6f2;
  --ink: #1c1c1c;
}

/* Root stays at the browser's 16px and is never overridden, so every rem below
 * is predictable and a reader's own font-size setting still scales the page. */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--warm-white);
  color: var(--ink);
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

h1,
h2,
h3,
.wordmark {
  font-family: Georgia, 'Times New Roman', 'Noto Serif', serif;
  color: var(--navy-900);
}

h1,
h2,
h3 {
  margin: 0 0 0.75rem;
}

h1 {
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  line-height: 1.2;
}

h2 {
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  line-height: 1.25;
}

h3 {
  font-size: 1.125rem;
  line-height: 1.3;
}

p {
  margin: 0 0 1rem;
}

p:last-child {
  margin-bottom: 0;
}

strong {
  color: var(--navy-900);
}

ul,
ol {
  margin: 0 0 1rem;
  padding-left: 1.375rem;
}

li {
  margin-bottom: 0.5rem;
}

li:last-child {
  margin-bottom: 0;
}

address {
  font-style: normal;
}

a {
  color: var(--blue-500);
}

a:hover {
  color: var(--navy-700);
}

/* Visible keyboard focus on every interactive element. Navy on the light
 * surfaces, brass on the two dark ones, so the ring always has contrast. */
a:focus-visible {
  outline: 3px solid var(--navy-900);
  outline-offset: 2px;
}

.on-dark a:focus-visible {
  outline-color: var(--brass);
}

/* ── Header lockup ─────────────────────────────────────────────────────────── */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1rem;
  /* A rule, not text: --brass-dk clears the 3:1 interface bar at 4.0:1. */
  border-bottom: 2px solid var(--brass-dk);
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--navy-900);
  text-decoration: none;
}

/* THE WORDMARK IS THE HEADER LOCKUP on every page — there is no monogram in any
 * page's markup, and no separate brand band. An earlier version had a 2rem monogram
 * here with the wordmark in its own band below, which put two different marks and the
 * company name twice inside the first 200px; the small monogram read as an orphan.
 *
 * The monogram is NOT gone from the brand, but its remit is now narrow and the split is
 * by SIZE, not by shape:
 *   - favicon.ico and favicon.svg (16-32px) stay the MONOGRAM. Three bold shapes are
 *     the only thing that survives 16px; the roundel's sun rays, layered mountain and
 *     water band turn to mush there.
 *   - apple-touch-icon.png (180) and icon-512.png stay square but are now the ROUNDEL
 *     from wordmark.svg, so large icons match this header.
 *   - og-card.jpg (1200x630) is the full wordmark plus the hero photo.
 * The `.monogram` CSS rule that
 * lived here is deleted because nothing in any page uses the class any more, and an
 * unused class is exactly the drift Requirement 6.7 checks for in both directions.
 *
 * 260px here, 400px at the breakpoint. THESE ARE FOLD BUDGET, NOT TASTE: the photo
 * sits between this and the headline, so every pixel the header gains the headline
 * loses. Verified legible down to 260px — the roundel's sun rays soften well before
 * the type does, so type legibility is not the binding limit. */
.site-header .lockup img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
}

/* Still used: the footer's <p class="wordmark"> company line. */
.wordmark {
  font-size: 1.125rem;
  line-height: 1.3;
}

.phone-line {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* The `.placeholder` rule that lived here is REMOVED — the phone number is
 * provisioned (2026-08-12) so nothing uses it, and an unused class is the drift
 * Requirement 6.7 checks for in both directions. Re-add it if another field ever
 * ships unfinished, and if so: NOT as a dashed box. The original version used
 * `border: 1px dashed` and rendered as an empty text input, which is actively wrong
 * on a page carrying zero form controls by requirement — a reader could try to type
 * in it. Italic plus a muted colour is the shape that worked. */

/* ── Sections ──────────────────────────────────────────────────────────────── */

main section {
  padding: 1.5rem 1rem;
}

main section + section {
  border-top: 1px solid var(--brass-dk);
}

.wrap {
  max-width: 68ch;
  margin: 0 auto;
}

.on-dark {
  background: var(--navy-900);
  color: var(--warm-white);
}

.on-dark h1,
.on-dark h2 {
  color: var(--warm-white);
}

.on-dark a {
  color: var(--warm-white);
}

/* ── Cover photo band ─────────────────────────────────────────────────────── */

/* The same photograph the Facebook page uses as its cover — San Luis Valley floor
 * with the Sangre de Cristo range behind it, which is the county we actually buy in.
 *
 * It is a band of its OWN, with no text over it, and #hero sits below it on solid
 * navy. That is a decision worth not undoing: an earlier version overlaid the
 * headline on the photo behind a scrim, and the photo's leading line is the dirt
 * road converging at dead centre — exactly where a centred text column has to put
 * its scrim. Any scrim strong enough to carry text sits on the vanishing point and
 * kills the shot. Text and photo do not share this space.
 *
 * Consequence, and the reason there is no gradient anywhere in this rule: with no
 * text on the image there is no contrast requirement, so the photo runs at full
 * brightness.
 *
 * An <img> rather than a background-image, because it is a standalone element rather
 * than a surface behind text. That also lets the browser discover it in markup, so
 * it needs no <link rel="preload"> — fetchpriority="high" on the tag is enough.
 * alt="" is correct: it carries nothing the headline below does not already say. */
#cover {
  /* Zeroes the shared `main section` padding so the photo is genuinely full-bleed. */
  padding: 0;
  background-color: var(--navy-900);
}

/* aspect-ratio reserves the box before the JPEG lands, so the headline never jumps
 * on a cold load. max-height stops a 2.33:1 photo eating a whole tall or 4K viewport,
 * and object-fit then crops rather than distorts.
 *
 * THE 48vh IS FOLD BUDGET, NOT TASTE. Header + photo must stay under ~500px or the
 * headline drops off screen on a 1440x800 laptop. Recompute the stack before raising
 * it, and note it interacts with the header wordmark width below — they draw from the
 * same budget.
 *
 * The crop is VIEWPORT-DEPENDENT and that is deliberate: at 1440px wide about 54% of
 * the image height shows, but on a 390px phone the natural height is ~167px, 48vh
 * never bites, and the FULL frame is visible. So do not "optimise" this by shipping a
 * pre-cropped short image — the phone layout uses the pixels a desktop crop would
 * throw away. Measured and rejected 2026-09-15. */
#cover img {
  display: block;
  width: 100%;
  aspect-ratio: 1600 / 686;
  max-height: 48vh;
  object-fit: cover;
  object-position: center 60%;
}

/* #cover needs no border-top reset: it is the FIRST section in <main>, and the
 * `main section + section` rule above cannot match a first child. The header's own
 * 2px brass rule is the single line between the wordmark and the photo. */

/* 1.125rem, not the 1.0625rem this started at — a 1px difference from body text is
 * a distinction nobody perceives, so it was doing no work. */
.lead {
  font-size: 1.125rem;
}

/* The `.brand-banner` rules that lived here are REMOVED. They showed the wordmark at
 * 560px inside #who-we-are, which was the right place for it while the header carried
 * only a small monogram. The wordmark now opens the page from the header, and showing
 * the same mark twice makes neither placement feel deliberate — so #who-we-are is text
 * only and this class is used by nothing. Re-add both together if that ever reverses. */

.small-print {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--navy-700);
  color: var(--warm-white);
  padding: 1.5rem 1rem;
}

.site-footer .wordmark {
  color: var(--warm-white);
  display: block;
  margin-bottom: 0.5rem;
}

.site-footer a {
  color: var(--warm-white);
}

.site-footer a:focus-visible {
  outline-color: var(--brass);
}

/* ── One breakpoint ───────────────────────────────────────────────────────── */

@media (min-width: 48rem) {
  .site-header {
    padding: 1.25rem 2rem;
  }

  main section {
    padding: 3rem 2rem;
  }

  /* The wordmark gets bigger once there is room. 400px renders 137px tall against the
   * mark's 3500x1200, so the header costs ~179px including padding and its rule; with
   * the 48vh photo below that still leaves the headline on screen at 1440x800. Raising
   * this spends the headline's fold budget — see the note on .site-header .lockup img
   * and on #cover img. */
  .site-header .lockup img {
    max-width: 400px;
  }

  .site-footer {
    padding: 2.5rem 2rem;
  }

  /* The one place a wider viewport genuinely helps: the buy / don't-buy pair. */
  .buy-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
  }
}