.preorder-card {
  --preorder-paper: #f8f4ef;
  --preorder-ink: #1a1919;
  --preorder-red: #a32028;
  --preorder-deep-red: #80181f;
  --preorder-line: #dbccc3;
  --preorder-pad: clamp(26px, 4.8vw, 76px);
  isolation: isolate;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  grid-template-areas: "body photo";
  column-gap: var(--preorder-pad);
  row-gap: 20px;
  align-content: center;
  margin-top: 10px;
  padding: clamp(29px, 3.5vw, 54px) var(--preorder-pad);
  background: var(--preorder-paper);
  color: var(--preorder-ink);
  overflow: hidden;
}

.preorder-card__body {
  grid-area: body;
  align-self: center;
  display: grid;
  grid-template-areas: "intro" "actions" "foot";
  gap: 18px;
}

.preorder-card__intro { grid-area: intro; }
.preorder-card__label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--preorder-red);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .115em;
  text-transform: uppercase;
}

.preorder-card__label::before {
  content: "";
  flex: 0 0 15px;
  height: 2px;
  background: currentColor;
}

.preorder-card h2 {
  max-width: 18ch;
  margin: 9px 0 8px;
  font-size: clamp(29px, 4.05vw, 65px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.03;
  text-wrap: balance;
}

.preorder-card__description {
  color: #494340;
  font-size: clamp(13px, 1.3vw, 18px);
  font-weight: 500;
  line-height: 1.55;
}

.preorder-card__photo {
  grid-area: photo;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
}

.preorder-card__photo::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(100%, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #ead2c2, #f2dfd3 66%, transparent 67%);
  box-shadow: inset 0 0 0 1px #dfc2b180;
}

.preorder-card__photo img {
  width: min(86%, 369px);
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px #281b1a33);
}

.preorder-card__actions { grid-area: actions; }
.preorder-card__prompt {
  margin-bottom: 7px;
  color: #494340;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
}

.preorder-card__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.preorder-card__button {
  display: grid;
  align-content: center;
  min-height: 62px;
  padding: 9px 15px;
  background: var(--preorder-red);
  color: #fff;
  line-height: 1.35;
  transition: background-color 160ms ease;
}

.preorder-card__button:hover { background: var(--preorder-deep-red); }
.preorder-card__button strong { font-size: 16px; font-weight: 800; }
.preorder-card__button span { font-size: 12px; font-weight: 550; }
.preorder-card a:focus-visible { outline: 3px solid var(--preorder-ink); outline-offset: 3px; }

.preorder-card__foot {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 16px;
  border-top: 1px solid var(--preorder-line);
  padding-top: 6px;
  font-size: 12px;
  line-height: 1.55;
}

.preorder-card__foot a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--preorder-deep-red);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: .23em;
}
.preorder-card__foot p { color: #59514d; }

.entry-grid--after-preorder { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 760px) {
  .preorder-card {
    grid-template-columns: minmax(0, 1fr) minmax(80px, 35%);
    grid-template-areas: "intro photo" "actions actions" "foot foot";
    padding: 20px clamp(16px, 4vw, 29px) 13px;
    column-gap: 10px;
    row-gap: 12px;
  }

  .preorder-card__label { font-size: 10px; letter-spacing: .075em; gap: 6px; }
  .preorder-card__body { display: contents; }
  .preorder-card__label::before { flex-basis: 10px; }
  .preorder-card h2 { margin: 6px 0; font-size: clamp(25px, 6.5vw, 36px); text-wrap: wrap; }
  .preorder-card__photo img { width: min(100%, 180px); }
  .preorder-card__photo::before { width: min(100%, 190px); }
  .preorder-card__button { min-height: 56px; padding: 8px 11px; }
  .preorder-card__button strong { font-size: 14px; }
  .preorder-card__foot { row-gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .preorder-card__button { transition: none; }
}