/* Approved visual baseline: foto/design-expected.png, upper composition only.
   The existing journey section and continuous paper morph remain unchanged. */
.home-page {
  --hero-burgundy: #521e2c;
  --hero-gold: #9c7d4a;
  --hero-ivory: #f3ebdc;
  --reference-paper: url("/img/stationery/redesign-background.webp");
}
.home-page .site-header {
  height: 94px;
  padding-inline: 8.8% 7.4%;
  background: transparent;
  border: 0;
}
.home-page .wordmark {
  font-size: 31px;
  gap: 20px;
  color: #241e19;
}
.home-page .brand-mark {
  font-size: 44px;
  padding-right: 24px;
  color: var(--hero-burgundy);
  border-color: #9c8770;
}
.home-page .desktop-nav {
  margin-right: 10px;
  gap: 34px;
  font-size: 14px;
  color: #241e19;
}
.home-page .header-cta {
  padding: 6px 26px;
  gap: 20px;
  border-color: #87535a;
  outline: 1px solid #a6827a55;
  outline-offset: -4px;
  color: var(--hero-burgundy);
  font-size: 14px;
}
.home-page .header-cta span {
  width: 23px;
  height: 23px;
}
.hero-stage,
.motion-ready .hero-stage {
  background: #eee4d3 var(--reference-paper) center top / 100% auto no-repeat;
  padding-top: clamp(112px, 8.15vw, 130px);
}
.hero-heading {
  max-width: 84%;
}
.hero-heading > .eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  margin: 0;
}
.heading-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 8px;
  margin: 21px auto 20px;
}
.heading-ornament::before,
.heading-ornament::after {
  content: "";
  width: 112px;
  height: 1px;
  background: #9c886a;
}
.heading-ornament i {
  width: 6px;
  height: 6px;
  background: #9c7d4a;
  transform: rotate(45deg);
}
.hero-heading h1 {
  font-size: clamp(64px, 7.05vw, 110px);
  line-height: 1;
  letter-spacing: -0.045em;
  color: #231f1a;
}
.hero-heading h1 em {
  color: var(--hero-burgundy);
}
.hero-heading p {
  margin-top: 17px;
  font-size: clamp(17px, 1.5vw, 23px);
  color: #474036;
}
.envelope-scene,
.motion-ready .envelope-scene {
  width: 42.8vw;
  max-width: 650px;
  aspect-ratio: 1.56;
  top: clamp(430px, 38vw, 580px);
  left: calc(50% + 26px);
  margin-left: max(-21.4vw, -325px);
  translate: none;
  transform: none;
  --paper-y: -185px;
}
.envelope-back {
  background-color: #39201f;
  background-blend-mode: multiply;
}
.fold-left {
  background-image:
    linear-gradient(125deg, #622f2612, #351b1999), var(--burgundy-material);
}
.fold-right {
  background-image:
    linear-gradient(235deg, #a5694735, #351b1970), var(--burgundy-material);
}
.fold-bottom:after {
  background-image:
    linear-gradient(160deg, #a66a4318, #351b1975), var(--burgundy-material);
}
.flap-inner {
  background-image:
    linear-gradient(#30141140, #351b1975), var(--burgundy-material);
}
.envelope-flap {
  border-radius: 12px;
}
.envelope-print,
.hero-edition,
.hero-tomorrow,
.stationery-number,
.stationery-thread {
  display: none;
}
.envelope-shadow {
  background: #3d291d50;
  filter: blur(24px);
}
.invitation-paper {
  width: 78%;
  left: 11%;
  height: 113%;
  rotate: -4.5deg;
  background:
    linear-gradient(#f7efe536, #f7efe536),
    var(--ivory-material) center/480px;
}
.motion-ready .letter-content.is-unfolding {
  background:
    linear-gradient(#f7efe536, #f7efe536),
    var(--ivory-material) center/480px;
}
.paper-border {
  border-color: #b0945f;
  outline-color: #c9b38a;
}
.motion-ready .letter-content.is-unfolding::before {
  border-color: #b0945f;
  outline-color: #c9b38a;
}
.paper-border,
.motion-ready .paper-cover {
  padding-top: 24px;
  justify-content: flex-start;
}
.paper-logo {
  color: #967038;
  font-size: 41px;
  line-height: 1;
  margin: 0;
}
.paper-logo::after {
  content: "";
  display: block;
  width: 25px;
  height: 1px;
  background: #a18453;
  margin: 11px auto 16px;
}
.paper-eyebrow {
  font-size: 9px;
  color: #4b4237;
  letter-spacing: 0.25em;
}
.paper-title,
.motion-ready .paper-cover .paper-title {
  font-size: clamp(64px, 6.15vw, 94px);
  margin-top: 28px;
  line-height: 0.91;
  color: #241e19;
}
.paper-title em {
  color: var(--hero-burgundy);
}
.paper-bottom {
  display: none;
}
.paper-botanical {
  position: absolute;
  width: 31%;
  height: auto;
  right: 1%;
  top: 38%;
  opacity: 0.95;
}
.wax-seal {
  display: grid;
  width: clamp(70px, 6.5vw, 98px);
  height: auto;
  aspect-ratio: 1;
  left: 50%;
  top: 53%;
  translate: -50% 0;
  border: 3px solid #a77a41;
  border-radius: 49% 47% 50% 46%;
  background: radial-gradient(ellipse at 40% 32%, #65462d, #3e271e 80%);
  box-shadow:
    1px 5px 7px #2c140b65,
    inset 0 2px 3px #efd49c,
    inset 0 -2px 3px #291910;
  opacity: var(--scene-opacity);
}
.wax-seal::before {
  inset: 5px;
  border: 1px solid #c09658;
  box-shadow:
    inset 0 1px 2px #d2b07870,
    0 1px 1px #23170b;
}
.wax-seal > span {
  color: #ceb078;
  text-shadow: 0 -1px #21150e;
  font-size: clamp(31px, 3vw, 44px);
  margin: 9px 0 0 -5px;
}
.wax-seal > img {
  position: absolute;
  top: 13%;
  width: 32%;
  height: 26%;
  object-fit: contain;
  rotate: 50deg;
}
.hero-side {
  display: flex;
  flex-direction: column;
  writing-mode: horizontal-tb;
  transform: none;
  top: clamp(480px, 35.6vw, 540px);
  width: 110px;
  gap: 10px;
  text-align: center;
  font-size: 10px;
  line-height: 1.65;
  letter-spacing: 0.2em;
  color: #4b443a;
}
.hero-side::before,
.hero-side::after {
  display: none;
}
.hero-side-left {
  left: 4.55%;
}
.hero-side-right {
  right: 6.2%;
}
.side-rule {
  width: 1px;
  height: 54px;
  background: #8f7d62;
}
.hero-side em {
  font: italic 16px/1.32 var(--serif);
  letter-spacing: 0;
  color: #41382e;
}
.motion-ready .hero-side {
  opacity: var(--details-opacity, 1);
}
.scroll-cue,
.motion-ready .scroll-cue {
  right: 6.5%;
  bottom: 26px;
  font-size: 7px;
  letter-spacing: 0.14em;
}
.scroll-line {
  height: 22px;
}
@media (max-width: 1100px) and (min-width: 768px) {
  .home-page .site-header {
    padding-inline: 5%;
  }
  .home-page .wordmark {
    font-size: 25px;
  }
  .home-page .desktop-nav {
    gap: 20px;
  }
  .home-page .header-cta {
    padding-inline: 18px;
    font-size: 12px;
  }
  .hero-heading h1 {
    font-size: 7.2vw;
  }
  .paper-title,
  .motion-ready .paper-cover .paper-title {
    font-size: 6vw;
    margin-top: 18px;
  }
  .paper-logo {
    font-size: 33px;
  }
  .paper-logo::after {
    margin-block: 8px 12px;
  }
  .hero-side-left {
    left: 3%;
  }
  .hero-side-right {
    right: 3%;
  }
}
@media (max-width: 767px) {
  .home-page .site-header {
    height: 80px;
    padding-inline: 20px;
    gap: 14px;
  }
  .home-page .wordmark {
    font-size: 20px;
    gap: 10px;
  }
  .home-page .brand-mark {
    font-size: 28px;
    padding-right: 8px;
  }
  .home-page .header-cta {
    padding: 5px 10px;
    gap: 8px;
    font-size: 9px;
  }
  .home-page .header-cta span {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }
  .hero-stage,
  .motion-ready .hero-stage {
    padding-top: 122px;
    background-size: auto 100%;
    background-position: 48% top;
  }
  .hero-heading {
    max-width: 91%;
  }
  .hero-heading > .eyebrow {
    font-size: 7px;
    letter-spacing: 0.24em;
  }
  .heading-ornament {
    margin: 19px auto 20px;
    gap: 8px;
  }
  .heading-ornament::before,
  .heading-ornament::after {
    width: 52px;
  }
  .heading-ornament i {
    width: 4px;
    height: 4px;
  }
  .hero-heading h1 {
    font-size: clamp(48px, 13vw, 72px);
    line-height: 0.94;
    white-space: normal;
  }
  .hero-heading p {
    font-size: 14px;
    margin-top: 20px;
  }
  .envelope-scene,
  .motion-ready .envelope-scene {
    width: 82%;
    max-width: none;
    left: calc(9% + 8px);
    margin-left: 0;
    top: max(420px, 53svh);
  }
  .paper-border,
  .motion-ready .paper-cover {
    padding-top: 16px;
  }
  .paper-logo {
    font-size: 25px;
  }
  .paper-logo::after {
    width: 16px;
    margin: 6px auto 10px;
  }
  .paper-eyebrow {
    font-size: 5px;
  }
  .paper-title,
  .motion-ready .paper-cover .paper-title {
    font-size: 12vw;
    margin-top: 18px;
  }
  .wax-seal {
    width: 55px;
    border-width: 2px;
  }
  .wax-seal > span {
    font-size: 29px;
  }
  .wax-seal i {
    font-size: 21px;
  }
  .hero-side {
    display: none;
  }
  .scroll-cue,
  .motion-ready .scroll-cue {
    right: auto;
    bottom: 32px;
    font-size: 7px;
  }
}
@media (max-width: 370px) {
  .home-page .site-header {
    gap: 9px;
    padding-inline: 14px;
  }
  .home-page .wordmark {
    font-size: 18px;
  }
  .home-page .header-cta {
    padding-inline: 8px;
  }
}
/* Second reference comparison: align title, card lettering and front seal. */
@media (min-width: 768px) {
  .home-page .wordmark {
    gap: 27px;
  }
  .home-page .header-cta {
    padding-inline: 22px;
  }
  .hero-heading {
    left: 18px;
  }
  .heading-ornament {
    margin-bottom: 16px;
  }
  .hero-heading p {
    margin-top: 7px;
  }
  .envelope-scene,
  .motion-ready .envelope-scene {
    width: 41.5vw;
    max-width: 630px;
    margin-left: max(-20.75vw, -315px);
    left: calc(50% + 31px);
    top: clamp(430px, 38.3vw, 580px);
  }
}
.envelope-flap {
  height: 56%;
}
.invitation-paper {
  width: 80%;
  left: 10%;
}
.paper-title,
.motion-ready .paper-cover .paper-title {
  margin-top: 9px;
}
.wax-seal {
  top: 43%;
}
.hero-side em {
  font-family: Georgia, serif;
  font-size: 14px;
  line-height: 1.45;
}
@media (max-width: 767px) {
  .hero-stage,
  .motion-ready .hero-stage {
    background-size: 100% 100%;
  }
  .paper-title,
  .motion-ready .paper-cover .paper-title {
    margin-top: 12px;
  }
}
/* Mobile art direction preserves the supplied image proportions. */
@media (max-width: 767px) {
  .hero-stage,
  .motion-ready .hero-stage {
    background:
      linear-gradient(#eee2ce55, #eee2ce55),
      var(--ivory-material) center/500px;
  }
  .hero-stage::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 75vw;
    background: var(--reference-paper) center top/100% auto no-repeat;
    mask-image: linear-gradient(#000 58%, transparent 100%);
    pointer-events: none;
  }
}
/* Keep material and frame continuous at the existing journey-section handoff. */
.motion-ready .letter-content.is-unfolding {
  background:
    linear-gradient(var(--paper-tint), var(--paper-tint)),
    var(--ivory-material) center/var(--paper-grain-size, 480px);
}
.motion-ready .letter-content.is-unfolding::before {
  border-color: var(--frame-color, #b0945f);
  outline-color: var(--frame-outline, #c9b38a);
}
.wax-seal {
  background:
    radial-gradient(ellipse at 40% 32%, #65462dbb, #3e271ee8 80%),
    var(--burgundy-material) center/200px;
}
@media (max-width: 767px) {
  .home-page .site-header {
    background: #f3ebdfe8;
  }
}
/* Reference lighting: warm paper, upper-right light, cast shadows to the left. */
.hero-stage,
.motion-ready .hero-stage {
  background-image:
    linear-gradient(105deg, #b9975310, #b9975308 65%, #b9975310),
    var(--reference-paper);
  background-size:
    100% 100%,
    100% auto;
  background-position:
    center,
    center top;
  background-repeat: no-repeat;
}
.envelope-shadow {
  display: none;
}
.envelope-back {
  box-shadow:
    -54px 24px 52px 7px #302210ad,
    -7px 6px 11px #291c126b;
}
.envelope-front {
  /* Perspective widens the lower edges by a few pixels, like the reference. */
  overflow: visible;
  clip-path: polygon(0 0, 100% 0, 103% 100%, -1.5% 100%);
  filter: none;
}
.fold-left {
  background-image:
    linear-gradient(105deg, #170c09a8, #361b1255 65%, #50281f15),
    var(--burgundy-material);
  background-size: auto, 420px;
}
.fold-right {
  background-image:
    linear-gradient(255deg, #b7775b15, #351c1b42 80%), var(--burgundy-material);
  background-size: auto, 420px;
}
.fold-bottom {
  background: #a778656e;
}
.fold-bottom::after {
  background-image:
    linear-gradient(110deg, #160b08a3, #3d1d1a65 50%, #78413a35),
    var(--burgundy-material);
  background-size: auto, 420px;
}
.flap-inner {
  clip-path: polygon(0 0, 100% 0, 54% 97%, 52% 99%, 50% 100%, 48% 99%, 46% 97%);
  background-image:
    linear-gradient(110deg, #1f0e0ca6, #3017145e), var(--burgundy-material);
  background-size: auto, 420px;
}
.envelope-flap {
  height: 58%;
  filter: drop-shadow(-9px 5px 7px #271b123d);
}
.invitation-paper {
  background:
    linear-gradient(#a787601f, #a787601f),
    var(--ivory-material) center/480px;
  box-shadow:
    -34px 18px 35px #39281752,
    -3px 3px 5px #3928172b;
}
.motion-ready .letter-content.is-unfolding {
  box-shadow: var(--paper-cast-shadow);
}
.wax-seal {
  box-shadow:
    -7px 9px 9px #1d100bb3,
    -2px 2px 2px #2915098c,
    inset 2px 2px 3px #f5ddb0,
    inset -2px -3px 3px #25140c;
  border-color: #9e744c;
}
.wax-seal::before {
  border-color: #bb9963;
  box-shadow:
    inset 2px 1px 2px #20110799,
    -1px 1px 1px #efd6a3;
}
@media (max-width: 767px) {
  .hero-stage,
  .motion-ready .hero-stage {
    background:
      linear-gradient(#d1b47e30, #d1b47e30),
      var(--ivory-material) center/500px;
  }
  .hero-stage::before {
    background-image:
      linear-gradient(#b9975310, #b9975310), var(--reference-paper);
  }
  .envelope-back {
    box-shadow:
      -24px 14px 30px 3px #30221099,
      -4px 4px 7px #291c126b;
  }
}
.hero-stage,
.motion-ready .hero-stage {
  background-blend-mode: normal, normal;
}
.fold-left,
.fold-right,
.fold-bottom {
  left: -1.5%;
  right: -3%;
}
.fold-left {
  clip-path: polygon(1.435% 0, 54% 60%, 0 100%);
}
.fold-right {
  clip-path: polygon(97.13% 0, 46% 60%, 100% 100%);
}
.fold-right {
  background-image:
    linear-gradient(255deg, #b7776b27, #351c1b32 80%), var(--burgundy-material);
}
@media (min-width: 768px) {
  .hero-stage,
  .motion-ready .hero-stage {
    background-image:
      radial-gradient(ellipse 24% 28% at 77% 43%, #513b2010, transparent 80%),
      linear-gradient(#fff9ed20, transparent 26%),
      linear-gradient(105deg, #b9975310, #b9975308 65%, #b9975310),
      var(--reference-paper);
    background-size:
      100% 100%,
      100% 100%,
      100% 100%,
      100% auto;
    background-position:
      center,
      center,
      center,
      center top;
    background-blend-mode: normal;
  }
  .envelope-back {
    box-shadow:
      -54px 24px 52px 7px #302210dc,
      -7px 6px 11px #291c126b;
  }
}
.invitation-paper {
  box-shadow:
    -48px 24px 42px #3928176b,
    -3px 3px 5px #3928172b;
}
/* Match the reference's visible cotton fibres instead of downsampling them away. */
.fold-left,
.fold-right,
.fold-bottom::after,
.flap-inner {
  background-size: auto, 1000px;
}
/* A slight tabletop angle, shared by every envelope layer around its hinge. */
.envelope-back,
.envelope-front {
  transform-origin: 50% 0;
  transform: translateY(var(--envelope-y)) rotate(-0.85deg);
}
.envelope-flap {
  transform: translateY(var(--envelope-y)) rotate(-0.85deg)
    rotateX(var(--flap-angle));
}
.wax-seal {
  rotate: -0.85deg;
}
/* Contact shading where the rear flap meets the pocket, visible beside the card. */
.envelope-back::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 17px;
  border-top: 1px solid #ae80705e;
  background:
    linear-gradient(180deg, #100807ba, #10080700),
    linear-gradient(90deg, #12080790, #12080718 23%, transparent 48%);
  pointer-events: none;
}
.flap-inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 12px;
  background: linear-gradient(180deg, #170b0999, #170b0900);
  border-top: 1px solid #bc8d7659;
  pointer-events: none;
}
.flap-inner::after {
  inset: 0;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent,
    #14090760 8%,
    transparent 23%
  );
  clip-path: none;
  opacity: 1;
}
.envelope-back::before {
  border-top-color: #130907b3;
}
.flap-inner::before {
  border-top-color: #84574644;
}
/* Directional ivory lighting: soft upper-right highlight and lower-left warmth. */
.motion-ready .letter-content.is-unfolding {
  background:
    radial-gradient(
      ellipse 110% 95% at 110% -5%,
      var(--paper-light),
      transparent 90%
    ),
    linear-gradient(180deg, transparent 25%, var(--paper-shade)),
    linear-gradient(var(--paper-tint), var(--paper-tint)),
    var(--ivory-material) center/var(--paper-grain-size, 700px);
}
.invitation-paper {
  background:
    radial-gradient(ellipse 110% 95% at 110% -5%, #fffcf5a8, transparent 90%),
    linear-gradient(180deg, transparent 25%, #7e5f3916),
    linear-gradient(#a7876029, #a7876029),
    var(--ivory-material) center/700px;
  box-shadow:
    -34px 22px 32px #39281780,
    -3px 3px 5px #3928172b;
}
.envelope-back {
  box-shadow:
    -60px 24px 78px 4px #302210a6,
    -105px 20px 100px #4f391838,
    -3px 3px 5px #291c1233;
}
@media (max-width: 767px) {
  .envelope-back {
    box-shadow:
      -32px 13px 42px 2px #302210b8,
      -2px 2px 4px #291c1233;
  }
  .invitation-paper {
    box-shadow:
      -18px 12px 18px #39281780,
      -2px 2px 4px #3928172b;
  }
}