/* Theme and document defaults. */
:root {
  --bg: #132837;
  --ink: #e3edf2;
  --accent: #8db1c6;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { color-scheme: light; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--bg); }

/* Page frame and brand. */
.page {
  height: 100svh;
  min-height: 620px;
  padding: 0 5.5vw 32px;
  display: grid;
  grid-template-rows: 80px minmax(0, 1fr);
  position: relative;
  isolation: isolate;
  background: #132837;
  color: #e3edf2;
}
.brand {
  display: flex;
  align-items: center;
  letter-spacing: .02em;
  text-align: center;
  font-family: Menlo, "PingFang SC", monospace;
  font-size: 17px;
  width: 100%;
}

/* Hero copy. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  gap: 24px;
}
.copy {
  min-width: 0;
  position: relative;
  max-width: 1000px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  align-items: center;
  text-align: left;
}
.copy h1 {
  font-size: clamp(38px, 4.1vw, 60px);
  line-height: 1.17;
  letter-spacing: -.04em;
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.copy p {
  font-size: 18px;
  line-height: 1.85;
  margin: 28px 0 0;
  max-width: 36em;
  color: inherit;
  opacity: .87;
}

/* Original illustration. */
.art {
  margin: auto 0 0;
  min-width: 0;
  min-height: 0;
  width: 70%;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 620px;
}

/* Viewport adjustments retain the template's original breakpoints. */
@media (max-height: 780px) and (min-width: 768px) {
  .copy p { margin-top: 23px; }
  .page { grid-template-rows: 72px minmax(0, 1fr); padding-bottom: 24px; }
  .art { max-height: 510px; }
}
@media (max-width: 767px) {
  .page {
    min-height: 700px;
    padding: 0 26px 24px;
    grid-template-rows: 65px minmax(0, 1fr);
  }
  .hero { align-items: stretch; justify-content: center; }
  .copy { order: 1; max-width: none; display: block; text-align: center; }
  .copy h1 { font-size: 38px; line-height: 1.18; }
  .copy p { font-size: 15px; margin-top: 20px; max-width: 100%; opacity: .9; }
  .art {
    order: 2;
    height: 255px;
    width: 100%;
    flex: none;
    max-height: none;
    align-self: center;
    margin-top: 0;
  }
  .art img { max-height: 100%; }
}
@media (max-width: 360px) {
  .page { padding-left: 22px; padding-right: 22px; }
  .copy h1 { font-size: 34px; }
  .copy p { font-size: 14px; }
  .art { height: 235px; }
}
@media (max-width: 767px) and (max-height: 740px) {
  .hero { gap: 16px; }
  .copy h1 { font-size: 34px; }
  .copy p { font-size: 14px; margin-top: 16px; }
  .art { height: 210px; }
  .page { min-height: 660px; grid-template-rows: 58px minmax(0, 1fr); }
}
@media (min-width: 768px) {
  .copy { max-width: 1100px; grid-template-columns: 1.14fr 1fr; gap: 5vw; }
}