/* Rip And Print — v2 identity: loud hobby-shop / rip-night energy.
   Near-black base, off-white light sections, hot red-orange + electric yellow.
   Pure CSS motifs: torn edges, halftone dots, starburst + sticker badges.
   No external fonts, no CDNs, no trackers. */
:root{
  --ink:#101014;          /* near-black base */
  --ink-2:#17171d;
  --paper:#FAF7F2;         /* off-white */
  --card:#FFFDF8;
  --hot:#FF4A1F;           /* hot red-orange accent */
  --hot-dark:#D63A12;
  --volt:#FFC800;          /* electric yellow — badges & price pops only */
  --gold:#C08A1E;          /* calendars warmth */
  --pink:#FF7BAC;          /* squishies pastel */
  --mint:#2FBF9B;
  --spook:#8A3FFC;         /* halloween chip only */
  --muted-d:#A7A3B0;       /* muted text on dark */
  --muted-l:#5D5A63;       /* muted text on light */
  --radius:16px;
  --display:"Arial Narrow Bold","Franklin Gothic Demi","Franklin Gothic Medium",Impact,"Helvetica Neue",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);background:var(--ink);color:var(--paper);
  line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--hot-dark)}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
:focus-visible{outline:3px solid var(--volt);outline-offset:2px}

/* ---------- Header / nav ---------- */
.site-head{background:var(--ink);color:var(--paper);position:sticky;top:0;z-index:20;
  border-bottom:4px solid var(--hot);box-shadow:0 4px 0 rgba(0,0,0,.35)}
.head-in{display:flex;align-items:center;gap:14px;padding:12px 0}
.logo{font-family:var(--display);font-weight:900;font-size:1.5rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--paper);text-decoration:none;line-height:1}
.logo span{color:var(--hot)}
.logo small{display:block;font-family:var(--body);font-size:.62rem;font-weight:700;
  letter-spacing:3px;color:var(--volt);margin-top:3px}
.nav-toggle{margin-left:auto;background:var(--volt);border:2.5px solid var(--ink);color:var(--ink);
  border-radius:9px;padding:7px 13px;font-size:.95rem;font-weight:800;cursor:pointer;
  box-shadow:3px 3px 0 rgba(0,0,0,.5);text-transform:uppercase}
.main-nav{display:none;background:var(--ink-2)}
.main-nav.open{display:block}
.main-nav ul{list-style:none;margin:0;padding:8px 0 14px;display:flex;flex-direction:column;gap:4px}
.main-nav a{color:var(--paper);text-decoration:none;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;font-size:.9rem;padding:9px 14px;border-radius:999px;display:block}
.main-nav a:hover{background:rgba(250,247,242,.1);color:var(--volt)}
.main-nav a.active{background:var(--volt);color:var(--ink)}
@media(min-width:820px){
  .nav-toggle{display:none}
  .main-nav{display:block;background:transparent}
  .main-nav ul{flex-direction:row;flex-wrap:wrap;padding:0;gap:4px}
  .head-in{flex-wrap:wrap}
  .main-nav{margin-left:auto}
  .main-nav a{padding:8px 13px}
}

/* ---------- Heroes (every page opens with a big headline banner) ---------- */
.hero,.page-hero{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);
  padding:52px 0 64px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),98% 100%,96% calc(100% - 8px),93% 100%,90% calc(100% - 12px),87% 100%,84% calc(100% - 7px),81% 100%,78% calc(100% - 11px),75% 100%,72% calc(100% - 8px),69% 100%,66% calc(100% - 12px),63% 100%,60% calc(100% - 7px),57% 100%,54% calc(100% - 10px),51% 100%,48% calc(100% - 8px),45% 100%,42% calc(100% - 12px),39% 100%,36% calc(100% - 7px),33% 100%,30% calc(100% - 11px),27% 100%,24% calc(100% - 8px),21% 100%,18% calc(100% - 12px),15% 100%,12% calc(100% - 7px),9% 100%,6% calc(100% - 10px),3% 100%,0 calc(100% - 8px))}
.hero::before,.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(250,247,242,.13) 1.5px,transparent 1.7px);
  background-size:15px 15px}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 300px at 88% -10%,rgba(255,74,31,.4),transparent 65%)}
.hero .wrap,.page-hero .wrap{position:relative;z-index:1}
.kicker{display:inline-block;background:var(--hot);color:#fff;font-weight:900;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;padding:6px 13px;
  border:2.5px solid var(--ink);border-radius:6px;transform:rotate(-1.6deg);
  box-shadow:3px 3px 0 rgba(0,0,0,.45);margin-bottom:16px}
.hero h1,.page-hero h1{font-family:var(--display);font-weight:900;text-transform:uppercase;
  letter-spacing:.005em;line-height:.94;margin:0 0 14px;font-size:clamp(2.7rem,9.5vw,4.8rem)}
.hero h1{font-size:clamp(3rem,11vw,5.6rem)}
.hero h1 .hl,.page-hero h1 .hl{color:var(--hot)}
.hero p.lede,.page-hero p.lede{font-size:1.13rem;color:#E9E4D8;max-width:36em;margin:0 0 20px}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* Hero variants */
.hero-cal{background:#F4E8CF;color:var(--ink)}
.hero-cal::before{background-image:radial-gradient(rgba(192,138,30,.22) 1.5px,transparent 1.7px)}
.hero-cal .kicker{background:var(--gold)}
.hero-cal h1 .hl{color:var(--gold);text-decoration:underline;text-decoration-color:var(--hot);
  text-decoration-thickness:5px;text-underline-offset:7px}
.hero-cal p.lede{color:#4A4232}
.hero-stick{background:var(--volt);color:var(--ink)}
.hero-stick::before{background-image:radial-gradient(rgba(16,16,20,.16) 1.5px,transparent 1.7px)}
.hero-stick .kicker{background:var(--ink);color:var(--volt)}
.hero-stick h1 .hl{color:var(--hot-dark)}
.hero-stick p.lede{color:#3D3200}
.hero-pulls h1{background:linear-gradient(92deg,#7DF9FF 0%,#C792FF 22%,#FF8FAB 45%,#FFE29A 68%,#7DF9FF 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;animation:holo 7s linear infinite}
@keyframes holo{to{background-position:220% 0}}
.hero-squish{background:linear-gradient(155deg,#FFE3EF 0%,#FDEBFF 52%,#DFF7EC 100%);color:var(--ink)}
.hero-squish::before{background-image:radial-gradient(rgba(255,123,171,.3) 1.5px,transparent 1.7px)}
.hero-squish .kicker{background:var(--pink);color:var(--ink)}
.hero-squish h1 .hl{color:#E7548F}
.hero-squish p.lede{color:#54434E}

/* Buttons */
.btn{display:inline-block;background:var(--hot);color:#fff;font-weight:900;text-transform:uppercase;
  letter-spacing:.05em;text-decoration:none;padding:13px 22px;border-radius:11px;
  border:2.5px solid var(--ink);cursor:pointer;font-size:1rem;box-shadow:4px 4px 0 rgba(0,0,0,.55)}
.btn:hover{background:var(--hot-dark)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(0,0,0,.55)}
.btn.ghost{background:transparent;border-color:var(--paper);color:var(--paper);box-shadow:4px 4px 0 rgba(0,0,0,.35)}
.btn.ghost:hover{border-color:var(--volt);color:var(--volt)}

/* Sticker + starburst badges */
.sticker{display:inline-block;font-family:var(--display);font-weight:900;text-transform:uppercase;
  letter-spacing:.06em;background:var(--volt);color:var(--ink);border:2.5px solid var(--ink);
  border-radius:999px;padding:7px 15px;font-size:.88rem;transform:rotate(-2deg);
  box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.burst{position:absolute;width:92px;height:92px;background:var(--volt);color:var(--ink);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--display);font-weight:900;font-size:.6rem;line-height:1.1;
  letter-spacing:.05em;text-transform:uppercase;padding:16px;z-index:3;
  transform:rotate(11deg);filter:drop-shadow(3px 4px 0 rgba(0,0,0,.4));
  clip-path:polygon(50% 0%,59.6% 14.3%,75% 6.7%,76.2% 23.8%,93.3% 25%,85.7% 40.4%,100% 50%,85.7% 59.6%,93.3% 75%,76.2% 76.2%,75% 93.3%,59.6% 85.7%,50% 100%,40.4% 85.7%,25% 93.3%,23.8% 76.2%,6.7% 75%,14.3% 59.6%,0% 50%,14.3% 40.4%,6.7% 25%,23.8% 23.8%,25% 6.7%,40.4% 14.3%)}
.burst-corner{top:10px;right:10px}
.burst-pink{background:var(--pink)}
.burst-hero{top:30px;right:4%}
@media(max-width:760px){.burst-hero{display:none}}
.sticker-pink{background:var(--pink)}
.more-link{color:var(--volt);font-weight:800}
section.alt .more-link,section.alt-pastel .more-link{color:var(--hot-dark)}

/* ---------- Sections (alternating dark / light) ---------- */
section{padding:32px 0 10px}
section.alt{background:var(--paper);color:var(--ink)}
section.alt-pastel{background:linear-gradient(180deg,#FFF3F8,#F2FBF6);color:var(--ink)}
h2.sec{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:.01em;
  font-size:1.9rem;line-height:1;margin:0 0 6px;color:var(--paper)}
section.alt h2.sec,section.alt-pastel h2.sec{color:var(--ink)}
.sec-sub{color:var(--muted-d);margin:0 0 18px}
section.alt .sec-sub,section.alt-pastel .sec-sub{color:var(--muted-l)}

/* Shirts family chips — each family reads differently */
.fam-sec .sec{display:inline-block;padding:9px 16px 7px;border:2.5px solid var(--ink);
  border-radius:10px;box-shadow:4px 4px 0 rgba(0,0,0,.4);margin-bottom:10px}
section.fam-trucker h2.sec{background:var(--volt);color:var(--ink);transform:rotate(-1deg)}
section.fam-faith h2.sec{background:#F4E8CF;color:#7A5410;border-color:#7A5410;transform:rotate(.6deg)}
section.fam-christmas h2.sec{background:var(--hot);color:#fff;transform:rotate(-.6deg)}
section.fam-halloween h2.sec{background:var(--spook);color:#fff;transform:rotate(1deg)}

/* ---------- Cards ---------- */
.grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:560px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.grid{grid-template-columns:1fr 1fr 1fr}}
.card{background:var(--card);color:var(--ink);border:2.5px solid var(--ink);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:6px 6px 0 rgba(0,0,0,.35)}
@media(hover:hover){.card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(0,0,0,.35)}}
.card-art{position:relative;aspect-ratio:4/3.4;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}
.card-art img.art-img{width:88%;height:88%;object-fit:contain;margin-top:4%}
.card-art.photo img{width:100%;height:100%;object-fit:cover;margin:0}
.card-art .art-name{font-family:var(--display);font-weight:900;font-size:1.6rem;line-height:1.08;
  text-align:center;color:#fff;padding:15% 12% 0;text-transform:uppercase;letter-spacing:.01em}
.card-art .art-tag{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:.72rem;
  font-weight:700;letter-spacing:1.8px;color:rgba(255,255,255,.82);text-transform:uppercase}
.art-navy{background:radial-gradient(420px 240px at 85% 0%,rgba(255,74,31,.35),transparent 60%),
  radial-gradient(rgba(250,247,242,.12) 1.5px,transparent 1.7px) 0 0/15px 15px,var(--ink-2)}
.art-black{background:radial-gradient(rgba(255,74,31,.14) 1.5px,transparent 1.7px) 0 0/15px 15px,
  linear-gradient(160deg,#26262B,#0C0C0F)}
.art-festive{background:linear-gradient(160deg,#8C2222,#430D10)}
.art-faith{background:linear-gradient(160deg,#4A3512,#1B1306)}
.art-faith .art-name{color:#F3D489}
.card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-body h3{margin:0;font-size:1.08rem;color:var(--ink)}
.fam{font-size:.72rem;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--hot-dark)}
.price-line{margin:0;font-size:1.05rem}
.price-line .price{font-weight:900;color:var(--ink);font-size:1.25rem;padding:0 .14em;
  background:linear-gradient(transparent 58%,var(--volt) 58%)}
.pickers{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pickers label{font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-l);display:flex;flex-direction:column;gap:4px}
.pickers select{padding:9px;border:2px solid var(--ink);border-radius:9px;font-size:.95rem;
  font-weight:600;background:#fff;color:var(--ink);width:100%;text-transform:none;letter-spacing:0}
.fixed-note{font-size:.85rem;color:var(--muted-l);margin:0}
.buy-btn{margin-top:auto;background:var(--hot);color:#fff;text-align:center;font-weight:900;
  text-transform:uppercase;letter-spacing:.06em;padding:12px;border-radius:10px;text-decoration:none;
  display:block;border:2.5px solid var(--ink);box-shadow:4px 4px 0 rgba(16,16,20,.85)}
.buy-btn:hover{background:var(--hot-dark)}
.buy-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(16,16,20,.85)}
.ebay-btn{background:var(--volt);color:var(--ink)}
.ebay-btn:hover{background:#E6B400}
.desc{font-size:.92rem;color:var(--muted-l);margin:0}

/* Feature band */
.band{background:var(--card);color:var(--ink);border:2.5px solid var(--ink);border-radius:18px;
  overflow:hidden;display:grid;grid-template-columns:1fr;margin:8px 0 4px;
  box-shadow:6px 6px 0 rgba(0,0,0,.35)}
.band img{width:100%;height:100%;object-fit:cover;min-height:200px}
.band .band-body{padding:20px}
.band h3{font-family:var(--display);font-weight:900;text-transform:uppercase;margin:0 0 6px;
  font-size:1.55rem;line-height:1.02;color:var(--ink)}
@media(min-width:760px){.band{grid-template-columns:1fr 1fr}}

/* Notice / coming soon (squishies) */
.notice{background:#FFF5F9;border:2.5px dashed var(--pink);border-radius:var(--radius);
  padding:22px;text-align:center;color:var(--ink)}
.notice h3{font-family:var(--display);font-weight:900;text-transform:uppercase;margin:0 0 6px;
  color:var(--ink);font-size:1.45rem}
.notice p{margin:0;color:var(--muted-l)}

/* About page body copy */
.prose p{max-width:44em}
.prose a{font-weight:700}

/* Footer */
footer{background:#0B0B0E;color:#CFCBD6;margin-top:46px;padding:30px 0 36px;font-size:.92rem;
  border-top:5px solid var(--hot)}
footer a{color:var(--paper)}
footer .cols{display:grid;gap:18px}
@media(min-width:760px){footer .cols{grid-template-columns:1fr 1fr 1fr}}
footer h4{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:.04em;
  color:var(--volt);margin:0 0 8px;font-size:1.05rem}
footer p{margin:0 0 6px}
.draft-note{border-top:1px solid #2B2B33;margin-top:20px;padding-top:14px;color:#8B8798;font-size:.82rem}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(80px);
  background:var(--ink);border:2.5px solid var(--volt);color:var(--paper);padding:12px 18px;
  border-radius:10px;font-weight:700;box-shadow:0 6px 24px rgba(0,0,0,.45);
  transition:transform .25s ease;z-index:50;max-width:92vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}