/* The slide and purchase strip form one right-hand study column. */
#inside .materials-spread {
  max-width: 1040px;
  margin-inline: auto;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: clamp(28px,5vw,68px);
  align-items: start;
}
#inside .materials-spread .page-written { max-width: 336px; margin: 0 auto; }
#inside .materials-purchase {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 108px;
  margin-top: 20px;
  padding: 20px;
  background: #102130;
  border: 1px solid #ab815e;
  border-radius: 3px;
  box-shadow: 0 7px 18px #1021300c;
}
#inside .materials-buy {
  position: relative; min-height: 50px; min-width: 164px; max-width: 100%;
  padding: 13px 20px; gap: 20px;
  background: #102130; color: #f6f0e3;
  border: 1px solid #c9a17b; border-radius: 3px;
  box-shadow: 0 0 0 8px #102130;
  font: 500 16px/1.25 var(--sans);
  transition: background-color 150ms ease, border-color 150ms ease;
}
#inside .materials-buy:hover { background: #1c3547; color: #f6f0e3; border-color: #ead2b8; }
#inside .materials-buy:active { background: #0b1824; }
#inside .materials-buy:focus-visible { outline: 3px solid #f6f0e3; outline-offset: 4px; }
@media (max-width: 860px) and (min-width: 641px) {
  #inside .materials-spread { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 30px; }
  #inside .materials-purchase { min-height: 104px; padding: 16px; }
  #inside .materials-buy { min-width: 152px; }
}
@media (max-width: 640px) {
  #inside .materials-spread { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  #inside .materials-spread .page-written { max-width: none; margin: 0; }
  #inside .materials-purchase { min-height: 104px; margin-top: 16px; padding: 44px 10px 10px; }
  #inside .materials-buy { min-width: 0; width: 100%; min-height: 48px; padding: 12px 8px; gap: 14px; font-size: 15px; box-shadow: 0 0 0 4px #102130; }
}
@media (prefers-reduced-motion: reduce) {
  #inside .materials-buy { transition: none; }
}
@media (forced-colors: active) {
  #inside .materials-purchase { border-color: CanvasText; box-shadow: none; }
  #inside .materials-buy { border-color: ButtonText; box-shadow: none; }
  #inside .materials-buy:focus-visible { outline-color: Highlight; }
}

/* Actual approved golden-thread footage fills the entire purchase strip. */
#inside .materials-golden-art {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: inherit; pointer-events: none; z-index: -1;
}
#inside .materials-golden-art picture,
#inside .materials-golden-art video {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
}
#inside .materials-golden-art img,
#inside .materials-golden-art video {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%;
}
#inside .materials-golden-art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #1021300d, #10213000 50%, #10213066);
}
#inside .materials-golden-art [hidden] { display: none; }
@media (max-width: 640px) {
  #inside .materials-golden-art::after { background: linear-gradient(180deg,#10213000 20%,#10213070 100%); }
}
@media (forced-colors: active) {
  #inside .materials-golden-art { display: none; }
}
