/* kzb.homes landing — dark and plain on purpose.
 *
 * The brand page stays quiet so each house page can have its own look; the
 * 1927 job-printing style belongs to 752 E Park (css/styles.css), not to
 * KzB Homes. Each house card, though, wears its own house's style (see
 * "House card" below), so the card previews the page it opens.
 *
 * Dark by design in every colour scheme — not a light theme with a dark
 * variant — so there's one palette to keep right.
 */
:root{
  --bg:#121110;      /* warm near-black */
  --ink:#ECE6DA;     /* warm off-white text */
  --soft:#9C948A;    /* secondary text, ≥ 4.5:1 on --bg */
  --line:#34302C;    /* hairlines */
  --accent:#D0765F;  /* the house page's oxblood, lifted to read on dark */
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--bg);color:var(--ink);
  font-family:Jost,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;
}
a{color:inherit}

.wrap{width:100%;max-width:40rem;margin:0 auto;padding:0 16px}

/* ---- brand ---- */
.brand{padding:56px 0 40px}
.brand h1{margin:0;font-weight:500;font-size:.85rem;letter-spacing:.4em;text-transform:uppercase}
.brand p{margin:10px 0 0;color:var(--soft);font-size:1rem}

/* ---- houses ---- */
main{flex:1}
.houses{list-style:none;margin:0;padding:0;display:grid;gap:16px}
/* House card = a shell plus a per-house skin. The shell only handles layout
 * and the link; each skin repeats its own house page's tokens so the card
 * looks like a piece of the page it opens. Next house → add an .hc-<style>
 * skin, don't restyle the shell. */
.house-card{display:block;text-decoration:none;transition:transform .15s}
.house-card:hover,.house-card:focus-visible{transform:translateY(-2px);outline:none}
.hc-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.hc-inner > span{display:block}

/* 752 E Park — the 1927 job-printing look. Tokens mirror css/styles.css
 * (ivory stock, warm-black ink, oxblood); if those change, change these too.
 * Double rule = 3px outer border + 1px inner, same as the page's .frame/.inner. */
.hc-1927{
  --p:#F4EBD3; --i:#231C14; --r:#8A2B1C; --s:#6B5C48;
  background:var(--p);color:var(--i);border:3px solid var(--i);padding:5px;
}
.hc-1927 .hc-inner{border:1px solid var(--i);padding:26px 18px 22px}
.hc-1927 .hc-est{font-size:.72rem;font-weight:500;letter-spacing:.38em;text-transform:uppercase;color:var(--r)}
.hc-1927 .hc-nm{margin-top:8px;font-family:Limelight,Georgia,serif;font-size:2rem;letter-spacing:.05em;line-height:1.1}
.hc-1927 .hc-pl{margin-top:8px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--s);line-height:1.6}
.hc-1927 .hc-dvd{display:flex;align-items:center;gap:12px;align-self:stretch;margin:16px 0}
.hc-1927 .hc-dvd::before,.hc-1927 .hc-dvd::after{content:"";flex:1;height:1px;background:var(--i)}
.hc-1927 .hc-dvd i{width:9px;height:9px;background:var(--r);transform:rotate(45deg);flex:none}
.hc-1927 .hc-go{
  font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--i);padding:12px 22px;transition:background .15s,color .15s;
}
.hc-1927:hover .hc-go,.hc-1927:focus-visible .hc-go{background:var(--i);color:var(--p)}
.hc-1927:focus-visible{box-shadow:0 0 0 3px var(--accent)}

/* ---- map link: quiet, under the cards ---- */
.more{margin:28px 0 0;text-align:center}
.more a{color:var(--soft);font-size:.8rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
.more a::after{content:" →"}
.more a:hover,.more a:focus-visible{color:var(--ink);text-decoration:underline}

/* ---- foot ---- */
.foot{padding:48px 0 32px;color:var(--soft);font-size:.875rem;display:flex;flex-wrap:wrap;gap:8px 24px}
.foot a{text-decoration:none}
.foot a:hover,.foot a:focus-visible{color:var(--ink);text-decoration:underline}

@media (min-width:600px){
  .brand{padding:96px 0 56px}
  .hc-1927 .hc-inner{padding:34px 32px 28px}
  .hc-1927 .hc-nm{font-size:2.4rem}
}