.hero {
  background: #f4f1e9;
  overflow: hidden;
}
.hero-grid {
  min-height: 590px;
  display: grid;
  grid-template-columns: 1.07fr 0.93fr;
  align-items: center;
  gap: 46px;
}
.hero-copy {
  padding: 42px 0 50px;
}
.hero-folio {
  display: block;
  width: max-content;
  border-top: 1px solid #a7b2a3;
  padding-top: 9px;
  margin-bottom: 27px;
  color: #788675;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.hero h1,
.section-head h2,
.how-section h2,
.detail-copy h1,
.library-page h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.055em;
}
.hero h1 {
  font-size: clamp(52px, 5.7vw, 86px);
  line-height: 1.03;
  margin: 26px 0 23px;
}
.hero h1 em,
.how-section h2 em {
  font-weight: 400;
  color: #667b6e;
}
.hero-copy > p {
  font-size: 17px;
  line-height: 1.7;
  color: #626d64;
  max-width: 550px;
  margin: 0 0 30px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}
.hero-actions > span {
  font-size: 13px;
  color: #81867c;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  border-radius: 3px;
  border: 1px solid transparent;
  padding: 16px 23px;
  font-size: 14px;
  font-weight: 750;
  min-height: 51px;
  transition:
    transform 0.2s,
    background 0.2s;
}
.button:hover {
  transform: translateY(-2px);
}
.button--dark {
  background: var(--forest);
  color: #fff;
}
.button--dark:hover {
  background: #0e352a;
}
.button--outline {
  border-color: #aeb8ae;
  background: transparent;
  color: var(--forest);
}
.button--outline:hover {
  background: #e9eee6;
}
.hero-art {
  height: 480px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-art__paper {
  position: absolute;
  width: 440px;
  height: 400px;
  top: 25px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  border: 1px solid #d9ddcf;
  background: #ecebe2;
  box-shadow: 18px 20px 0 #dfe4d8;
}
.hero-art__paper:before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid #d4dace;
}
.hero-art__halo {
  position: absolute;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background: #dce5d9;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
}
.hero-book {
  position: absolute;
  width: 214px;
  height: 322px;
  box-shadow: 10px 20px 30px #273b2d30;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  overflow: hidden;
  font-family: Georgia, serif;
  font-size: 28px;
  line-height: 1.1;
}
.hero-book--back {
  background: #b66e52;
  color: #f7e8d3;
  transform: translate(85px, -22px) rotate(16deg);
  z-index: 1;
}
.hero-book--back:before {
  content: "";
  position: absolute;
  border: 2px solid #e4b59b;
  width: 195px;
  height: 250px;
  left: 50px;
  top: -90px;
  border-radius: 50%;
}
.hero-book--front {
  background: #436f72;
  color: #f5f1df;
  transform: translate(-48px, 23px) rotate(-10deg);
  z-index: 2;
}
.hero-book--front:before,
.hero-book--front:after {
  content: "";
  position: absolute;
  border: 2px solid #b6d0c1;
  width: 250px;
  height: 145px;
  left: -56px;
  top: 48px;
  border-radius: 50%;
  transform: rotate(-25deg);
}
.hero-book--front:after {
  top: 90px;
  left: -73px;
}
.hero-book span {
  position: relative;
  z-index: 2;
}
.hero-book i {
  position: absolute;
  width: 45px;
  height: 200px;
  top: 0;
  right: 23px;
  background: #d6a06d;
  transform: rotate(25deg);
  opacity: 0.85;
}
.hero-art__note {
  position: absolute;
  right: 0;
  bottom: 28px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #66796f;
  line-height: 1.7;
  text-align: right;
  z-index: 3;
}
.trust-strip {
  background: #e7ece4;
  border-block: 1px solid #d9e1d6;
}
.trust-inner {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  min-height: 68px;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #42604e;
}