:root { color-scheme: light; }
* { box-sizing: border-box; }
html { min-width: 320px; background: #f5f3f2; }
body { margin: 0; color: #171b25; font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; }
.page {
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #f5f3f2 url("/construction.webp") center center / cover no-repeat;
}
.header { padding: clamp(30px, 3.3vw, 58px) clamp(24px, 4.35vw, 74px); }
.wordmark { font-family: "IBM Plex Mono", "Courier New", monospace; font-size: clamp(25px, 2vw, 34px); font-weight: 700; letter-spacing: -.075em; line-height: 1; }
.wordmark span { color: #4058b4; }
.content { position: relative; top: -9vh; min-height: calc(100svh - 118px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: 780px; padding: 0 clamp(24px, 4.35vw, 74px) 11vh; }
h1 { max-width: 750px; margin: 0; font-size: clamp(52px, 4.6vw, 80px); font-weight: 500; letter-spacing: -.04em; line-height: 1.12; }
p { margin: 30px 0 0; color: #70747e; font-size: clamp(21px, 1.75vw, 30px); font-weight: 400; letter-spacing: -.025em; line-height: 1.35; }
@media (max-width: 800px) {
  .page { background-image: linear-gradient(to bottom, #f5f3f2, transparent 27%), url("/construction.webp"); background-size: 100% 62vh, auto 62vh; background-position: center bottom, 62% bottom; }
  .header { padding: 30px 26px; }
  .content { top: 0; min-height: 0; max-width: 680px; padding: clamp(75px, 12vh, 130px) 26px 0; }
  h1 { font-size: clamp(43px, 8vw, 64px); }
  p { margin-top: 22px; font-size: clamp(19px, 3.2vw, 23px); }
}
@media (max-width: 480px) {
  .page { background-size: 100% 56vh, auto 56vh; background-position: center bottom, 58% bottom; }
  .content { padding-top: clamp(75px, 10vh, 105px); }
  h1 { font-size: clamp(40px, 10.5vw, 50px); line-height: 1.15; }
  p { max-width: 250px; font-size: 19px; }
}
