:root {
  --color-1: #1A1A1A;
  --color-2: #E8E4DC;
  --color-3: #C8553D;
  --color-4: #6B7B8C;
  --color-5: #FFFFFF;
  --font-display: 'Hahmlet', system-ui, -apple-system, "Malgun Gothic", sans-serif;
  --font-body: 'Gothic A1', system-ui, -apple-system, "Malgun Gothic", sans-serif;
}

body {
  font-family: var(--font-body);
  background: var(--color-5);
  color: var(--color-1);
}

h1, h2, h3, .logo {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-1);
}

header.site-header {
  background: var(--color-5);
  border-bottom: 4px solid var(--color-1);
}
header.site-header nav a { text-decoration: none; color: var(--color-1); }
.nav-toggle {
  border: 2px solid var(--color-1);
  background: var(--color-5);
  color: var(--color-1);
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}

section.hero {
  background: var(--color-2);
  border-bottom: 6px solid var(--color-3);
}
section.hero h1 { font-size: 2.1rem; margin: 0 0 0.75rem; }
section.hero p { max-width: 42em; }

.tel-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.85rem 1.75rem;
  background: var(--color-3);
  color: var(--color-5);
  text-decoration: none;
  font-weight: 700;
}

/* magazine layout: 3-column + thick horizontal dividers */
section.magazine {
  border-top: 6px solid var(--color-1);
  padding-top: 1.5rem;
  margin-top: 2rem;
}
.col-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 2rem;
}
.col-3 .col {
  border-left: 1px solid var(--color-4);
  padding-left: 1.5rem;
}
.col-3 .col:first-child { border-left: none; padding-left: 0; }

@media (max-width: 780px) {
  .col-3 { grid-template-columns: 1fr; }
  .col-3 .col { border-left: none; padding-left: 0; border-top: 1px solid var(--color-4); padding-top: 1rem; }
  .col-3 .col:first-child { border-top: none; padding-top: 0; }
}

/* signature: signal comparison table */
section.signal-table {
  border-top: 6px solid var(--color-1);
  border-bottom: 6px solid var(--color-1);
  padding-block: 1.5rem;
  margin-block: 2rem;
}
.signal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.signal-col {
  padding: 1.25rem;
  border-radius: 2px;
}
.signal-col.good { background: #eef1e6; border-left: 6px solid #5c7a4a; }
.signal-col.bad { background: #f7e9e4; border-left: 6px solid var(--color-3); }
.signal-col ul { margin: 0; padding-left: 1.1em; }
.signal-col li { margin-bottom: 0.5rem; }

@media (max-width: 640px) {
  .signal-grid { grid-template-columns: 1fr; }
}

section.reviews, section.related {
  border-top: 6px solid var(--color-1);
}
blockquote.review {
  border-left: 3px solid var(--color-4);
  background: var(--color-2);
}
.related-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}
.related-list a { color: var(--color-3); font-weight: 700; text-decoration: none; }

section.cta {
  background: var(--color-1);
  color: var(--color-5);
}
section.cta .cta-heading { color: var(--color-5); }

footer.site-footer {
  background: var(--color-2);
  color: var(--color-1);
  border-top: 4px solid var(--color-1);
}

@keyframes revealDivider {
  from { border-top-color: transparent; }
  to { border-top-color: var(--color-1); }
}
section.magazine { animation: revealDivider 0.6s ease-out; }

.hero-figure { max-width: 240px; margin: 1.5rem 0 0; }
.hero-figure figcaption { color: inherit; opacity: 0.85; }