:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e4d8;
  background: #899985;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
}

main {
  flex: 1;
  padding: 60px 24px 50px;
}

.logo {
  position: relative;
  width: min(420px, 85vw);
  aspect-ratio: 2.65;
  margin: 0 auto 38px;
  overflow: hidden;
}

.logo img {
  position: absolute;
  width: 166.7%;
  max-width: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.eyebrow {
  margin: 0;
  font-size: clamp(16px, 1.9vw, 29px);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.divider {
  width: 88px;
  height: 3px;
  margin: 44px auto 30px;
  background: currentColor;
}

h1 {
  margin: 0 0 16px;
  font-size: clamp(48px, 6.7vw, 106px);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.intro, .notice, .contact {
  font-size: clamp(19px, 2.1vw, 32px);
  line-height: 1.25;
}

.intro { margin: 0; }
.notice { margin: 44px 0 26px; }
.contact { margin: 0; }
a { color: inherit; }
.contact a { text-underline-offset: 5px; }

footer {
  margin: 0 5.8%;
  padding: 27px 0 55px;
  border-top: 3px solid currentColor;
  font-size: clamp(17px, 1.8vw, 27px);
}
footer a { text-decoration: none; }
footer a:hover, footer a:focus-visible { text-decoration: underline; }

@media (max-width: 600px) {
  main { padding-top: 40px; }
  .logo { margin-bottom: 28px; }
  .divider { margin: 30px auto 25px; }
  .desktop-break { display: none; }
  .notice { margin-top: 36px; }
  footer { padding-bottom: 30px; }
}

@media (min-width: 1024px) {
  .eyebrow { font-size: calc(clamp(16px, 1.9vw, 29px) * 2 / 3); }
  h1 { font-size: calc(clamp(48px, 6.7vw, 106px) * 2 / 3); }
  .intro, .notice, .contact { font-size: calc(clamp(19px, 2.1vw, 32px) * 2 / 3); }
  footer { font-size: calc(clamp(17px, 1.8vw, 27px) * 2 / 3); }
}