/* hava materials · editorial pages (.page template: reflections, about, gallery)
   cotton behind the words, one yellow linen invitation band at the close. */

html { background: #F4E9D2 !important; }
body { background: transparent !important; }
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #F4E9D2;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 250, 232, 0.55), transparent 65%),
    url('/assets/cotton-cream-weave.jpg');
  background-size: cover;
  background-position: center;
}
@media (max-width: 720px) {
  body::after { background-image: radial-gradient(ellipse 90% 40% at 50% 0%, rgba(255, 250, 232, 0.55), transparent 65%), url('/assets/cotton-cream-weave.jpg'); }
}

/* reading panel · cream cotton */
.page.m-panel {
  background: rgba(251, 247, 236, 0.9) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(46, 74, 44, 0.16);
  box-shadow: 0 18px 50px rgba(74, 55, 67, 0.10) !important;
  overflow: hidden;
}

/* yellow linen · the one invitation band, at the close */
.m-invite {
  position: relative;
  background-color: #D8B45E;
  background-image: linear-gradient(rgba(216, 180, 94, 0.12), rgba(216, 180, 94, 0.12)), url('/assets/linen-yellow.jpg');
  background-size: cover;
  background-position: center;
  color: #2E4A2C !important;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 250, 238, 0.35);
}
.m-invite *, .m-invite .mark, .m-invite .small, .m-invite .invite, .m-invite p { color: #2E4A2C !important; }
.m-invite .dots span { background: #9A7224 !important; }

/* inside a reading panel: bleed to the panel edges and sit at its foot */
.page.m-panel .m-invite {
  margin-left: calc(-1 * clamp(24px, 5vw, 56px));
  margin-right: calc(-1 * clamp(24px, 5vw, 56px));
  margin-bottom: -72px;
  margin-top: clamp(56px, 8vw, 88px);
  padding: clamp(48px, 7vw, 72px) 24px clamp(52px, 7vw, 76px);
  border-top: 0 !important;
  max-width: none !important;
}
.page.m-panel .m-invite a.cta,
.m-invite .closer-cta {
  background: #2E4A2C !important;
  color: #FBF7EC !important;
  border-color: #2E4A2C !important;
}
.page.m-panel .m-invite a.cta:hover, .page.m-panel .m-invite a.cta:focus-visible,
.m-invite .closer-cta:hover, .m-invite .closer-cta:focus-visible { background: #5A7250 !important; }

/* gallery: full-bleed band at the foot of the page */
.page.m-wide .m-invite {
  width: 100vw;
  max-width: none !important;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: clamp(64px, 10vw, 120px);
  margin-bottom: -78px;
  padding: clamp(56px, 8vw, 88px) 24px;
}