* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  background: var(--background);
  color: var(--foreground);
  font: 1rem/1.6 system-ui, sans-serif;
}
.vhatele { --background: #f4eee4; --foreground: #2d2824; --accent: #7d4538; --line: #b79483; }
.visiosonics { --background: #14191d; --foreground: #f5eee2; --accent: #e9bb81; --line: #786752; }
main {
  width: min(100%, 56rem);
  padding-block: clamp(2.5rem, 9vw, 6rem);
  border-block: 1px solid var(--line);
}
.status {
  margin: 0 0 1rem;
  color: var(--accent);
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .8rem;
}
h1 {
  margin: 0;
  font: 400 clamp(2.3rem, 9vw, 6.4rem)/1.05 Georgia, serif;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
.description { margin: 1.35rem 0 0; max-width: 35ch; font-size: clamp(1rem, 2.5vw, 1.25rem); }