/* Kappa Chi — shared design system.
   Home-page rules extracted from index.html 2026-07-30; nav/page/form rules added below. */
:root{
  --navy:#07074b;
  --navy-deep:#04042e;
  --gold:#d7b806;
  --gold-soft:#e8cf6a;
  --cream:#f3ead0;
  --laurel:#3f8a63;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--navy);
  color:var(--cream);
  font-family:'EB Garamond',Georgia,'Times New Roman',serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:6vh 1.5rem 5vh;
  background:
    linear-gradient(180deg, rgba(7,7,75,.50) 0%, rgba(7,7,75,.26) 40%, rgba(4,4,46,.55) 80%, rgba(4,4,46,.88) 100%),
    url('mansion.jpg') center 38% / cover no-repeat fixed;
}
.crest{
  width:clamp(120px,17vw,190px);
  height:auto;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.55));
  margin-bottom:1.6rem;
}
.kx{
  font-family:'Cinzel',Georgia,serif;
  font-weight:700;
  color:var(--gold);
  font-size:clamp(4.2rem,15vw,9rem);
  line-height:.9;
  letter-spacing:.06em;
  text-shadow:0 3px 18px rgba(0,0,0,.45);
}
.name{
  font-family:'Cinzel',Georgia,serif;
  font-weight:500;
  color:var(--gold-soft);
  font-size:clamp(1rem,3.4vw,1.7rem);
  letter-spacing:.42em;
  margin:.85rem 0 0 .42em; /* offset for trailing letter-spacing */
  text-transform:uppercase;
}
.rule{
  width:min(280px,60vw);
  height:1px;
  margin:1.9rem auto 1.5rem;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.8;
}
.name{text-shadow:0 2px 14px rgba(4,4,30,.85)}
.motto{
  font-style:italic;
  font-size:clamp(1.1rem,3vw,1.5rem);
  color:var(--cream);
  letter-spacing:.02em;
  text-shadow:0 2px 12px rgba(4,4,30,.9);
}
.motto small{
  display:block;
  font-style:normal;
  font-size:.62em;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-soft);
  opacity:.85;
  margin-top:.55rem;
}
.lede{
  max-width:38rem;
  margin:2.2rem auto 0;
  font-size:clamp(1.05rem,2.4vw,1.3rem);
  line-height:1.6;
  color:var(--cream);
  text-shadow:0 2px 12px rgba(4,4,30,.92);
}
.soon{
  margin-top:1.4rem;
  font-size:.95rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-soft);
  opacity:.9;
}
.cta{
  display:inline-block;
  margin-top:2.4rem;
  padding:.85rem 2.1rem;
  border:1.5px solid var(--gold);
  border-radius:2px;
  color:var(--gold);
  text-decoration:none;
  font-family:'Cinzel',Georgia,serif;
  font-size:.95rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:background .25s ease,color .25s ease;
}
.cta:hover,.cta:focus{background:var(--gold);color:var(--navy-deep)}
footer{
  margin-top:auto;
  padding-top:3.5rem;
  font-size:.8rem;
  letter-spacing:.1em;
  color:var(--cream);
  opacity:.62;
}
footer .reg{display:block;margin-top:.4rem;font-size:.72rem;opacity:.8}
@media (max-width:600px){
  .hero{background-attachment:scroll}
  .name{letter-spacing:.3em;margin-left:.3em}
}
/* ---------- nav ---------- */
.nav{
  position:absolute;
  top:0;left:0;right:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem clamp(1rem,4vw,2.5rem);
}
.nav--solid{
  position:static;
  background:var(--navy-deep);
  border-bottom:1px solid rgba(215,184,6,.28);
}
.nav-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  color:var(--gold);
  text-decoration:none;
  font-family:'Cinzel',Georgia,serif;
  font-size:.82rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.nav-brand img{width:34px;height:auto;display:block}
.nav-links{
  display:flex;
  align-items:center;
  gap:clamp(1rem,4vw,2.2rem);
  list-style:none;
}
.nav-links a{
  display:inline-block;
  color:var(--cream);
  text-decoration:none;
  font-family:'Cinzel',Georgia,serif;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:.55rem 0;
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.nav-links a:hover,.nav-links a:focus{color:var(--gold);border-bottom-color:var(--gold)}
.nav a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:420px){
  .nav-brand span{display:none}
  .nav-links{gap:1.1rem}
}

/* ---------- interior pages ---------- */
.banner{
  position:relative;
  padding:clamp(3.5rem,10vw,6rem) 1.5rem clamp(2.5rem,7vw,4rem);
  text-align:center;
  background:
    linear-gradient(180deg, rgba(4,4,46,.62) 0%, rgba(4,4,46,.86) 100%),
    url('/assets/mansion.jpg') center 42% / cover no-repeat;
}
.banner h1{
  font-family:'Cinzel',Georgia,serif;
  font-weight:700;
  color:var(--gold);
  font-size:clamp(2.1rem,6vw,3.4rem);
  letter-spacing:.04em;
  line-height:1.05;
  text-shadow:0 3px 18px rgba(0,0,0,.5);
}
.banner .kicker{
  display:block;
  font-family:'Cinzel',Georgia,serif;
  font-size:clamp(.72rem,2vw,.85rem);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-soft);
  opacity:.9;
  margin-bottom:1.1rem;
}
.wrap{max-width:44rem;margin:0 auto;padding:0 1.5rem}
.section{padding:clamp(2.5rem,7vw,4rem) 0}
.section + .section{border-top:1px solid rgba(215,184,6,.18)}
.section h2{
  font-family:'Cinzel',Georgia,serif;
  font-weight:500;
  color:var(--gold-soft);
  font-size:clamp(1.15rem,3vw,1.5rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:1.4rem;
}
.prose p{
  font-size:clamp(1.02rem,2.2vw,1.18rem);
  line-height:1.7;
  margin-bottom:1.1rem;
}
.prose p:last-child{margin-bottom:0}
.reasons{list-style:none;display:grid;gap:1.3rem}
.reasons h3{
  font-family:'Cinzel',Georgia,serif;
  font-weight:500;
  color:var(--gold);
  font-size:1.02rem;
  letter-spacing:.08em;
  margin-bottom:.35rem;
}
.reasons p{line-height:1.65;opacity:.92}
.cta-block{text-align:center;padding-bottom:clamp(3rem,8vw,5rem)}
.cta-block .cta{margin-top:0}
.cta-alt{
  margin-top:1.4rem;
  font-size:.98rem;
  opacity:.88;
}
.cta-alt a{color:var(--gold-soft)}
.page-footer{
  border-top:1px solid rgba(215,184,6,.18);
  padding:2.2rem 1.5rem;
  text-align:center;
  font-size:.8rem;
  letter-spacing:.1em;
  opacity:.62;
}

/* ---------- forms ---------- */
.field{display:block;margin-bottom:1.4rem}
.field label{
  display:block;
  font-family:'Cinzel',Georgia,serif;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:.5rem;
}
.field .opt{
  font-family:'EB Garamond',Georgia,serif;
  letter-spacing:0;
  text-transform:none;
  opacity:.6;
  font-size:.9rem;
}
.field input{
  width:100%;
  padding:.75rem .9rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(215,184,6,.32);
  border-radius:2px;
  color:var(--cream);
  font-family:'EB Garamond',Georgia,serif;
  font-size:1.05rem;
}
.field input:focus{
  outline:none;
  border-color:var(--gold);
  background:rgba(255,255,255,.08);
}
.field input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.form-note{
  font-size:.95rem;
  line-height:1.6;
  opacity:.85;
  margin-bottom:2rem;
}
.form-note a{color:var(--gold-soft)}
button.cta{background:none;cursor:pointer;font-family:'Cinzel',Georgia,serif}
#after-submit{margin-top:1.2rem;font-size:.95rem;color:var(--gold-soft)}
