/* Download page (download/index.html). Builds on ../css/v7.css (fonts, .btn, robot band .cell/.rb/.h), signup.css (page shell),
   shop.css (.ty starfield) and palette.css (colours).
   SCREEN-PRINT OFF-REGISTER (as in creative/stickers-v3): ink lines, drawings and all text stay sharp and in register;
   only FLAT colour plates are shifted clearly off the key line. No blur, no grain, no text-shadow on the misregistration. */
.dl-body{--mx:14px;--my:12px;--bx:9px;--by:8px}
/* ---- space panel + robot band ---- */
.dl-body .pv-main{position:relative;overflow:hidden;flex-direction:column;align-items:center;padding-top:0}
.dl-band{--bh:94px;width:calc(100% + 44px);margin:0 -22px 34px;height:var(--bh);box-sizing:border-box;padding:4px;background:var(--frame,#1d1a17);
  grid-template-columns:repeat(auto-fit,minmax(calc(var(--bh) * .74),1fr));grid-template-rows:calc(var(--bh) - 8px);grid-auto-rows:0;row-gap:0;flex:none}
.dl-band .cell{--hs:22px;cursor:default}
.dlp{position:relative;z-index:2;max-width:760px}
/* ---- drawings: the site's own art, clean and sharp, no plates behind them (v2) ---- */
.dl-ill{position:absolute;display:block;z-index:1}
.dl-ill img{position:relative;display:block;width:100%;height:auto}
.dl-ill .pl{display:none}
.dl-moon{right:4%;top:150px;width:150px}
.dl-ship{left:2%;top:250px;width:210px;rotate:-9deg}
/* ship: slow float + a degree of tilt, and a soft engine glow pulse. transform/opacity only; off for reduced motion */
.dl-ship img{animation:dl-float 7s ease-in-out infinite;will-change:transform}
.dl-ship::before{content:"";position:absolute;left:-14%;top:28%;width:42%;height:56%;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,170,90,.55),rgba(254,62,166,.28) 55%,rgba(254,62,166,0));opacity:.35;animation:dl-glow 2.6s ease-in-out infinite,dl-float 7s ease-in-out infinite;will-change:transform,opacity}
@keyframes dl-float{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(3px,-6px) rotate(1.5deg)}}
@keyframes dl-glow{0%,100%{opacity:.3}50%{opacity:.85}}
.dl-person{position:absolute;left:6%;bottom:46px;width:118px;z-index:1}
.dl-human{position:relative;width:100%}
.dl-heart{display:block;width:34px;height:32px;margin:0 auto 12px;overflow:visible}
.dl-heart .f{fill:var(--pal-pink,#FE3EA6)}
.dl-heart .k{fill:none;stroke:var(--ink);stroke-width:1.6}
/* ---- heading: crisp ink letters, ink key frame in register, flat pink plate off-register ---- */
.dl-h{margin:18px 0 18px;font-size:clamp(54px,7vw,92px);line-height:1;font-style:italic;font-weight:400;color:var(--ink)}
.dl-h span{position:relative;display:inline-block;padding:4px 26px 12px 18px;isolation:isolate}
.dl-h span::before,.dl-h span::after{content:"";position:absolute;inset:0;transform:rotate(-1.2deg)}
.dl-h span::before{background:var(--pal-pink,#FE3EA6);translate:var(--mx) var(--my);z-index:-2}
.dl-h span::after{border:2px solid var(--ink);z-index:-1}
.dl-lede{font-size:21px;line-height:1.45;max-width:36em}
.dl-order{display:inline-block;margin:10px 0 6px;font:600 11.5px/1 Oswald,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  background:var(--pal-yellow,#D6CF2A);border:1.5px solid var(--ink);padding:6px 10px 5px;box-shadow:3px 3px 0 var(--ink)}
/* ---- file rows ---- */
.dl-list{list-style:none;margin:12px 0 18px !important;padding:0 !important;display:flex;flex-direction:column;gap:14px}
.dl-row{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:18px;padding:14px 22px 14px 16px;background:var(--pal-paper,#FBF7EF);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--pal-pink,#FE3EA6)}
.dl-row[hidden]{display:none}
.dl-fmt{position:relative;isolation:isolate;display:grid;place-items:center;height:62px;font:700 15px/1 Oswald,sans-serif;letter-spacing:.08em;color:var(--ink);border:1.5px solid var(--ink);border-radius:50%}
.dl-fmt::before{content:"";position:absolute;inset:-1.5px;border-radius:50%;background:var(--pf,var(--pal-yellow,#D6CF2A));translate:var(--bx) var(--by);z-index:-1}
.dl-row:nth-child(2) .dl-fmt{--pf:var(--pal-pink,#FE3EA6)}
.dl-row:nth-child(3) .dl-fmt{--pf:var(--pal-teal,#7E978A)}
.dl-txt{font-size:17px !important;line-height:1.35}
.dl-txt b{display:block;font:600 13px/1.2 Oswald,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px}
/* ---- buttons: ink outline + ink letters in register, flat fill plate off-register; the plate slides into register on hover ---- */
.dlp .btn{position:relative;isolation:isolate;justify-content:center;text-decoration:none;font-weight:500;background:transparent;color:var(--ink);box-shadow:none;margin:0 var(--bx) var(--by) 0;--pf:var(--pal-pink,#FE3EA6)}
.dlp .btn::before{content:"";position:absolute;inset:-1.5px;background:var(--pf);translate:var(--bx) var(--by);z-index:-1;transition:translate .18s ease}
.dlp .btn.alt{--pf:var(--pal-yellow,#D6CF2A)}
.dlp .btn.tl{--pf:var(--pal-teal,#7E978A)}
.dlp .btn:hover,.dlp .btn:focus-visible{background:transparent;color:var(--ink)}
.dlp .btn:hover::before,.dlp .btn:focus-visible::before{translate:0 0}
/* ---- boxes ---- */
.dl-help,.dl-fallback,.dl-seals{margin:18px 0 16px;padding:16px 18px 8px;border:1.5px solid var(--ink);background:var(--pal-paper,#FBF7EF);box-shadow:4px 4px 0 var(--pal-teal,#7E978A)}
.dl-fallback[hidden],.dl-seals[hidden],.dl-files[hidden]{display:none}
.dl-help-k{margin:0 0 6px !important;font:600 13px/1.2 Oswald,sans-serif !important;letter-spacing:.2em;text-transform:uppercase;color:var(--pal-pink-deep,#CB016E)}
.dl-help p,.dl-fallback p,.dl-seals p{font-size:17px;line-height:1.45}
.dl-cta{margin-top:14px !important}
.dl-seals{position:relative;box-shadow:4px 4px 0 var(--pal-yellow,#D6CF2A)}
.dl-seal-grid{list-style:none;margin:10px 0 4px !important;padding:0 !important;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.dl-seal-grid a{display:block;transition:transform .2s}
.dl-seal-grid a:hover,.dl-seal-grid a:focus-visible{transform:rotate(-4deg) scale(1.06)}
.dl-seal-grid img{display:block;width:100%;height:auto}
.dl-small{font-size:15px !important;color:rgba(42,36,32,.7)}
.dl-foot{font-size:18px}
/* narrower desktops: the side drawings would touch the card, so they go above it as on phones */
@media (max-width:1180px){
  .dl-scene{position:relative;width:100%;max-width:760px;height:150px;margin:-10px 0 18px;flex:none}
  .dl-moon{right:4%;top:0;width:118px}
  .dl-ship{left:2%;top:34px;width:220px}
  .dl-person{position:relative;left:auto;bottom:auto;margin:30px auto 0;width:96px}
}
@media (max-width:760px){
  .dl-body{--mx:9px;--my:8px;--bx:7px;--by:6px}
  .dl-band{--bh:62px;width:calc(100% + 24px);margin:0 -12px 22px;padding:3px;grid-template-rows:calc(var(--bh) - 6px);gap:3px}
  .dl-band .cell{--hs:14px}
  .dl-scene{height:112px;margin:-6px 0 14px}
  .dl-moon{right:3%;top:0;width:82px}
  .dl-ship{left:0;top:30px;width:170px}
  .dl-person{width:78px;margin-top:24px}
  .dl-heart{width:26px;height:24px;margin-bottom:9px}
  .dl-h{margin:12px 0 12px}
  .dl-h span{padding:2px 18px 8px 12px}
  .dl-lede{font-size:18.5px}
  .dl-row{grid-template-columns:48px 1fr;gap:12px 12px;padding:12px 18px 12px 12px}
  .dl-fmt{height:48px;font-size:12.5px}
  .dl-row .btn{grid-column:1/-1;white-space:normal;text-align:center}
  .dl-txt{font-size:16px !important}
  .dl-help,.dl-fallback,.dl-seals{padding:14px 14px 6px}
  .dl-help p,.dl-fallback p,.dl-seals p{font-size:16px}
  .dl-seal-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .dl-fallback .btn{display:flex}
}
@media (prefers-reduced-motion:reduce){.dl-seal-grid a,.dlp .btn::before{transition:none}.dl-ship img,.dl-ship::before{animation:none}.dl-ship::before{opacity:.4}}
