/* Sales presentation layered onto the approved cream, crimson and gold site. */
.preorder-strip {
  background: var(--crimson);
  color: var(--cream);
  border-bottom: 1px solid var(--gold);
}
.preorder-strip-inner {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 92px;
  padding-block: 10px;
}
.preorder-strip img { width: 46px; height: 70px; object-fit: contain; }
.preorder-strip-copy { margin: 0; line-height: 1.4; }
.preorder-strip-copy strong {
  display: block;
  font: 700 20px/1.3 var(--serif);
  color: var(--cream);
}
.preorder-strip-copy span { display: block; font-size: 13px; margin-top: 4px; }
.preorder-strip .btn {
  background: var(--cream);
  color: var(--crimson);
  border-color: var(--cream);
  min-height: 44px;
}
.preorder-strip .btn:hover { background: #fff9ed; border-color: #fff9ed; }
.preorder-strip .btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.hero-cta { align-items: center; }
.hero-preorder-button { gap: 14px; padding: 12px 20px; text-align: left; }
.hero-preorder-button img { width: 40px; height: 60px; object-fit: contain; }
.hero-preorder-button > span { display: flex; flex-direction: column; gap: 4px; }
.hero-preorder-button small { font-size: 12px; font-weight: 500; letter-spacing: .04em; }
.hero-preorder-button strong { font-size: 16px; line-height: 1.35; }
.kindle-feature {
  max-width: 1000px;
  margin: 32px auto 34px;
  display: grid;
  grid-template-columns: minmax(230px, .85fr) minmax(0, 1.3fr);
  gap: 42px;
  align-items: center;
  padding: 38px 54px 38px 40px;
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--gold);
  border-radius: 4px;
}
.kindle-feature-art {
  display: flex;
  justify-content: center;
  align-items: center;
}
.kindle-feature-art a {
  display: block;
  max-width: 100%;
  transform: rotate(-4deg);
  transition: transform .25s ease;
}
.kindle-feature-art a:hover { transform: rotate(-2deg) translateY(-3px); }
.kindle-feature-art img {
  display: block;
  width: 248px;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(12px 16px 18px rgba(0,0,0,.28));
}
.kindle-feature-kicker {
  margin: 0 0 14px;
  color: #d5b581;
  font: 600 12px/1.5 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kindle-feature h3 {
  margin: 0 0 20px;
  color: var(--cream);
  font: 600 clamp(28px, 3vw, 38px)/1.18 var(--serif);
  letter-spacing: -.01em;
}
.kindle-feature h3 em { color: #d5b581; font-weight: 400; }
.kindle-feature-description {
  max-width: 44ch;
  margin: 0 0 18px;
  color: #e0d7c6;
  font-size: 15px;
  line-height: 1.65;
}
.kindle-feature-date {
  margin: 0 0 20px;
  color: var(--cream);
  font-size: 14px;
  font-weight: 600;
}
.kindle-feature-date span { display: inline-block; }
.kindle-feature-cta.btn {
  padding: 15px 24px;
  gap: 18px;
  min-height: 54px;
  background: var(--cream);
  border-color: var(--cream);
  color: var(--crimson);
  font-size: 16px;
}
.kindle-feature-cta.btn:hover { background: #d5b581; border-color: #d5b581; }
.kindle-feature a:focus-visible { outline: 2px solid #d5b581; outline-offset: 5px; }
.kindle-feature-help {
  margin: 16px 0 0;
  color: #d5cdbf;
  font-size: 12px;
  line-height: 1.6;
}
.kindle-feature-help a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.editions--preorder li:last-child { border-color: var(--crimson); }
@media (max-width: 900px) {
  .kindle-feature { gap: 26px; padding: 34px 28px; grid-template-columns: minmax(180px,.8fr) minmax(0,1.3fr); }
}
@media (max-width: 600px) {
  .preorder-strip-inner { grid-template-columns: 40px minmax(0,1fr) auto; gap: 10px; min-height: 86px; }
  .preorder-strip img { width: 40px; height: 60px; }
  .preorder-strip-copy strong { font-size: 17px; }
  .preorder-strip-copy span { font-size: 12px; }
  .preorder-strip .btn { padding: 10px 14px; font-size: 13px; }
  .preorder-strip .wide-label { display: none; }
  .hero-preorder-button { max-width: 100%; gap: 12px; padding: 12px 16px; }
  .hero-preorder-button strong { font-size: 15px; }
  .kindle-feature { grid-template-columns: 1fr; gap: 26px; padding: 30px 24px; margin-block: 28px; }
  .kindle-feature-art img { width: 180px; }
  .kindle-feature h3 { font-size: 28px; }
  .kindle-feature-cta.btn { width: 100%; justify-content: center; gap: 10px; font-size: 15px; padding-inline: 15px; }
}
@media (max-width: 360px) {
  .kindle-feature { padding-inline: 16px; }
  .kindle-feature h3 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .kindle-feature-art a { transition: none; }
  .kindle-feature-art a:hover { transform: rotate(-4deg); }
}
