.graphic-preview {
  --surround: #091923;
  --frame-accent: #32d4af;
  --frame-gap: clamp(44px, 7.6vw, 120px);
  position: relative;
  isolation: isolate;
  background: var(--surround);
  padding: var(--frame-gap) clamp(30px, 4.5vw, 80px) 56px var(--frame-gap);
}
.graphic-decoration {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
/* The exposed mint cuts share one diagonal edge. */
.coral-plane {
  position: absolute;
  inset: 0 auto auto 0;
  width: 68%;
  height: calc(100% - 160px);
  background: var(--frame-accent);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  mask-image: linear-gradient(to bottom, #000 35%, transparent 62%);
}
.dot-field {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #e9f1f4 1.2px, transparent 1.5px);
  background-size: 64px 64px;
  background-position: 20px 20px;
  opacity: .45;
}
.page-frame {
  position: relative;
  isolation: isolate;
  background: transparent;
  min-width: 0;
}
.page-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: #02070c;
  mask-image: linear-gradient(to bottom, #000 55%, transparent 92%);
}
.page-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, #d5e3e9 1px, transparent 1.4px);
  background-size: 64px 64px;
  opacity: .18;
  mask-image: linear-gradient(to bottom, #000 42%, transparent 85%);
}
.page-frame .backdrop {
  z-index: -2;
  height: min(1050px, 100%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  background-image: linear-gradient(180deg, #02070c0d 0%, #02070c22 45%, #02070c 96%), url('materia-assets/backdrop.jpg');
}
.page-frame .landing { padding-top: 56px; padding-bottom: 105px; min-height: 830px; }
.page-frame .brand { max-width: 86%; }
.page-frame .footer { background: transparent; }
.side-signature {
  position: absolute;
  top: 32px;
  left: 0;
  width: var(--frame-gap);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 26px;
}
.signature-word {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: Materia One, New Academy, sans-serif;
  font-size: clamp(20px, 2.1vw, 32px);
  color: #fff;
}
.signature-rule { width: 2px; height: 104px; background: #fff; }
.top-rule, .lower-rule { position: absolute; height: 2px; background: #fff; }
.top-rule { top: calc(var(--frame-gap) / 2); left: calc(var(--frame-gap) + 4px); width: 18%; }
.lower-rule { top: 66%; left: 0; width: calc(var(--frame-gap) * .6); }
@media (max-width: 760px) {
  .graphic-preview { --frame-gap: 40px; padding: 56px 14px 28px 40px; }
  .dot-field, .page-frame::before { background-size: 40px 40px; }
  .coral-plane { width: 90%; height: calc(100% - 160px); }
  .top-rule { top: 26px; left: 60px; width: 33%; }
  .side-signature { top: 20px; gap: 20px; }
  .signature-word { font-size: 20px; }
  .signature-rule { height: 68px; width: 1px; }
  .page-frame .landing { padding: 78px 16px 70px; min-height: 730px; }
  .page-frame .brand { max-width: 100%; }
  .page-frame .backdrop { height: 900px; background-position: 64% top; }
  .page-frame .topbar { top: 20px; right: 18px; }
  .page-frame .tagline { font-size: 14px; margin-top: 2px; }
  .page-frame .steam-description { flex-direction: column; }
  .page-frame .steam-description a { width: 100%; }
  .page-frame .steam-description p { font-size: 13px; }
  .page-frame .purchase { gap: 5px; padding-left: 6px; }
  .page-frame .purchase > span { font-size: 11px; }
  .page-frame .purchase a { padding: 10px 8px; font-size: 11px; }
  .page-frame .signup h2 { font-size: 17px; line-height: 1.5; }
  .page-frame .footer { padding-inline: 16px; }
  .page-frame .studio { font-size: 17px; }
}