/* ============================================================
   lonestarwf.com — Lone Star Warmth
   Cream paper. Rust + sage palette. Variable-serif display.
   Warm, friendly, modern small-town Texas — no kitsch.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,400..900,0..100&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  /* Warmer, dustier palette — distinct from okeke.us & sundai.us */
  --color-ink:        #1F1A12;   /* warm near-black */
  --color-ink-soft:   #4A3F31;
  --color-mute:       #7B6F5C;
  --color-mute-soft:  #B5A892;
  --color-paper:      #FBF4E0;   /* cream */
  --color-paper-edge: #F2E8CB;
  --color-rule:       #DCCBA5;   /* dusty rule */

  /* Three earth-toned accents */
  --color-rust:       #B14E2E;   /* warm rust — primary accent */
  --color-rust-ink:   #6E2A14;
  --color-sage:       #5F7250;   /* dusty sage — secondary */
  --color-sage-ink:   #3B4A2E;
  --color-sun:        #D4942D;   /* warm sun — tertiary */

  --color-success:    #5F7250;
  --color-error:      #B14E2E;

  /* Type pairing — Fraunces variable serif (display) + DM Sans (body).
     Fraunces has opsz + wght + SOFT axes — we lean into "soft" for warmth. */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.005em;
  --tracking-flat:  0;
  --tracking-wide:  0.06em;
  --tracking-edge:  0.16em;

  --type-eyebrow: 0.75rem;
  --type-meta:    0.875rem;
  --type-body:    1.0625rem;
  --type-lead:    1.25rem;
  --type-h3:      1.625rem;
  --type-h2:      clamp(2rem, 4.5vw, 3.25rem);
  --type-h1:      clamp(2.75rem, 7.5vw, 5.25rem);

  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;

  /* Softer radii — warm, friendly */
  --r-tight: 6px;
  --r-soft:  12px;
  --r-card:  20px;
  --r-pill:  999px;

  --rule-hair: 0.75px;
  --rule-thin: 1.25px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Cream background with very subtle dust grain — feels like aged paper,
   never noisy. */
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--color-ink);
  background-color: var(--color-paper);
  background-image:
    radial-gradient(circle at 2px 2px, rgba(31,26,18,0.018) 1.2px, transparent 0);
  background-size: 14px 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.rail {
  max-width: 1200px;
  margin: 0 auto;
  /* Fluid horizontal padding — at least 2rem on phones, scales with viewport
     so mid-widths breathe, caps at 4rem on very wide screens. */
  padding-inline: clamp(2rem, 7vw, 4rem);
  position: relative;
}
html, body { overflow-x: clip; }

/* Sun-stamp eyebrow — small horizon-line motif before the label.
   This is the local signature without being literal Texas iconography. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--tracking-edge);
  color: var(--color-rust-ink);
  text-transform: uppercase;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 22px;
  background:
    radial-gradient(circle at 50% 70%, var(--color-sun) 0 6px, transparent 6.5px),
    linear-gradient(to bottom, transparent 60%, var(--color-rust) 60% 61%, transparent 61%);
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* Display type — Fraunces tuned WARM (soft axis up, opsz up at big sizes).
   Italic eyebrow on the headline emphasizes the personal/local tone. */
.display {
  font-family: var(--font-display);
  font-size: var(--type-h1);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 620;
  color: var(--color-ink);
  margin: 0;
}
.display em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 540;
  color: var(--color-rust);
  font-weight: 540;
}
h2.section-title {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  font-variation-settings: 'opsz' 96, 'SOFT' 60, 'wght' 620;
  margin: 0;
}
.lead {
  font-size: var(--type-lead);
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 58ch;
  margin: 0;
  font-weight: 400;
}

/* Buttons — round, warm, big tap targets for small-business prospects */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  padding: 0.875rem 1.5rem;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.btn-primary {
  background: var(--color-rust);
  color: var(--color-paper);
  border-color: var(--color-rust);
}
.btn-primary:hover {
  background: var(--color-rust-ink);
  border-color: var(--color-rust-ink);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn-ghost:hover { background: var(--color-ink); color: var(--color-paper); }
.btn svg { width: 18px; height: 18px; }

/* Cards — softly rounded, cream-on-cream with warm rule */
.card {
  background: var(--color-paper);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--r-card);
  padding: var(--s-6);
  transition: border-color 140ms ease, transform 140ms ease;
}
.card:hover {
  border-color: var(--color-rust);
  transform: translateY(-2px);
}

/* Icon language — Lucide line, slightly chunkier stroke than okeke.us */
.icon {
  width: 24px; height: 24px;
  stroke: var(--color-rust);
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.rule { border: 0; border-top: var(--rule-hair) solid var(--color-rule); margin: 0; }

/* Chip — small pill for service category */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.375rem 0.875rem;
  background: var(--color-paper-edge);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  letter-spacing: var(--tracking-snug);
}
.chip-sage { background: rgba(95,114,80,0.10); border-color: rgba(95,114,80,0.35); color: var(--color-sage-ink); }
.chip-rust { background: rgba(177,78,46,0.10); border-color: rgba(177,78,46,0.35); color: var(--color-rust-ink); }