/* ---- gifts-for-mst3k-fans.html line 26 ---- */
#dl-landing, #dl-landing * { box-sizing: border-box; }
#dl-landing {
  --dl-o: #F75E1C; --dl-card: linear-gradient(100deg, rgba(0,0,0,0.30), rgba(0,0,0,0.50) 60%), linear-gradient(rgba(6,5,4,0.74), rgba(6,5,4,0.74)), url(https://images.squarespace-cdn.com/content/5f257383d68fbe07dae9c644/fc1eaf2a-045d-4028-a23d-7314989c6ac2/Wood+Panel+3.jpg) center/cover no-repeat, #120e0b; --dl-bd: rgba(247,94,28,0.2);
  --dl-heroart: url(https://images.squarespace-cdn.com/content/5f257383d68fbe07dae9c644/aa702ba8-fb2c-4a8d-81f1-032d103c5b05/MST3K+Gifts.jpg?format=2500w);
  --dl-mute: rgba(255,255,255,0.7); --dl-dim: rgba(255,255,255,0.48);
  --dl-bc: 'Barlow Condensed', 'Poppins', sans-serif;
  font-family: 'Poppins', sans-serif; font-size: 14px; line-height: 1.6; color: #fff; background: #000;
  --dl-gut: max(4vw, calc((100vw - var(--dl-sbw, 0px) - 2000px) / 2));  /* site gutter; content tops out at 2000px */
  /* breaks out of the Code Block to the viewport edges, like the program pages */
  width: calc(100vw - var(--dl-sbw, 0px)); max-width: none; margin: 0 0 0 calc(50% - (100vw - var(--dl-sbw, 0px)) / 2); padding: 0 var(--dl-gut) 40px;
}
#dl-landing section { scroll-margin-top: 84px; }
#dl-landing a { color: inherit; text-decoration: none !important; }
#dl-landing p { margin: 0; }

.dl-kick { color: var(--dl-o); font: 700 16px/1.1 var(--dl-bc); letter-spacing: .06em; text-transform: uppercase; }
.dl-cta { display: inline-block; background: var(--dl-o); color: #fff !important; padding: 11px 24px; border-radius: 12px;
  font: 700 19px var(--dl-bc); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; transition: transform .15s, box-shadow .15s; }
.dl-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(247,94,28,0.45); }
.dl-cta--ghost { background: rgba(0,0,0,0.35); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.45); }
.dl-cta--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }

/* Hero: a panel on the MST3K Gifts art, copy on the RIGHT, right-aligned and centered top to bottom in the
   space above the seats (Chris, 2026-10-13; phones stay left). The art is pinned to the bottom edge, the extra
   bottom padding is the row of seats, and the scrim sits behind the copy only, so the silhouettes stay clear. */
.dl-hero { display: flex; flex-direction: column; align-items: flex-end; text-align: right; justify-content: center; gap: 14px; min-height: clamp(600px, 50vw, 800px);
  margin-top: 20px; padding: 52px 52px calc(52px + 7vw); border-radius: 22px; overflow: hidden;   /* no orange outline (Chris, 2026-10-13) */
  background: radial-gradient(ellipse 62% 78% at 100% 42%, rgba(0,0,0,.92), rgba(0,0,0,.72) 45%, rgba(0,0,0,0) 100%), var(--dl-heroart) center bottom/cover no-repeat, #000; }
#dl-landing .dl-h1 { font: 700 clamp(44px, 6vw, 96px)/0.9 var(--dl-bc); text-transform: uppercase; letter-spacing: -0.01em; margin: 0; color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.6); text-wrap: balance; max-width: 16ch; }
/* The site header's heading rule pins every code-block h1 to line-height 1em !important; out-rank it (same as the program pages). */
#dl-landing .dl-h1:not(#_):not(#_) { line-height: 0.9 !important; }
.dl-lede { color: #fff; font-size: clamp(15px, 1.25vw, 19px); line-height: 1.5; max-width: 58ch; text-shadow: 0 1px 12px rgba(0,0,0,0.7); }
.dl-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* Jump links under the hero */
.dl-nav { display: flex; gap: 6px 22px; flex-wrap: wrap; padding-top: 22px; }
.dl-nav a { font: 700 16px var(--dl-bc); letter-spacing: 1px; text-transform: uppercase; color: var(--dl-mute) !important; white-space: nowrap; }
.dl-nav a:hover { color: var(--dl-o) !important; }

.dl-sec { padding-top: 44px; }
.dl-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
#dl-landing .dl-sec-title { font: 700 30px/1 var(--dl-bc); text-transform: uppercase; letter-spacing: .5px; margin: 0; color: #fff; }
.dl-sec-sub { color: var(--dl-dim); font-size: 13px; margin-top: 6px !important; max-width: 90ch; }
.dl-more { font: 700 16px var(--dl-bc); letter-spacing: 1px; text-transform: uppercase; color: var(--dl-o) !important; white-space: nowrap; }
.dl-more:hover { text-decoration: underline !important; }

/* Rails -- same as .dp-rail.dp-merch */
.dl-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 270px); gap: 18px; align-items: stretch;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; margin: 0 calc(-1 * var(--dl-gut)); padding: 4px var(--dl-gut) 16px; scroll-padding: 0 var(--dl-gut);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--dl-gut), #000 calc(100% - var(--dl-gut)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--dl-gut), #000 calc(100% - var(--dl-gut)), transparent 100%);
  scrollbar-width: thin; scrollbar-color: rgba(247,94,28,0.4) transparent; }
.dl-rail > * { scroll-snap-align: start; }

/* Product card -- same as .dp-pd in the 2026-10-09 card style: no wood tile, the thumbnail stands alone and the
   text sits under it. The site's Squarespace Custom CSS pins tile text padding with !important, hence html:root. */
.dl-pd { display: flex; flex-direction: column; position: relative; color: #fff; }
.dl-pd-th { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; background: rgba(0,0,0,0.3); flex-shrink: 0;
  border-radius: 16px; border: 1px solid var(--dl-bd); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
@media (hover: hover) { .dl-pd:hover .dl-pd-th { transform: translateY(-3px); border-color: rgba(247,94,28,0.55); box-shadow: 0 16px 40px rgba(0,0,0,0.5); } }
#dl-landing .dl-pd-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }
html:root #dl-landing .dl-pd-inf { padding: 10px 0 0 !important; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.dl-pd-cat { font: 700 14px/1.2 var(--dl-bc); letter-spacing: .12em; text-transform: uppercase; color: var(--dl-o); }
.dl-pd-tt { font: 700 22px/1.05 var(--dl-bc); letter-spacing: .3px; text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dl-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font: 700 14px/1.4 'Poppins', sans-serif; color: var(--dl-o); margin-top: 4px; }
.dl-price s { color: rgba(255,255,255,0.3); font-size: 12px; font-weight: 400; }
.dl-pd-note { font: 700 13px/1.3 var(--dl-bc); letter-spacing: .8px; text-transform: uppercase; color: var(--dl-o); margin-top: 4px; }

/* Q&A tiles -- same as .dp-qa: 16:9 still, eyebrow and title underneath */
.dl-rail.dl-qas { grid-auto-columns: minmax(300px, 360px); }
/* Featured slideshow: the Dumb Store's featured slideshow (.ds-spot*), copied (Chris, 2026-10-13) */
.dl-spots { position: relative; display: grid; margin-bottom: 48px; }
.dl-spot { grid-area: 1 / 1; position: relative; display: grid; grid-template-columns: clamp(280px, 30vw, 460px) minmax(0, 1fr); align-items: stretch;
  border-radius: 22px; overflow: hidden; border: 1px solid rgba(247,94,28,0.45); color: #fff !important; text-decoration: none !important;
  background: linear-gradient(100deg, rgba(0,0,0,0.30), rgba(0,0,0,0.50) 60%), radial-gradient(120% 140% at 100% 0%, rgba(247,94,28,0.16) 0%, rgba(247,94,28,0) 60%),
    linear-gradient(rgba(6,5,4,0.74), rgba(6,5,4,0.74)), url(https://images.squarespace-cdn.com/content/5f257383d68fbe07dae9c644/fc1eaf2a-045d-4028-a23d-7314989c6ac2/Wood+Panel+3.jpg) center/cover;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s; }
.dl-spot.is-active { opacity: 1; visibility: visible; transition: opacity 0.6s ease, visibility 0s; }
.dl-spot-media { position: relative; min-height: clamp(280px, 30vw, 460px); background: #0c0a09; }
#dl-landing .dl-spot-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.dl-spot-body { padding: 28px 40px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.dl-spot-kick { align-self: flex-start; color: var(--dl-o); font: 700 16px/1.2 var(--dl-bc); letter-spacing: 0.12em; text-transform: uppercase; }
#dl-landing .dl-spot-name { font: 700 clamp(32px, 3.6vw, 56px)/0.95 var(--dl-bc); letter-spacing: 0.3px; text-transform: uppercase; margin: 0; color: #fff;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
#dl-landing .dl-spot-desc { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.7); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dl-spot-cta { display: inline-block; background: var(--dl-o); color: #fff; padding: 11px 24px; border-radius: 12px; font: 700 19px var(--dl-bc);
  letter-spacing: 1px; text-transform: uppercase; transition: transform 0.15s, box-shadow 0.15s; }
.dl-spot:hover .dl-spot-cta { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(247,94,28,0.45); }
.dl-spot-dots { position: absolute; left: 0; right: 0; bottom: -22px; display: flex; justify-content: center; gap: 8px; }
.dl-spot-dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,0.28); transition: width 0.25s, background 0.25s; }
.dl-spot-dots button[aria-current] { width: 24px; background: var(--dl-o); }
/* The site's h3 rule (si-head-css: .sqs-block-code h3:not(#_):not(#_)..., 1.7rem !important) shrank these to 24px on the live page (Chris, 2026-10-13: "much larger"). */
html:root #dl-landing .dl-spot .dl-spot-name:not(#_):not(#_) { font-size: clamp(32px, 3.6vw, 56px) !important; line-height: 0.95 !important; letter-spacing: 0.3px !important; }
@media (min-width: 1500px) { html:root #dl-landing .dl-spot .dl-spot-name:not(#_):not(#_) { font-size: clamp(56px, 4vw, 80px) !important; } #dl-landing .dl-spot-desc { font-size: 17px; } .dl-spot-kick { font-size: 18px; } .dl-spot-cta { font-size: 22px; padding: 13px 28px; } }
@media (max-width: 600px) { .dl-spot { grid-template-columns: minmax(0, 1fr); align-content: start; } .dl-spot-media { min-height: 0; aspect-ratio: 1 / 1; } .dl-spot-body { padding: 22px 20px 24px; } }
@media (prefers-reduced-motion: reduce) { .dl-spot { transition: none; } }
/* Dumb Video downloads: the 2:3 cover art */
.dl-rail.dl-vids { grid-auto-columns: minmax(180px, 220px); }
.dl-vid .dl-pd-th { padding-bottom: 150%; }
.dl-qa { display: flex; flex-direction: column; gap: 6px; }
.dl-qa-th { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0c0a09; border: 1px solid var(--dl-bd); transition: border-color .2s; }
.dl-qa:hover .dl-qa-th { border-color: rgba(247,94,28,0.55); }
#dl-landing .dl-qa-th img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.dl-qa-kick { font: 700 14px/1.2 var(--dl-bc); letter-spacing: .12em; text-transform: uppercase; color: var(--dl-o); margin-top: 6px; }
.dl-qa-tt { font: 700 22px/1.08 var(--dl-bc); text-transform: uppercase; }
.dl-qa-who { color: var(--dl-mute); font-size: 13.5px; }

/* No-shipping tiles: the product card in a four-up grid */
.dl-tiles { display: grid; grid-template-columns: repeat(var(--dl-n, 4), minmax(0, 1fr)); gap: 18px; }   /* --dl-n: how many tiles there are */
.dl-tile-p { color: var(--dl-mute); font-size: 13.5px; margin-top: 4px !important; }
/* A tile whose picture is four square covers, 2 x 2 (the audiobooks) */
#dl-landing .dl-pd-th.dl-quad img { position: absolute; inset: auto; width: 50%; height: 50%; }
#dl-landing .dl-quad img:nth-child(1) { left: 0; top: 0; } #dl-landing .dl-quad img:nth-child(2) { left: 50%; top: 0; }
#dl-landing .dl-quad img:nth-child(3) { left: 0; top: 50%; } #dl-landing .dl-quad img:nth-child(4) { left: 50%; top: 50%; }

.dl-panel { background: var(--dl-card); border: 1px solid var(--dl-bd); border-radius: 18px; padding: 24px 26px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 34px; }
.dl-panel p { color: var(--dl-mute); }
/* Holiday order-by dates: the panel, one column per date */
.dl-panel.dl-dates { grid-template-columns: repeat(var(--dl-n, 4), minmax(0, 1fr)); align-items: center; }
#dl-landing .dl-date { font: 700 clamp(28px, 2.6vw, 44px)/1 var(--dl-bc); text-transform: uppercase; color: var(--dl-o); margin-bottom: 8px; }
.dl-dates p + p { margin-top: 4px !important; }
.dl-panel p b { color: #fff; font-weight: 600; }

/* FAQ -- same as .dp-faq: no panel, white question, orange arrow */
.dl-faq { max-width: 110ch; }
.dl-faq details { padding: 10px 0; }
.dl-faq summary { font: 700 18px/1.2 var(--dl-bc); text-transform: uppercase; letter-spacing: .3px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.dl-faq summary::-webkit-details-marker { display: none; }
.dl-faq summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 4px 0; border: solid var(--dl-o); border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg); transition: transform .25s ease; }
.dl-faq details[open] summary::after { transform: rotate(225deg); margin-bottom: -4px; }
.dl-faq details p { margin: 6px 0 0 !important; color: var(--dl-mute); }

/* Promo -- same as .dp-promo, on the basement (Clubhouse topic) */
.dl-promo { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; margin-top: 44px; padding: 72px 52px; border-radius: 18px; border: 1px solid rgba(247,94,28,0.55);
  background: linear-gradient(100deg, rgba(0,0,0,.25), rgba(0,0,0,.45) 60%), linear-gradient(rgba(6,5,4,.8), rgba(6,5,4,.8)),
    url(https://images.squarespace-cdn.com/content/5f257383d68fbe07dae9c644/d286a31a-3c33-4e97-b086-3cdd49ed0e84/Clubhouse+BG+2.jpg?format=2500w) center/cover no-repeat, #1e140a; }
#dl-landing .dl-promo-title { font: 700 clamp(44px, 5vw, 88px)/0.92 var(--dl-bc); text-transform: uppercase; margin: 8px 0 16px !important; color: #fff; max-width: 18ch; }
.dl-promo-sub { color: var(--dl-mute); line-height: 1.5; font-size: clamp(15px, 1.2vw, 19px); max-width: 70ch; }
.dl-promo .dl-cta { font-size: 22px; padding: 14px 30px; }

.dl-links { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.dl-links a { font: 700 18px var(--dl-bc); letter-spacing: .8px; text-transform: uppercase; color: var(--dl-o) !important; }
.dl-links a:hover { text-decoration: underline !important; }

@media (max-width: 1000px) { .dl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dl-panel { grid-template-columns: 1fr; } .dl-panel.dl-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 34px; } }
@media (max-width: 560px) { .dl-panel.dl-dates { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  /* Phones: the whole picture on top, uncropped and with no scrim, and the copy below it on black (the seats run into it) */
  .dl-hero { align-items: flex-start; justify-content: flex-start; text-align: left; padding: calc(56.25% + 18px) 22px 26px; min-height: 0; margin-top: 12px; background: var(--dl-heroart) center top/100% auto no-repeat, #000; }
  #dl-landing .dl-h1 { font-size: clamp(40px, 12vw, 56px); }
  .dl-ctas { align-self: stretch; } .dl-ctas .dl-cta { flex: 1 1 auto; text-align: center; white-space: normal; }
  #dl-landing .dl-sec-title { font-size: 24px; }
  .dl-rail { grid-auto-columns: 62%; }
  .dl-rail.dl-vids { grid-auto-columns: 44%; }
  .dl-rail.dl-qas { grid-auto-columns: min(78vw, 320px); } .dl-qa-tt, .dl-pd-tt { font-size: 20px; }
  .dl-promo { gap: 24px; padding: 40px 22px; }
  #dl-landing .dl-promo-title { font-size: clamp(36px, 11vw, 52px); }
  .dl-promo .dl-cta { font-size: 20px; padding: 12px 24px; align-self: stretch; text-align: center; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .dl-pd-th, .dl-cta { transition: none; } }