/* ============================================================
   Springfield MO Land Surveyor - design system
   Distinct from Tulsa (navy/orange, contours) and Lexington
   (limestone/green, strata). Here: ink + warm sand + survey
   teal, with a clay accent reserved for karst and sinkhole
   warnings. Motif is the PLSS section grid, which is what
   Missouri land is actually divided by.
   ============================================================ */

:root{
  --ink:        #14191C;
  --ink-2:      #232D33;
  --slate:      #4A5A63;
  --mute:       #7A8A92;
  --line:       #DED8CC;
  --sand:       #F5F2EA;
  --sand-2:     #EAE4D7;
  --paper:      #FFFFFF;
  --teal:       #0E6E7C;
  --teal-dk:    #0A555F;
  --clay:       #C4622D;   /* karst / sinkhole callouts ONLY */
  --clay-bg:    #FBF0E6;
  --red:        #A8322A;

  --shell: 1180px;
  --r: 3px;

  --f-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--sand); color:var(--ink);
  font-family:var(--f-body); font-size:17.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--teal-dk); text-underline-offset:3px; }
a:hover{ color:var(--ink); }

.shell{ width:min(100% - 2.5rem, var(--shell)); margin-inline:auto; }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--f-head); font-weight:700; line-height:1.15; margin:0 0 .5em; letter-spacing:-.015em; }
h1{ font-size:clamp(2.05rem, 1.35rem + 2.9vw, 3.5rem); }
h2{ font-size:clamp(1.5rem, 1.12rem + 1.5vw, 2.2rem); margin-top:2.2em; }
h3{ font-size:clamp(1.16rem, 1.03rem + .55vw, 1.4rem); margin-top:1.9em; }
h4{ font-size:1.02rem; margin-top:1.6em; }
p{ margin:0 0 1.15em; }
.lede{ font-size:1.19rem; line-height:1.6; color:var(--ink-2); }
.eyebrow{
  font-family:var(--f-mono); font-size:.71rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--teal); margin:0 0 .8rem;
}
.eyebrow.on-dark{ color:#6FC2CE; }
.prose{ max-width:74ch; }
.prose ul,.prose ol{ margin:0 0 1.15em; padding-left:1.25em; }
.prose li{ margin-bottom:.45em; }
.prose strong{ font-weight:650; }

/* ---------- PLSS section grid motif ---------- */
.grid-motif{
  background-image:
    linear-gradient(to right,  rgba(14,110,124,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,110,124,.07) 1px, transparent 1px),
    linear-gradient(to right,  rgba(20,25,28,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,25,28,.05) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 32px 32px, 32px 32px;
}
.section-lines{ position:relative; }
.section-lines::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='none' stroke='%230E6E7C' stroke-opacity='.09'%3E%3Crect x='.5' y='.5' width='179' height='179' stroke-width='1.4'/%3E%3Cpath d='M60 0v180M120 0v180M0 60h180M0 120h180' stroke-width='.7'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- header ---------- */
.topbar{
  background:var(--ink); color:#B9C8CD;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.04em;
  padding:.5rem 0;
}
.topbar .shell{ display:flex; gap:1rem; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.topbar a{ color:#6FC2CE; }

.masthead{ background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.masthead .shell{ display:flex; align-items:center; gap:1.5rem; min-height:78px; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink); margin-right:auto; }
.brand b{ font-family:var(--f-head); font-size:1.22rem; font-weight:700; letter-spacing:-.02em; display:block; line-height:1.05; text-transform:uppercase; }
.brand span{ font-family:var(--f-mono); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }

.nav{ display:flex; gap:1.5rem; align-items:center; }
.nav a{
  text-decoration:none; color:var(--ink-2); font-size:.94rem; font-weight:600;
  padding:.35rem 0; border-bottom:2px solid transparent;
}
.nav a:hover{ border-bottom-color:var(--teal); color:var(--ink); }
.navtoggle{ display:none; }

@media (max-width:980px){
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0; padding:.5rem 1.25rem 1rem;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:.75rem 0; border-bottom:1px solid var(--line); }
  .navtoggle{
    display:inline-flex; align-items:center; gap:.5rem; background:none;
    border:1px solid var(--line); border-radius:var(--r); padding:.55rem .8rem;
    font:inherit; font-size:.9rem; cursor:pointer; color:var(--ink);
  }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--teal); color:#fff; text-decoration:none; font-weight:700;
  padding:.85rem 1.4rem; border-radius:var(--r); border:1px solid var(--teal);
  font-size:.96rem; line-height:1; transition:background .15s;
  font-family:var(--f-head); letter-spacing:.01em;
}
.btn:hover{ background:var(--teal-dk); color:#fff; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ background:var(--sand-2); color:var(--ink); }
.btn-lg{ padding:1.05rem 1.8rem; font-size:1.02rem; }

/* ---------- page head ---------- */
.phead{ background:var(--ink); color:#E6EDEF; padding:4rem 0 3.4rem; position:relative; overflow:hidden; }
.phead::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.05'%3E%3Crect x='.5' y='.5' width='199' height='199' stroke-width='1.4'/%3E%3Cpath d='M66 0v200M133 0v200M0 66h200M0 133h200' stroke-width='.7'/%3E%3C/g%3E%3C/svg%3E");
}
.phead .shell{ position:relative; z-index:1; }
.phead h1{ margin-bottom:.35em; }
.phead p{ color:#AFC1C6; max-width:66ch; font-size:1.09rem; margin:0; }

/* ---------- sections ---------- */
.section{ padding:3.6rem 0; }
.section.tight{ padding:2.4rem 0; }
.section.paper{ background:var(--paper); }
.section.dark{ background:var(--ink); color:#E6EDEF; }
.section.dark h2,.section.dark h3{ color:#fff; }
.section.dark p{ color:#AFC1C6; }
.section.sand2{ background:var(--sand-2); }

/* ---------- callouts ---------- */
.karst{
  background:var(--clay-bg); border-left:3px solid var(--clay);
  padding:1.1rem 1.3rem; border-radius:0 var(--r) var(--r) 0; margin:1.6rem 0;
}
.karst strong{ color:var(--clay); }
.karst p:last-child{ margin-bottom:0; }

.note{
  background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--teal);
  padding:1.1rem 1.3rem; border-radius:0 var(--r) var(--r) 0; margin:1.6rem 0;
}
.note p:last-child{ margin-bottom:0; }
.note strong{ color:var(--teal-dk); }

/* ---------- cards / grid ---------- */
.grid{ display:grid; gap:1.4rem; }
.g2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.g3{ grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); }
.g4{ grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:1.5rem 1.5rem 1.6rem; display:flex; flex-direction:column;
}
.card h3{ margin-top:0; font-size:1.12rem; }
.card p{ font-size:.95rem; color:var(--slate); }
.card .more{
  margin-top:auto; padding-top:.9rem; font-weight:700; font-size:.92rem;
  color:var(--teal-dk); text-decoration:none; font-family:var(--f-head);
}
.card .more:hover{ text-decoration:underline; }
a.card{ text-decoration:none; color:inherit; transition:border-color .15s, transform .15s; }
a.card:hover{ border-color:var(--teal); transform:translateY(-2px); }

/* ---------- table ---------- */
.tablewrap{ overflow-x:auto; margin:1.8rem 0; border:1px solid var(--line); border-radius:var(--r); background:var(--paper); }
table{ border-collapse:collapse; width:100%; font-size:.95rem; }
th,td{ padding:.72rem .95rem; text-align:left; border-bottom:1px solid var(--line); }
th{
  background:var(--sand-2); font-family:var(--f-mono); font-size:.7rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); font-weight:600;
}
td.num{ font-family:var(--f-mono); text-align:right; }
tr:last-child td{ border-bottom:0; }
td.warn{ color:var(--clay); font-weight:600; }

/* ---------- CTA ---------- */
.cta{ background:var(--teal-dk); color:#fff; padding:3.2rem 0; }
.cta h2{ color:#fff; margin-top:0; }
.cta p{ color:#C3E1E6; max-width:60ch; }
.cta .btn{ background:#fff; color:var(--teal-dk); border-color:#fff; }
.cta .btn:hover{ background:var(--sand); color:var(--ink); }

/* ---------- footer ---------- */
.disclose{
  background:var(--sand-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-size:.87rem; color:var(--slate); padding:.9rem 0;
}
.foot{ background:var(--ink); color:#93A6AC; padding:3rem 0 2rem; font-size:.92rem; }
.foot h4{ color:#fff; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 1rem; }
.foot a{ color:#93A6AC; text-decoration:none; display:block; padding:.24rem 0; }
.foot a:hover{ color:#fff; }
.foot .cols{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.foot .bottom{
  margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.84rem; color:#74868C;
}

/* ---------- sticky mobile call bar ---------- */
.callbar{ display:none; }
@media (max-width:760px){
  .callbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:80;
    background:var(--teal); border-top:1px solid var(--teal-dk);
  }
  .callbar a{
    flex:1; text-align:center; padding:.95rem .5rem; color:#fff; text-decoration:none;
    font-weight:700; font-size:.96rem;
  }
  .callbar a+a{ border-left:1px solid rgba(255,255,255,.25); }
  body{ padding-bottom:56px; }
}

/* ---------- misc ---------- */
.stat{ font-family:var(--f-mono); font-size:2.3rem; font-weight:600; color:var(--teal); line-height:1; }
.stat + p{ font-size:.93rem; color:var(--slate); margin-top:.5rem; }
.src{ font-size:.82rem; color:var(--mute); font-style:italic; }
.crumbs{ font-size:.84rem; color:var(--mute); padding:1rem 0 0; }