/* Kona Homes & Condos — Investor Guides
   Palette: basalt ink on warm white, Pacific teal primary, ember accent, sand panels */
:root {
  --ink: #1b1d1e;
  --ink-soft: #44494b;
  --paper: #fdfdfb;
  --sand: #efeae0;
  --sand-line: #ddd5c6;
  --pacific: #0b5563;
  --pacific-deep: #083e49;
  --ember: #c8472b;
  --max: 46rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Public Sans", -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }

/* Header */
.site-head { border-bottom: 1px solid var(--sand-line); }
.site-head .wrap { display: flex; justify-content: space-between; align-items: baseline; padding-top: 1.1rem; padding-bottom: 1.1rem; gap: 1rem; flex-wrap: wrap; }
.brand { font-family: "Newsreader", Georgia, serif; font-size: 1.15rem; font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: .01em; }
.brand span { color: var(--pacific); }
.head-contact { font-family: "IBM Plex Mono", monospace; font-size: .8rem; color: var(--ink-soft); }
.head-contact a { color: var(--pacific); text-decoration: none; }

/* Type */
h1 {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 .75rem;
}
h2 {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.25;
  margin: 2.5rem 0 .6rem;
}
h3 { font-size: 1.05rem; margin: 1.8rem 0 .4rem; }
p { margin: 0 0 1rem; }
a { color: var(--pacific); }
a:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

.eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ember);
  margin: 2.6rem 0 .35rem;
}
.dek { font-size: 1.15rem; color: var(--ink-soft); margin-bottom: 1.5rem; }
.byline { font-family: "IBM Plex Mono", monospace; font-size: .78rem; color: var(--ink-soft); margin-bottom: 2.2rem; }
.byline a { color: var(--pacific); }

/* The short answer — GEO answer capsule */
.short-answer {
  background: var(--sand);
  border: 1px solid var(--sand-line);
  border-radius: 4px;
  padding: 1.25rem 1.4rem;
  margin: 0 0 2.2rem;
}
.short-answer .label {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--pacific-deep);
  margin: 0 0 .5rem;
}
.short-answer p { margin: 0; font-size: 1.05rem; }
.short-answer p + p { margin-top: .7rem; }

/* From the field — first-person agent note */
.field-note {
  border-left: 3px solid var(--ember);
  padding: .2rem 0 .2rem 1.1rem;
  margin: 1.6rem 0;
}
.field-note .label {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ember);
  margin: 0 0 .3rem;
}
.field-note p { margin: 0; color: var(--ink-soft); font-style: italic; }

/* Data tables */
table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.8rem; font-size: .95rem; }
th {
  text-align: left;
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--ink);
  padding: .5rem .6rem .5rem 0;
}
td { border-bottom: 1px solid var(--sand-line); padding: .6rem .6rem .6rem 0; vertical-align: top; }
td.num, th.num { font-family: "IBM Plex Mono", monospace; font-size: .85rem; white-space: nowrap; }

/* Lava zone scale — signature element */
.zone-scale { margin: 1.6rem 0 2rem; }
.zone-bar { display: flex; height: 2.1rem; border-radius: 3px; overflow: hidden; }
.zone-bar div {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: "IBM Plex Mono", monospace; font-size: .8rem; font-weight: 600;
  color: #fff;
}
.z1 { background:#7a1408; } .z2 { background:#962a10; } .z3 { background:#b04a1d; }
.z4 { background:#c06a2a; } .z5 { background:#a8803c; } .z6 { background:#8a8a50; }
.z7 { background:#5f8a62; } .z8 { background:#3d7a72; } .z9 { background:#2a6675; }
.zone-markers { position: relative; height: 3.4rem; font-family: "IBM Plex Mono", monospace; font-size: .7rem; }
.zone-markers span { position: absolute; top: .35rem; transform: translateX(-50%); text-align: center; color: var(--ink-soft); line-height: 1.25; }
.zone-markers span::before { content: "▲"; display: block; font-size: .6rem; color: var(--ink); }
.zone-legend { display: flex; justify-content: space-between; font-family: "IBM Plex Mono", monospace; font-size: .7rem; color: var(--ink-soft); margin-top: .3rem; }

/* Cards on index */
.guide-list { list-style: none; padding: 0; margin: 2rem 0; }
.guide-list li { border-top: 1px solid var(--sand-line); padding: 1.3rem 0; }
.guide-list li:last-child { border-bottom: 1px solid var(--sand-line); }
.guide-list a.title { font-family: "Newsreader", Georgia, serif; font-size: 1.3rem; font-weight: 600; text-decoration: none; }
.guide-list p { margin: .4rem 0 0; color: var(--ink-soft); font-size: .98rem; }

/* CTA */
.cta {
  background: var(--pacific-deep);
  color: #f2f7f7;
  border-radius: 4px;
  padding: 1.6rem 1.6rem;
  margin: 3rem 0 1rem;
}
.cta h2 { color: #fff; margin-top: 0; }
.cta p { color: #d8e6e6; }
.cta a.btn {
  display: inline-block;
  background: var(--ember);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: .65rem 1.2rem;
  border-radius: 3px;
}
.cta a.btn:hover { background: #a93a22; }

/* FAQ */
.faq h3 { font-family: "Newsreader", Georgia, serif; font-size: 1.15rem; font-weight: 600; }

/* Footer */
.site-foot { border-top: 1px solid var(--sand-line); margin-top: 4rem; padding: 2rem 0 3rem; font-size: .85rem; color: var(--ink-soft); }
.site-foot .wrap { display: grid; gap: .4rem; }
.site-foot a { color: var(--pacific); }
.disclaimer { font-size: .78rem; margin-top: 1rem; }

ul, ol { padding-left: 1.3rem; }
li { margin-bottom: .45rem; }
hr { border: 0; border-top: 1px solid var(--sand-line); margin: 2.5rem 0; }

@media (max-width: 560px) {
  .zone-markers span { font-size: .62rem; }
  table { font-size: .85rem; }
}