:root {
  --bg:#f7f7f4;
  --ink:#3c322d;
  --accent:#a65940;
}
body {
  background:var(--bg);
  color:var(--ink);
}
* {
  box-sizing:border-box;
}
html,body {
  margin:0;
}
html {
  color-scheme:light;
}
body {
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.page {
  height:100svh;
  min-height:620px;
  padding:0 5.5vw 32px;
  display:grid;
  grid-template-rows:80px minmax(0,1fr);
  position:relative;
  isolation:isolate;
}
.brand {
  display:flex;
  align-items:center;
  font-size:20px;
  letter-spacing:.02em;
}
.hero {
  display:grid;
  align-items:center;
  min-height:0;
  max-width:1400px;
  width:100%;
  margin:0 auto;
}
.copy {
  min-width:0;
  position:relative;
}
.copy h1 {
  font-size:clamp(40px,4.55vw,68px);
  line-height:1.17;
  letter-spacing:-.04em;
  margin:0;
  font-weight:600;
  overflow-wrap:anywhere;
}
.copy p {
  font-size:18px;
  line-height:1.85;
  margin:28px 0 0;
  max-width:36em;
  color:inherit;
  opacity:.87;
}
.art {
  margin:0;
  min-width:0;
  min-height:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.art img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  max-height:620px;
}
::selection {
  background:var(--accent);
  color:var(--bg);
}