/* V3 campaign layout. Artwork is supplied separately; no product pixels are changed. */
:root {
  --ref-content-max:1728px;
  --ref-gutter:64px;
  --ref-page-bg:#1f222b;
}
body { background:var(--ref-page-bg); }
.refHome { --ref-bg:var(--ref-page-bg); background:var(--ref-page-bg); }
/* Header and page share one outer container; descendants never subtract gutters again. */
.marketHeader .wrap,
.marketPage > .wrap {
  width:min(var(--ref-content-max),calc(100% - 2 * var(--ref-gutter)));
  max-width:var(--ref-content-max);
  margin-inline:auto;
  min-width:0;
  padding-inline:0;
}
.refHome .refPrizeRail,
.refHome .refCampaign,
.refHome .refFeaturedGrid,
.refHome .refPoolSection.poolSection,
.marketPage .footer {
  width:100%;
  max-width:none;
  margin-inline:0;
  min-width:0;
}
.refHome .refFilters,
.refHome .refPhotoCredits { width:100%; max-width:none; margin-inline:0; }
.refFeaturedGrid { margin-top:-36px; }

/* Mask the background image's actual paint box, not its letterboxed container. */
.refCampaign.refHalloweenCampaign {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:none;
  align-items:center;
  min-height:450px;
  height:clamp(450px,29vw,500px);
  padding:0;
  background:var(--ref-page-bg);
  overflow:hidden;
  isolation:isolate;
}
.refHalloweenCampaign:before,.refHalloweenCampaign:after { content:none; background:none; }
.refCampaignScene {
  position:absolute;
  inset:0;
  z-index:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  background:none;
  -webkit-mask-image:none;
  mask-image:none;
}
.refCampaignScene:before,.refCampaignScene:after { content:none; background:none; }
.refCampaignScene > img {
  display:block;
  flex:1 1 100%;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 3%,#000 72%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 3%,#000 72%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.refHalloweenCampaign > .refCampaignTitle {
  grid-area:auto;
  grid-column:1;
  grid-row:1;
  align-self:center;
  justify-self:center;
  width:100%;
  max-width:660px;
  margin:0;
  padding:16px 20px 28px;
  z-index:1;
}
.refHalloweenCampaign .refCampaignKicker { margin-bottom:10px; color:#d2c2a2; text-shadow:0 2px 5px #000; }
.refHalloweenCampaign .refCampaignTitle h1 { color:#ffd768; font-size:clamp(42px,3.8vw,62px); line-height:1.1; letter-spacing:1px; text-shadow:0 3px 7px #000b; }
.refHalloweenCampaign .refCampaignTitle h1 > span { color:#ffd768; }
.refHalloweenCampaign .refCampaignTitle h1 > strong { margin-top:4px; color:#fff5df; }
.refHalloweenCampaign .refCampaignCopy { max-width:420px; margin:12px auto 18px; color:#e3d9c9; text-shadow:0 2px 5px #000; }
.refHalloweenCampaign .refCampaignButton.btn.primary { background:#ffd33f; color:#272216; }
.refHalloweenCampaign .refCampaignSecondary { margin:0 auto -4px; min-height:44px; color:#eee0c6; text-shadow:0 2px 5px #000; }
.refHalloweenCampaign .refCampaignNotice { max-width:430px; margin-top:11px; color:#d3c9b9; text-shadow:0 2px 5px #000; }

/* Preview disclosure keeps its own column, including when the navigation scrolls. */
.marketHeader .shopNavInner { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px; }
.marketHeader .shopNavInner > .nav { min-width:0; width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
.marketHeader .shopNavNote.refPreviewFlag {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  margin-left:0;
  padding:5px 9px;
  border:1px solid #c6b57326;
  border-radius:4px;
  color:#d0c7ac;
  background:#d5bc5d09;
  font-size:10px;
  font-weight:500;
  line-height:1.5;
  white-space:nowrap;
}

@media (max-width:1023px) and (min-width:768px) {
  :root { --ref-gutter:24px; }
  .refCampaign.refHalloweenCampaign { min-height:420px; height:450px; }
  .refHalloweenCampaign .refCampaignTitle h1 { font-size:46px; }
  .refHalloweenCampaign > .refCampaignTitle { max-width:560px; padding:18px 20px 28px; }
  .marketHeader .shopNavInner { gap:14px; }
  .marketHeader .shopNavNote.refPreviewFlag { font-size:9px; padding-inline:8px; }
}
@media (max-width:767px) {
  :root { --ref-gutter:16px; }
  .refCampaign.refHalloweenCampaign { min-height:410px; height:auto; }
  .refCampaignScene > img { width:100%; height:100%; object-fit:cover; object-position:50% 50%; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 3%,#000 72%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 3%,#000 72%,transparent 100%); }
  .refHalloweenCampaign > .refCampaignTitle { max-width:100%; padding:30px 15px 44px; }
  .refHalloweenCampaign .refCampaignKicker { font-size:8px; letter-spacing:2px; margin-bottom:12px; }
  .refHalloweenCampaign .refCampaignTitle h1 { font-size:39px; line-height:1.14; letter-spacing:.5px; }
  .refHalloweenCampaign .refCampaignCopy { max-width:310px; font-size:11px; line-height:1.9; margin:13px auto 17px; }
  .refHalloweenCampaign .refCampaignNotice { max-width:300px; font-size:8px; line-height:1.8; padding-inline:0; margin-top:10px; }
  .refFeaturedGrid { margin-top:-17px; padding-inline:0; }
  .refPoolSection.poolSection { padding-inline:0; }
  .marketHeader .shopNavInner { gap:10px; }
  .marketHeader .shopNavInner > .nav { gap:22px; }
  .marketHeader .shopNavNote.refPreviewFlag { display:inline-flex; font-size:9px; min-height:27px; padding:5px 7px; max-width:116px; }
}
@media (max-width:359px) {
  .refHalloweenCampaign .refCampaignTitle h1 { font-size:35px; }
  .refHalloweenCampaign > .refCampaignTitle { padding-inline:12px; }
  .refHalloweenCampaign .refCampaignCopy { font-size:10px; }
  .marketHeader .shopNavNote.refPreviewFlag { font-size:8px; padding-inline:6px; }
  .marketHeader .shopNavInner { gap:8px; }
}
@media (prefers-reduced-motion:reduce) {
  .refCampaignScene,.refHalloweenCampaign:before,.refHalloweenCampaign:after { animation:none; transition:none; }
}