:root{
  --pink:#f6c7da;
  --pink-200:#f9d6e4;
  --pink-300:#fbdfea;
  --ink:#2b2230;
  --bg:#fff7fb;
  --card:#ffffff;
  --accent:#ff8fb1;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:18px;
  --pride-red:#e40303;
  --pride-orange:#ff8c00;
  --pride-yellow:#ffed00;
  --pride-green:#008026;
  --pride-blue:#004dff;
  --pride-purple:#750787;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);}

.container{max-width:1050px;margin-inline:auto;padding:24px}
a{color:#5a2a6a;text-decoration:none}
a:hover{text-decoration:underline}

header.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(160%) blur(6px);
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.82));
  border-bottom:1px solid rgba(0,0,0,.06);
  display: grid;
}

.nav{display:flex;align-items:center;gap:18px;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:48px;height:48px;border-radius:50%;box-shadow:var(--shadow)}
.brand .title{font-weight:900;letter-spacing:.3px}
.badge{background:var(--pink);padding:2px 8px;border-radius:999px;font-size:.75rem;border:1px solid rgba(0,0,0,.05)}

.nav{
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
}

nav ul{display:flex;gap:12px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{display:inline-block;padding:8px 10px;border-radius:12px;background:transparent;font-weight:600}
nav a.active, nav a:hover{background:var(--pink-300);text-decoration:none}

footer{margin-top:60px;border-top:1px dashed rgba(0,0,0,.15);}
footer .container{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
footer small{opacity:.7}

.hero{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(45deg,var(--pink-200),#ffeaf3);
  min-height:360px; display:grid; place-items:center; box-shadow:var(--shadow);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:url("../assets/trashimals-splash.png") center/cover no-repeat;
  filter:saturate(120%) contrast(92%) brightness(95%);
  opacity:.35;
}
.hero .content{position:relative;text-align:center;padding:48px}
.hero h1{font-size:clamp(2rem,4.5vw,3.2rem);margin:.2em 0}
.hero p{max-width:760px;margin:0 auto 18px auto;font-size:1.1rem;line-height:1.6}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.btn{display:inline-block;padding:12px 18px;border-radius:14px;border:2px solid #0000;background:#fff;font-weight:700;box-shadow:var(--shadow)}
.btn.primary{background:var(--pink);border-color:rgba(0,0,0,.06)}
.btn.primary:hover{transform:translateY(-1px);}

.card{
  background:var(--card);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.06);
}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.section{padding:28px 0}
.section h2{margin:0 0 12px 0;font-size:1.6rem}

.ribbon{height:10px;border-radius:999px;background:linear-gradient(90deg,
  rgba(228,3,3,1), rgba(255,140,0,1), rgba(255,237,0,1), rgba(0,128,38,1), rgba(0,77,255,1), rgba(117,7,135,1));box-shadow:var(--shadow);}

.notice{background:var(--pink-300);border-left:6px solid var(--accent);padding:14px;border-radius:14px}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.gallery img{width:100%;height:220px;object-fit:cover;border-radius:14px;box-shadow:var(--shadow)}

.staff-card{display:flex;gap:12px;align-items:center}
.staff-card img{width:72px;height:72px;border-radius:999px;object-fit:cover;box-shadow:var(--shadow)}
.staff-card .role{font-size:.9rem;opacity:.75}

.merch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.merch-item img{width:100%;height:200px;object-fit:cover;border-radius:14px;border:1px solid rgba(0,0,0,.06);box-shadow:var(--shadow)}
.price{font-weight:800}

.pride-accent{
  background:linear-gradient(120deg,#ffffff 0 55%, transparent 55%) , 
     linear-gradient(90deg, rgba(228,3,3,0.15), rgba(255,140,0,0.15), rgba(255,237,0,0.15), rgba(0,128,38,0.15), rgba(0,77,255,0.15), rgba(117,7,135,0.15));
  background-clip:padding-box,border-box;
  border:4px solid transparent; border-radius:18px;
}

/* mobile nav */
.burger{display:none}
@media (max-width:720px){
  .burger{display:inline-flex;gap:6px;flex-direction:column;border:0;background:#fff;padding:10px;border-radius:12px;box-shadow:var(--shadow)}
  .burger span{width:22px;height:2px;background:#000;border-radius:2px}
  nav ul{display:none;flex-direction:column;gap:6px;background:#fff;border:1px solid rgba(0,0,0,.06);padding:10px;border-radius:12px;box-shadow:var(--shadow)}
  #nav.open nav ul{
    display: block ruby;
    max-width: 95vw;
    position: relative;
    font-size: small;
    width: 100%;
  }
}

.pagebreak{
  position: relative;
  
}


body {
  font-family: Arial, sans-serif;
  background: none;
  color: #333;
  padding: 2rem 0;
  margin: 0;
}

.container {
  width: 90%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  position: relative;
  background: none;
}

.container-merch {
  width: 90%;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  position: relative;
  background: none;
}

.container-gallery {
  width: 90%;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  position: relative;
  background: none;
}

.content {
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  padding: 0;
  position: relative;
  overflow: hidden;
}

.card-header {
  padding: 1rem;
  font-size: 1.3rem;
  font-weight: bold;
  color: white;
  text-align: center;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, #1e90ff, #ff69b4, #ffa500, #800080);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.page {
  display: none;
  position: relative;
  opacity: 0;
  transition: all 0.5s ease;
  padding: 2rem;
}

.page.active {
  display: block;
  opacity: 1;
}

h2 {
  margin-top: 0;
  margin-bottom: 0.8rem;
}

ul, ol {
  padding-left: 1.4rem;
  margin-bottom: 1rem;
}

p {
  margin-bottom: 1rem;
  line-height: 1.5;
}

.nav {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
}

.nav button {
  background: #333;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s;
}

.nav button:hover {
  background: #555;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.progress-container {
  width: 100%;
  height: 14px;
  background: #ddd;
  border-radius: 7px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #1e90ff, #ff69b4, #ffa500, #800080);
  width: 0%;
  transition: width 0.5s ease;
}

.progress-text {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 4px;
  font-weight: bold;
}