:root {
  --espresso:#211812;
  --espresso2:#2b2019;
  --ivory:#f6f0e8;
  --cream:#e7ddd1;
  --copper:#b76b3d;
  --copper2:#c9875e;
  --muted:#a99b8f;
  --line:rgba(246,240,232,.15);
  --max:1180px;
}

* { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  margin:0;
  background:var(--espresso);
  color:var(--ivory);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Inter,
    Arial,
    sans-serif;
  line-height:1.65;
  text-rendering:optimizeLegibility;
}

a { color:inherit; }

.shell {
  width:min(calc(100% - 40px),var(--max));
  margin-inline:auto;
}

.topbar {
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border-bottom:1px solid var(--line);
}

.brand {
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.19em;
  font-size:12px;
}

.brand strong { font-weight:700; }

.nav {
  display:flex;
  align-items:center;
  gap:24px;
  font-size:12px;
}

.nav a {
  text-decoration:none;
  color:var(--cream);
}

.hero {
  padding:110px 0 92px;
  border-bottom:1px solid var(--line);
}

.eyebrow {
  color:var(--copper2);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.23em;
  margin-bottom:24px;
}

h1,h2,h3 {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.035em;
}

h1 {
  margin:0;
  max-width:1000px;
  font-size:clamp(58px,9vw,124px);
  line-height:.92;
}

.hero-copy {
  max-width:650px;
  margin:44px 0 0 auto;
  color:var(--cream);
  font-size:18px;
}

.actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 24px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ivory);
  text-decoration:none;
  font:inherit;
  font-size:13px;
  cursor:pointer;
}

.btn.primary {
  background:var(--copper);
  border-color:var(--copper);
}

.section {
  padding:92px 0;
  border-bottom:1px solid var(--line);
}

.section-head {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:60px;
  margin-bottom:58px;
}

.section h2 {
  margin:0;
  font-size:clamp(42px,6vw,76px);
  line-height:1;
}

.section-lead {
  max-width:680px;
  color:var(--cream);
  margin:0;
}

.grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line);
}

.card {
  min-height:255px;
  padding:34px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-decoration:none;
}

.card:nth-child(even) { border-right:0; }

.card small {
  color:var(--copper2);
  text-transform:uppercase;
  letter-spacing:.16em;
}

.card h3 {
  margin:42px 0 12px;
  font-size:34px;
}

.card p {
  color:var(--muted);
  max-width:470px;
}

.article {
  max-width:820px;
  padding:84px 0 110px;
}

.article h1 {
  font-size:clamp(52px,8vw,88px);
  line-height:.98;
  margin-bottom:42px;
}

.article h2 {
  font-size:38px;
  margin-top:60px;
}

.article p,
.article li {
  color:var(--cream);
}

.notice {
  margin:36px 0;
  padding:24px;
  border:1px solid var(--line);
}

.builder {
  margin-top:45px;
  border-top:1px solid var(--line);
}

.question {
  padding:30px 0;
  border-bottom:1px solid var(--line);
}

.question label {
  display:block;
  font-family:Georgia,serif;
  font-size:26px;
  margin-bottom:15px;
}

select {
  width:100%;
  max-width:560px;
  min-height:50px;
  padding:0 14px;
  color:var(--ivory);
  background:var(--espresso2);
  border:1px solid var(--line);
  font:inherit;
}

#result {
  display:none;
  margin-top:34px;
  padding:30px;
  border:1px solid var(--copper2);
}

#result.visible { display:block; }

.footer {
  padding:56px 0 68px;
  color:var(--muted);
}

.footer-grid {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:30px;
}

.footer a {
  color:var(--cream);
  text-decoration:none;
  margin-right:18px;
}

@media(max-width:760px) {
  .topbar { min-height:72px; }

  .nav {
    gap:13px;
    font-size:10px;
  }

  .hero { padding-top:76px; }

  .hero-copy { margin-left:0; }

  .section-head {
    grid-template-columns:1fr;
    gap:24px;
  }

  .grid { grid-template-columns:1fr; }

  .card { border-right:0; }
}