/* ===== Tokens ===== */
:root{
  --bg: #FFB93E;
  --bg-2: #FF9F1C;
  --ink: #17130F;
  --panel: #FFF6E4;
  --green: #7FCB74;
  --green-2: #A9E39C;
  --pink: #FF4D8D;
  --bone: #FFFBF2;
  --line: rgba(23,19,15,0.16);

  --display: "Bangers", "Lilita One", system-ui, sans-serif;
  --body: "Manrope", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;

  --wrap: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg);
  background-image:
    radial-gradient(circle, rgba(23,19,15,0.14) 1.6px, transparent 1.6px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.5;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.eyebrow{
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pink);
  margin: 0 0 0.7rem;
}

.section-title{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.1rem, 3.8vw, 3.1rem);
  line-height: 1.05;
  margin: 0 0 1.1rem;
  letter-spacing: 0.015em;
  color: var(--ink);
  text-shadow: 3px 3px 0 var(--bone);
}

/* ===== Buttons (sticker style: hard offset shadow, thick border) ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-family: var(--body); font-weight:800; font-size:0.95rem;
  padding: 0.8rem 1.5rem; border-radius: 999px;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover{ transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn--green{ background: var(--green); color: var(--ink); }
.btn--x{ background: #fff; color: #0b0b0b; }
.btn--small{ padding: 0.5rem 1.1rem; font-size: 0.85rem; box-shadow: 3px 3px 0 var(--ink); }
.btn--big{ padding: 1rem 2rem; font-size: 1.05rem; }
.btn--dark{ background: var(--ink); color: var(--green-2); border-color: var(--ink); box-shadow: 4px 4px 0 rgba(23,19,15,0.35); }
.icon-x{ width: 1rem; height: 1rem; flex: none; }

/* ===== Nav ===== */
.nav{
  position: sticky; top:0; z-index: 400;
  display:flex; align-items:center; gap: 2rem;
  padding: 1rem clamp(1.2rem, 4vw, 3rem);
  background: var(--panel);
  border-bottom: 3px solid var(--ink);
}
.nav__logo{
  font-family: var(--display); font-size:2rem; color: var(--ink);
  margin-right: auto; display:flex; align-items:center; gap:0.3rem;
  letter-spacing: 0.02em;
}
.nav__logo .dot{ color: var(--pink); font-size: 1.6rem; }
.nav__links{ display:flex; gap: 1.8rem; font-weight:700; font-size:0.92rem; }
.nav__links a:hover{ color: var(--pink); }
.nav__burger{
  display:none; flex-direction:column; gap:5px; width:26px; padding:0;
  background:none; border:none; cursor:pointer;
}
.nav__burger span{ display:block; height:3px; background: var(--ink); border-radius:2px; }

@media (max-width: 760px){
  .nav__links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background: var(--panel);
    border-bottom: 3px solid var(--ink);
  }
  .nav__links a{ padding: 1rem 1.4rem; border-top: 1px solid var(--line); }
  .nav .btn--small{ display:none; }
  .nav__burger{ display:flex; }
}

/* ===== Hero ===== */
.hero{
  position: relative;
  max-width: 1320px; margin: 0 auto;
  display:flex; align-items:center; justify-content:center; gap: clamp(2rem, 6vw, 5rem);
  flex-wrap: wrap-reverse;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.2rem, 5vw, 4rem);
}
.hero__panel{
  position:relative; flex: 1 1 340px; max-width: 420px;
  display:flex; align-items:center; justify-content:center;
}
.burst{
  position:absolute; inset: -6%;
  background: var(--pink);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: 0.9;
  z-index:0;
}
.hero__glot{
  position:relative; z-index:1; width: 78%; max-width: 320px;
  filter: drop-shadow(4px 6px 0 var(--ink));
  transition: transform 0.25s ease;
}
.hero__glot:hover{ transform: rotate(-3deg) scale(1.04); }
.bubble{
  position:absolute; z-index:2;
  background: var(--bone); border: 3px solid var(--ink); border-radius: 999px;
  padding: 0.4rem 0.9rem; font-family: var(--mono); font-weight:700; font-size: 0.75rem;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-6deg);
}
.bubble--1{ top: 6%; left: -4%; }
.bubble--2{ bottom: 10%; right: -6%; transform: rotate(5deg); }

.hero__content{ position:relative; z-index:2; max-width: 560px; flex: 1 1 420px; }
.hero__tagline{
  font-family: var(--display); font-weight:400;
  font-size: clamp(2.6rem, 6.4vw, 4.4rem);
  line-height: 1; margin: 0 0 1rem; color: var(--ink);
  text-shadow: 4px 4px 0 var(--bone);
}
.hero__sub{ color: var(--ink); font-size: 1.05rem; margin: 0 0 2rem; max-width: 42ch; font-weight: 600; }
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; }

@media (max-width: 760px){
  .hero{ text-align:center; justify-content:center; padding-top: 3rem; }
  .hero__sub{ margin-left:auto; margin-right:auto; }
  .hero__cta{ justify-content:center; }
  .bubble{ font-size: 0.68rem; padding: 0.3rem 0.7rem; }
}

/* ===== Marquee ===== */
.marquee{
  background: var(--ink); color: var(--bone);
  overflow: hidden; white-space: nowrap;
  padding: 0.75rem 0;
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
}
.marquee__track{
  display:inline-flex;
  font-family: var(--mono); font-weight:700; font-size: 0.95rem; letter-spacing:0.04em;
  animation: scroll-left 22s linear infinite;
}
@keyframes scroll-left{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ===== About ===== */
.about{
  max-width: var(--wrap); margin: 0 auto;
  display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 6vw, 5rem);
  align-items:center;
  padding: clamp(4rem, 9vw, 7rem) clamp(1.2rem, 4vw, 3rem);
}
.about__art{ display:flex; justify-content:center; }
.panel-frame{
  width: min(100%, 300px); background: var(--panel);
  border: 4px solid var(--ink); border-radius: 18px;
  padding: 1rem; box-shadow: 7px 7px 0 var(--ink);
  transform: rotate(-3deg);
  transition: transform 0.3s ease;
}
.about__art:hover .panel-frame{ transform: rotate(-1deg) scale(1.02); }
.about__text p{ color: var(--ink); font-size:1.02rem; font-weight:600; margin: 0 0 1rem; max-width: 46ch; }

.stats{
  display:grid; grid-template-columns: repeat(2, minmax(140px,1fr));
  gap: 0.9rem; margin: 1.6rem 0 0; padding: 1.2rem;
  background: var(--panel); border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 5px 5px 0 var(--ink);
}
.stats__item dt{
  font-family: var(--mono); font-size: 0.7rem; text-transform:uppercase; letter-spacing:0.08em;
  color: var(--ink); opacity: 0.65; margin: 0 0 0.25rem;
}
.stats__item dd{
  font-family: var(--mono); font-weight:700; font-size: 1.05rem; margin:0; color: var(--pink);
}

@media (max-width: 860px){
  .about{ grid-template-columns: 1fr; text-align:center; }
  .about__text p{ margin-left:auto; margin-right:auto; }
  .stats{ grid-template-columns: repeat(2, 1fr); }
  .about__art{ order: -1; }
}

/* ===== Comic panel gallery ===== */
.comics{ max-width: var(--wrap); margin: 0 auto; padding: clamp(3rem, 8vw, 5rem) clamp(1.2rem, 4vw, 3rem) clamp(6rem, 10vw, 9rem); }
.comics__head{ text-align:center; max-width: 640px; margin: 0 auto 3rem; }
.comics__head .eyebrow{ text-align:center; }

.comics__grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem;
}
.panel{
  --rot: 0deg;
  background: var(--panel); border: 4px solid var(--ink); border-radius: 16px;
  padding: 0.8rem 0.8rem 1.3rem; box-shadow: 6px 6px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.panel:hover{ transform: rotate(0deg) translate(-3px,-3px) !important; box-shadow: 9px 9px 0 var(--ink); }
.panel.reveal{ transform: rotate(var(--rot)) translateY(28px); opacity:0; transition: transform 0.7s ease, opacity 0.7s ease, box-shadow 0.15s ease; }
.panel.reveal.is-visible{ transform: rotate(var(--rot)) translateY(0); opacity:1; }
.comics__grid .panel:nth-child(1){ --rot: -2deg; }
.comics__grid .panel:nth-child(2){ --rot: 1.6deg; }
.comics__grid .panel:nth-child(3){ --rot: -1.2deg; }
.comics__grid .panel:nth-child(4){ --rot: 2deg; }
.panel__img{
  border: 3px solid var(--ink); border-radius: 10px; overflow:hidden; margin-bottom: 0.9rem;
  background: var(--bg);
}
.panel__img img{ width:100%; height: 190px; object-fit: contain; }
.panel__tag{
  display:inline-block; font-family: var(--display); font-size: 1rem; letter-spacing: 0.02em;
  background: var(--pink); color: var(--bone);
  padding: 0.2rem 0.7rem; border: 2px solid var(--ink); border-radius: 999px; margin-bottom: 0.6rem;
}
.panel__caption{ font-size: 0.92rem; color: var(--ink); font-weight:600; margin:0; }

/* ===== Join (inverted) ===== */
.join{ background: var(--green); border-top: 4px solid var(--ink); padding: clamp(4rem, 9vw, 7rem) 1.2rem; }
.join__title{
  font-family: var(--display); font-weight:400; color: var(--ink);
  font-size: clamp(2.8rem, 6.4vw, 4.6rem); line-height:0.98; margin: 0 0 2.2rem;
  text-shadow: 3px 3px 0 var(--bone);
}
.join__inner{ max-width: 640px; margin: 0 auto; text-align:center; }
.join__links{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.eyebrow--dark{ color: var(--ink); opacity: 0.7; }

/* ===== Footer ===== */
.footer{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.5rem;
  padding: 1.4rem clamp(1.2rem, 4vw, 3rem);
  font-family: var(--mono); font-size: 0.78rem; color: var(--ink);
  background: var(--panel); border-top: 3px solid var(--ink);
}

/* ===== Scroll reveal (generic) ===== */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .panel, .panel-frame, .btn{ transition:none !important; }
  .marquee__track{ animation:none !important; }
  .reveal, .panel.reveal{ opacity:1; transform:none; transition:none; }
}