// Sticker Stack — responsive full-bleed site version with tweak support.
// Reads TR_MEMBERS, TR_TOPICS, TR_INTRO, TR_CTAS from window.

function StickerSite() {
  const [t, setTweak] = useTweaks(window.TR_TWEAK_DEFAULTS || {
    theme: 'solar', headline: 0, animate: true, rotation: 1.5, showAtoms: true, viewport: 'auto',
  });
  const theme = THEMES[t.theme] || THEMES.solar;
  const headline = HEADLINES[t.headline] || HEADLINES[0];

  const M = window.TR_MEMBERS;
  const T = window.TR_TOPICS;
  const I = window.TR_INTRO;
  const CTAs = window.TR_CTAS;

  const r = (i) => `rotate(${(([-1.5,1.2,-0.6,1.8,-1, 2])[i % 6]) * t.rotation}deg)`;

  return (
    <div className={"ss-stage ss-vp-" + (t.viewport || 'auto')}>
    <div className={"ss-root ss-theme-" + t.theme + (t.animate ? ' ss-animated' : '')}
         style={{
           '--accent-1': theme.accent1,
           '--accent-2': theme.accent2,
           '--accent-3': theme.accent3,
           '--bg-1': theme.bg1,
           '--bg-2': theme.bg2,
           '--bg-3': theme.bg3,
           '--ink': theme.ink,
           '--paper': theme.paper,
         }}>
      {t.animate && <Sunburst/>}
      {!t.animate && <SunburstStatic/>}
      {t.showAtoms && <AtomField animate={t.animate}/>}

      {/* TOP BAR */}
      <header className="ss-nav">
        <a className="ss-nav-brand" href="#top">
          <img src="assets/logo.png" alt=""/>
          <span>TOTALLY RAD</span>
        </a>
        <nav className="ss-nav-links">
          <a href="#story">Story</a>
          <a href="#themen">Themen</a>
          <a href="#crew">Crew</a>
          <a href="#mitmachen">Mitmachen</a>
        </nav>
        <a className="ss-nav-cta" href="#mitmachen">Mitmachen →</a>
      </header>

      {/* HERO */}
      <section id="top" className="ss-hero">
        <div className="ss-hero-left">
          <div className="ss-eyebrow">⚛︎ &nbsp;DAS RADIOAKTIVE TEAM &nbsp;⚛︎</div>
          <h1 className="ss-h1">
            <span className="ss-h1-1">{headline.line1}</span>
            <span className="ss-h1-2">{headline.line2}</span>
            <span className="ss-h1-3">{headline.line3}</span>
          </h1>
          <p className="ss-lead">
            Wir sind <b>Totally Rad</b> — fünf Köpfe, ein Schlammbad voller Radioaktivität, und eine
            Mission: Wissen weitergeben. Verständlich, ehrlich, mit ordentlich Krawall.
          </p>
          <div className="ss-hero-ctas">
            <a className="ss-btn ss-btn-1" href="mitmachen.html">Mitmachen<span>→</span></a>
            <a className="ss-btn ss-btn-2" href="https://www.youtube.com/@TotallyRadiation" target="_blank" rel="noopener noreferrer">YouTube<span>▶</span></a>
            <a className="ss-btn ss-btn-3" href="schulbesuch.html">Schulbesuch<span>◎</span></a>
          </div>
          <div className="ss-warn">
            <span className="ss-warn-icon">⚠</span>
            <span>Achtung: Inhalt enthält Wissenschaft. Nur für Neugierige ab 18.</span>
          </div>
        </div>
        <div className="ss-hero-right">
          <img className="ss-logo" src="assets/logo.png" alt="Totally Rad Logo" />
          <StickerBadge text="SEIT 2024" rotate={12} top={-10} right={-20} bg="var(--ink)" fg="var(--accent-1)" />
          <StickerBadge text="STRAHLEND" rotate={-9} bottom={-10} left={-30} bg="var(--accent-1)" fg="var(--ink)" />
        </div>
      </section>

      {/* STORY */}
      <section id="story" className="ss-story">
        <Sticker rot={-1.5} bg="#FFF8DA" w={760}>
          <h3 className="ss-stick-eyebrow">¶ Die kurze Vorgeschichte</h3>
          <p className="ss-stick-lead">{I.hook}</p>
          {I.story.map((s, i) => <p key={i} className="ss-stick-body">{s}</p>)}
        </Sticker>
        <Sticker rot={2.5} bg="var(--accent-1)" w={420} pop>
          <h3 className="ss-stick-q">{I.reallyAll.q}</h3>
          <p className="ss-stick-a">{I.reallyAll.a}</p>
        </Sticker>
        <Sticker rot={-2} bg="var(--accent-3)" w={520} fg="#fff">
          <p className="ss-stick-egg">{I.egg}</p>
        </Sticker>
        <Sticker rot={1.5} bg="var(--accent-2)" w={580}>
          <p className="ss-stick-egg">{I.closing}</p>
        </Sticker>
      </section>

      {/* MISSION MARQUEE */}
      <section className="ss-mission">
        <div className="ss-mission-strip">
          {Array(20).fill('TOTALLY RAD ⚛︎').map((s,i)=><span key={i}>{s}</span>)}
        </div>
      </section>

      {/* TOPICS */}
      <section id="themen" className="ss-topics">
        <h2 className="ss-h2">
          <span className="ss-h2-knockout">Wirklich alles?</span>
          <span className="ss-h2-stamp">JA — ALLES.</span>
        </h2>
        <p className="ss-topics-intro">Von Analytik bis Zwischenfälle: das volle Spektrum der Radioaktivität.</p>
        <div className="ss-topic-grid">
          {T.map((tt, i) => (
            <div key={tt.title} className="ss-topic-card" style={{transform: r(i)}}>
              <div className="ss-topic-icon">{tt.icon}</div>
              <div className="ss-topic-title">{tt.title}</div>
              <div className="ss-topic-desc">{tt.desc}</div>
            </div>
          ))}
        </div>
      </section>

      {/* TEAM */}
      <section id="crew" className="ss-team">
        <div className="ss-team-head">
          <h2 className="ss-h2 ss-h2-team">Die Crew.</h2>
          <p className="ss-team-sub">Fünf Profis. Ein Schlammbad. Null Langeweile.</p>
        </div>
        <div className="ss-team-grid">
          {M.map((m, i) => (
            <article key={m.id} className="ss-member" style={{ '--mc': m.color, transform: r(i) }}>
              <div className="ss-member-photo">
                <img src={m.img} alt={m.name} />
                <span className="ss-member-pin">№ 0{i+1}</span>
              </div>
              <div className="ss-member-body">
                <h3 className="ss-member-name">{m.name}</h3>
                <div className="ss-member-role">{m.role}</div>
                <p className="ss-member-bio">{m.bio}</p>
                <div className="ss-member-tags">
                  {m.tags.map(tag => <span key={tag} className="ss-tag">{tag}</span>)}
                </div>
                <div className="ss-member-fact">▸ {m.fact}</div>
              </div>
            </article>
          ))}
          <article className="ss-member ss-member-empty" style={{transform: r(5)}}>
            <div className="ss-empty-photo">
              <div className="ss-empty-q">?</div>
              <span className="ss-member-pin">№ 06</span>
            </div>
            <div className="ss-member-body">
              <h3 className="ss-member-name">Du?</h3>
              <div className="ss-member-role">Platz frei in der Crew</div>
              <p className="ss-member-bio">
                Wir suchen Neugierige, die keine Angst vorm Geigerzähler haben. Egal ob Azubi,
                Profi oder begeisterter Quereinsteiger — meld dich.
              </p>
              <a className="ss-btn ss-btn-1 ss-btn-sm" href="#mitmachen">Bewerben →</a>
            </div>
          </article>
        </div>
      </section>

      {/* BIG CTA */}
      <section id="mitmachen" className="ss-cta">
        <div className="ss-cta-card">
          <h2 className="ss-cta-h">Werde Experte für radioaktive<br/>Überraschungs-Eier.</h2>
          <p className="ss-cta-p">{I.callout}</p>
          <div className="ss-cta-row">
            {CTAs.map((c, i) => {
              const isYT = c.kind === 'yt';
              const href = c.kind === 'join' ? 'mitmachen.html'
                         : c.kind === 'school' ? 'schulbesuch.html'
                         : 'https://www.youtube.com/@TotallyRadiation';
              return (
                <a key={c.kind} className="ss-cta-tile" href={href}
                   target={isYT ? '_blank' : undefined}
                   rel={isYT ? 'noopener noreferrer' : undefined}
                   id={isYT ? 'youtube' : c.kind === 'school' ? 'schule' : undefined}>
                  <div className="ss-cta-tile-title">{c.title}</div>
                  <div className="ss-cta-tile-sub">{c.sub}</div>
                  <span className="ss-cta-tile-link">{c.verb} →</span>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="ss-foot">
        <div className="ss-foot-tag">SEID NEUGIERIG · BLEIBT TOTALLY RAD · SEID NEUGIERIG · BLEIBT TOTALLY RAD ·</div>
        <div className="ss-foot-grid">
          <img className="ss-foot-logo" src="assets/logo.png" alt="" />
          <div>
            <div className="ss-foot-title">Totally Rad</div>
            <div className="ss-foot-sub">Das radioaktive Edutainment-Team.</div>
          </div>
          <div className="ss-foot-col">
            <div className="ss-foot-h">Kontakt</div>
            <a href="mailto:info@nuctecsolutions.com">info@nuctecsolutions.com</a>
            <a href="https://www.youtube.com/@TotallyRadiation" target="_blank" rel="noopener noreferrer">YouTube → @TotallyRadiation</a>
            <a href="schulbesuch.html">Schulbesuch buchen</a>
          </div>
          <div className="ss-foot-col">
            <div className="ss-foot-h">Rechtliches</div>
            <a href="impressum.html">Impressum</a>
            <a href="datenschutz.html">Datenschutzerklärung</a>
            <a href="#" data-tr-consent="open">Cookie-Einstellungen</a>
          </div>
        </div>
        <div className="ss-foot-tiny">© 2026 Totally Rad — radioaktiv zertifiziert lustig.</div>
      </footer>

      {/* TWEAKS */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Vorschau"/>
        <TweakRadio label="Viewport" value={t.viewport || 'auto'}
                    options={['auto','desktop','tablet','mobile']}
                    onChange={(v) => setTweak('viewport', v)}/>

        <TweakSection label="Theme"/>
        <TweakColor label="Farbpalette"
                    value={THEME_LIST.find(x => x.key === t.theme)?.colors}
                    options={THEME_LIST.map(x => x.colors)}
                    onChange={(palette) => {
                      const match = THEME_LIST.find(x => x.colors.join() === palette.join());
                      if (match) setTweak('theme', match.key);
                    }} />

        <TweakSection label="Hero"/>
        <TweakSelect label="Headline" value={HEADLINES[t.headline].name}
                     options={HEADLINES.map(h => h.name)}
                     onChange={(name) => setTweak('headline', HEADLINES.findIndex(h => h.name === name))}/>
        <TweakSlider label="Sticker-Schräglage" value={t.rotation} min={0} max={3} step={0.1}
                     onChange={(v) => setTweak('rotation', v)} />

        <TweakSection label="Effekte"/>
        <TweakToggle label="Atom-Partikel" value={t.showAtoms} onChange={(v) => setTweak('showAtoms', v)} />
        <TweakToggle label="Animationen" value={t.animate} onChange={(v) => setTweak('animate', v)} />
      </TweaksPanel>

      <style>{stickerSiteCSS}</style>
    </div>
    </div>
  );
}

const THEMES = {
  solar:  { bg1:'#FFB734', bg2:'#F7901E', bg3:'#E5660A', accent1:'#FFD814', accent2:'#F7901E', accent3:'#1FB6A8', ink:'#1a1a1a', paper:'#FFF8DA' },
  mint:   { bg1:'#A6E3CC', bg2:'#1FB6A8', bg3:'#138275', accent1:'#FFD814', accent2:'#7CC242', accent3:'#F7901E', ink:'#0d2925', paper:'#F2FBF4' },
  magma:  { bg1:'#FFB734', bg2:'#E5302A', bg3:'#7a0a08', accent1:'#FFD814', accent2:'#E5302A', accent3:'#1a1a1a', ink:'#1a1a1a', paper:'#FFE6C2' },
  plasma: { bg1:'#9E61F0', bg2:'#6C2BD9', bg3:'#2a0a55', accent1:'#FFD814', accent2:'#F7901E', accent3:'#1FB6A8', ink:'#0a0218', paper:'#F4ECFF' },
};

const THEME_LIST = [
  { key: 'solar',  colors: ['#F7901E','#FFD814','#1FB6A8'] },
  { key: 'mint',   colors: ['#1FB6A8','#7CC242','#FFD814'] },
  { key: 'magma',  colors: ['#E5302A','#FFD814','#1a1a1a'] },
  { key: 'plasma', colors: ['#6C2BD9','#F7901E','#FFD814'] },
];

const HEADLINES = [
  { name: 'Spiel & Spaß', line1: 'Spiel,', line2: 'Spaß', line3: '& Strahlung.' },
  { name: 'Totally Rad', line1: 'Wir sind', line2: 'Totally', line3: 'Rad.' },
  { name: 'Überraschungs-Ei', line1: 'Im', line2: 'Über-Ei', line3: 'der Atome.' },
  { name: 'Bleib neugierig', line1: 'Bleib', line2: 'neugierig.', line3: 'Werde rad.' },
];

function Sticker({ rot=0, bg='#fff', fg='#1a1a1a', w=520, pop=false, children }) {
  return (
    <div className={"ss-sticker" + (pop ? ' ss-sticker-pop' : '')}
         style={{ transform: `rotate(${rot}deg)`, background: bg, color: fg, maxWidth: w }}>
      {children}
    </div>
  );
}

function StickerBadge({ text, rotate=0, top, left, right, bottom, bg='#1a1a1a', fg='#FFD814' }) {
  return (
    <div className="ss-badge" style={{ transform:`rotate(${rotate}deg)`, top, left, right, bottom, background: bg, color: fg }}>
      {text}
    </div>
  );
}

function Sunburst() {
  const rays = [];
  for (let i = 0; i < 24; i++) {
    rays.push(
      <div key={i} className="ss-ray" style={{
        transform:`translate(-50%, -100%) rotate(${i * 15}deg)`,
        opacity: i % 2 ? 0.35 : 0.18,
      }}/>
    );
  }
  return <div className="ss-sunburst ss-sunburst-spin" aria-hidden="true">{rays}</div>;
}
function SunburstStatic() {
  const rays = [];
  for (let i = 0; i < 24; i++) {
    rays.push(<div key={i} className="ss-ray" style={{ transform:`translate(-50%, -100%) rotate(${i * 15}deg)`, opacity: i % 2 ? 0.35 : 0.18 }}/>);
  }
  return <div className="ss-sunburst" aria-hidden="true">{rays}</div>;
}

function AtomField({ animate }) {
  const atoms = [
    { top: '4%',  left: '4%',  size: 56, rot: 20, dur: 22 },
    { top: '8%',  right: '5%', size: 44, rot: -15, dur: 18 },
    { top: '24%', left: '3%',  size: 70, rot: 35, dur: 30 },
    { top: '40%', right: '4%', size: 50, rot: -22, dur: 24 },
    { top: '58%', left: '6%',  size: 38, rot: 10, dur: 16 },
    { top: '72%', right: '8%', size: 64, rot: -40, dur: 28 },
    { top: '88%', left: '5%',  size: 42, rot: 18, dur: 20 },
  ];
  return (
    <div className="ss-atomfield" aria-hidden="true">
      {atoms.map((a, i) => <AtomIcon key={i} {...a} animate={animate}/>)}
    </div>
  );
}

function AtomIcon({ size=48, top, left, right, bottom, rot=0, dur=20, animate }) {
  const style = { top, left, right, bottom, animationDuration: dur + 's' };
  return (
    <svg className={"ss-atom" + (animate ? ' ss-atom-spin' : '')} width={size} height={size}
         viewBox="0 0 100 100" style={style}>
      <g style={{transformOrigin:'50% 50%', transform:`rotate(${rot}deg)`}}>
        <ellipse cx="50" cy="50" rx="42" ry="16" fill="none" stroke="var(--accent-1)" strokeWidth="3"/>
        <ellipse cx="50" cy="50" rx="42" ry="16" fill="none" stroke="var(--accent-1)" strokeWidth="3" transform="rotate(60 50 50)"/>
        <ellipse cx="50" cy="50" rx="42" ry="16" fill="none" stroke="var(--accent-1)" strokeWidth="3" transform="rotate(-60 50 50)"/>
        <circle cx="50" cy="50" r="6" fill="var(--accent-1)"/>
      </g>
    </svg>
  );
}

const stickerSiteCSS = `
/* STAGE — wraps the site for the viewport-preview tweak. In 'auto' it's a no-op;
   in other modes it pins the inner .ss-root to a device-width and dresses the
   surround as a soft preview background. */
.ss-stage {
  width: 100%; min-height: 100vh;
  display: flex; justify-content: center; align-items: flex-start;
  background: transparent;
  transition: background .2s ease, padding .2s ease;
}
.ss-stage > .ss-root { transition: width .25s cubic-bezier(.4,.0,.2,1), max-width .25s; }
.ss-vp-auto > .ss-root { width: 100%; }
.ss-vp-desktop > .ss-root { width: min(100%, 1280px); }
.ss-vp-tablet,
.ss-vp-mobile,
.ss-vp-desktop {
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 1.2px),
    #1f1f23;
  background-size: 16px 16px, 100% 100%;
  padding: clamp(16px, 3vw, 40px) clamp(12px, 2vw, 32px);
  min-height: 100vh;
}
.ss-vp-tablet > .ss-root {
  width: 768px; max-width: 100%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 30px 60px rgba(0,0,0,0.5);
  border-radius: 18px;
}
.ss-vp-mobile > .ss-root {
  width: 390px; max-width: 100%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 30px 60px rgba(0,0,0,0.5);
  border-radius: 28px;
}
.ss-vp-desktop > .ss-root {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 24px 48px rgba(0,0,0,0.4);
  border-radius: 12px;
}

.ss-root {
  position: relative;
  width: 100%; min-height: 100vh;
  container-type: inline-size;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 50% 0%, var(--bg-1) 0%, var(--bg-2) 35%, var(--bg-3) 100%);
  overflow: hidden;
  isolation: isolate;
}

/* Sunburst */
.ss-sunburst { position: absolute; left: 50%; top: 0; width: 0; height: 0; pointer-events: none; z-index: 0; transform-origin: 50% 0; }
.ss-sunburst-spin { animation: ss-rotate 120s linear infinite; }
.ss-ray { position: absolute; width: 140px; height: 1800px; background: linear-gradient(180deg, var(--accent-1) 0%, transparent 75%); transform-origin: 50% 100%; }
@keyframes ss-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.ss-atomfield { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.ss-atom { position: absolute; filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.18)); }
.ss-atom-spin { animation: ss-atom-bob 8s ease-in-out infinite; }
@keyframes ss-atom-bob { 0%,100%{transform: translateY(0)} 50%{transform: translateY(-12px)} }

.ss-root > section, .ss-root > footer, .ss-root > header { position: relative; z-index: 2; }

/* NAV */
.ss-nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 24px;
  padding: 14px clamp(20px, 4cqw, 60px);
  background: rgba(26,26,26,0.92);
  backdrop-filter: blur(8px);
  color: #fff;
  border-bottom: 3px solid var(--accent-1);
}
.ss-nav-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-family: 'Bowlby One SC', sans-serif; font-size: 18px; letter-spacing: 0.04em; }
.ss-nav-brand img { width: 36px; height: 36px; }
.ss-nav-links { display: flex; gap: 22px; margin-left: 12px; }
.ss-nav-links a { color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; letter-spacing: 0.02em; }
.ss-nav-links a:hover { color: var(--accent-1); }
.ss-nav-cta {
  margin-left: auto;
  font-family: 'Bowlby One SC', sans-serif; font-size: 14px;
  background: var(--accent-1); color: var(--ink);
  padding: 10px 16px; border-radius: 999px;
  border: 2px solid var(--ink); text-decoration: none;
  box-shadow: 3px 3px 0 var(--ink);
}
.ss-nav-cta:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }

@container (max-width: 720px) {
  .ss-nav-links { display: none; }
}

/* HERO */
.ss-hero {
  display: grid; grid-template-columns: 1fr minmax(260px, 460px); gap: clamp(20px, 4cqw, 48px);
  padding: clamp(40px, 6cqw, 70px) clamp(20px, 5cqw, 80px) clamp(40px, 5cqw, 60px);
  align-items: center;
  max-width: 1280px; margin: 0 auto;
}
@container (max-width: 820px) {
  .ss-hero { grid-template-columns: 1fr; }
  .ss-hero-right { order: -1; max-width: 360px; margin: 0 auto; }
}
.ss-eyebrow {
  display: inline-block;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--ink); background: var(--accent-1); padding: 8px 14px;
  border: 2px solid var(--ink); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 24px;
}
.ss-h1 {
  font-family: 'Bowlby One SC', Impact, sans-serif;
  font-size: clamp(56px, 9cqw, 116px); line-height: 0.92; margin: 0 0 24px;
  letter-spacing: -0.01em;
  display: flex; flex-direction: column;
}
.ss-h1-1, .ss-h1-3 { color: var(--ink); }
.ss-h1-2 {
  color: var(--accent-1);
  -webkit-text-stroke: 3px var(--ink);
  text-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-2deg);
  align-self: flex-start;
  padding: 0 8px;
}
.ss-lead {
  font-size: clamp(15px, 1.6cqw, 19px); line-height: 1.5; max-width: 540px;
  margin: 0 0 28px; color: var(--ink);
}
.ss-lead b { background: var(--accent-1); padding: 0 4px; border-radius: 4px; }
.ss-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.ss-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Bowlby One SC', sans-serif; font-size: clamp(14px, 1.5cqw, 17px);
  padding: 14px 22px; border-radius: 999px;
  border: 3px solid var(--ink);
  text-decoration: none; color: var(--ink);
  transition: transform .15s, box-shadow .15s;
  box-shadow: 4px 4px 0 var(--ink);
}
.ss-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.ss-btn span { font-size: 14px; }
.ss-btn-1 { background: var(--accent-1); }
.ss-btn-2 { background: #fff; }
.ss-btn-3 { background: var(--accent-3); color: #fff; }
.ss-btn-3:hover { color: #fff; }
.ss-btn-sm { font-size: 14px; padding: 10px 18px; box-shadow: 3px 3px 0 var(--ink); }
.ss-warn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Space Mono', monospace; font-size: 12px;
  background: var(--ink); color: var(--accent-1);
  padding: 8px 14px; border-radius: 6px;
  letter-spacing: 0.04em;
}
.ss-warn-icon { font-size: 14px; }

.ss-hero-right { position: relative; }
.ss-logo {
  width: 100%; max-width: 460px; aspect-ratio: 1/1;
  filter: drop-shadow(8px 8px 0 var(--ink)) drop-shadow(0 12px 30px rgba(0,0,0,0.2));
}
.ss-animated .ss-logo { animation: ss-logo-bob 6s ease-in-out infinite; }
@keyframes ss-logo-bob { 0%,100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(-2deg) translateY(-8px); } }
.ss-badge {
  position: absolute; z-index: 3;
  font-family: 'Bowlby One SC', sans-serif;
  font-size: 18px; padding: 10px 18px;
  border: 3px solid var(--ink); border-radius: 8px;
  box-shadow: 4px 4px 0 var(--ink);
  letter-spacing: 0.05em;
}

/* STORY */
.ss-story {
  position: relative; padding: 30px clamp(20px, 5cqw, 80px) 60px;
  display: flex; flex-wrap: wrap; gap: 30px;
  justify-content: center; align-items: flex-start;
  max-width: 1280px; margin: 0 auto;
}
.ss-sticker {
  width: 100%;
  padding: 28px 32px;
  border: 3px solid var(--ink); border-radius: 18px;
  box-shadow: 6px 6px 0 var(--ink);
  position: relative;
}
.ss-sticker-pop { box-shadow: 8px 8px 0 var(--ink); }
.ss-stick-eyebrow { font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: 0.1em; margin: 0 0 14px; text-transform: uppercase; }
.ss-stick-lead { font-family: 'Bowlby One SC', sans-serif; font-size: clamp(20px, 2.4cqw, 26px); line-height: 1.15; margin: 0 0 14px; }
.ss-stick-body { font-size: clamp(15px, 1.6cqw, 17px); line-height: 1.55; margin: 0 0 10px; }
.ss-stick-q { font-family: 'Bowlby One SC', sans-serif; font-size: clamp(28px, 3.5cqw, 38px); line-height: 1; margin: 0 0 10px; }
.ss-stick-a { font-family: 'Bowlby One SC', sans-serif; font-size: clamp(18px, 2cqw, 22px); line-height: 1.15; margin: 0; }
.ss-stick-egg { font-size: clamp(15px, 1.7cqw, 18px); line-height: 1.5; margin: 0; font-weight: 500; }

/* MISSION STRIP */
.ss-mission { padding: 14px 0; background: var(--ink); overflow: hidden; }
.ss-mission-strip { display: flex; gap: 28px; white-space: nowrap; animation: ss-marquee 40s linear infinite; }
.ss-mission-strip span { font-family: 'Bowlby One SC', sans-serif; font-size: clamp(20px, 2.5cqw, 28px); color: var(--accent-1); letter-spacing: 0.04em; }
@keyframes ss-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* TOPICS */
.ss-topics { padding: clamp(50px, 6cqw, 70px) clamp(20px, 5cqw, 80px) clamp(40px, 5cqw, 60px); background: var(--paper); }
.ss-topics > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.ss-h2 { font-family: 'Bowlby One SC', sans-serif; font-size: clamp(48px, 7cqw, 80px); line-height: 0.95; margin: 0 0 18px; display: flex; flex-direction: column; }
.ss-h2-knockout { color: var(--ink); }
.ss-h2-stamp {
  align-self: flex-start; padding: 4px 16px; margin-top: 4px;
  background: var(--bg-3); color: var(--paper);
  transform: rotate(-2deg);
  border: 3px solid var(--ink); border-radius: 8px;
  box-shadow: 5px 5px 0 var(--ink);
}
.ss-topics-intro { font-size: clamp(15px, 1.7cqw, 19px); max-width: 600px; margin: 0 0 36px; }
.ss-topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.ss-topic-card {
  background: #fff; border: 3px solid var(--ink); border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .2s, box-shadow .2s;
}
.ss-topic-card:hover { transform: translate(-2px, -3px) rotate(0deg) !important; box-shadow: 8px 8px 0 var(--ink); }
.ss-topic-icon { font-size: 36px; margin-bottom: 10px; line-height: 1; }
.ss-topic-title { font-family: 'Bowlby One SC', sans-serif; font-size: clamp(22px, 2.5cqw, 26px); margin-bottom: 6px; }
.ss-topic-desc { font-size: 15px; line-height: 1.45; color: #333; }

/* TEAM */
.ss-team { padding: clamp(60px, 7cqw, 80px) clamp(20px, 5cqw, 80px) clamp(50px, 6cqw, 70px); background: var(--ink); color: #fff; }
.ss-team > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.ss-team-head { text-align: center; margin-bottom: 50px; }
.ss-h2-team { color: var(--accent-1); align-items: center; }
.ss-h2-team .ss-h2-stamp { background: var(--accent-1); color: var(--ink); }
.ss-team-sub { font-size: clamp(16px, 1.7cqw, 19px); color: #fff; margin-top: 8px; }
.ss-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 28px; }
@container (max-width: 480px) { .ss-team-grid { grid-template-columns: 1fr; } }
.ss-member {
  background: #fff; color: var(--ink);
  border: 3px solid var(--ink); border-radius: 22px;
  padding: 24px;
  display: grid; grid-template-columns: 180px 1fr; gap: 22px;
  box-shadow: 8px 8px 0 var(--mc, var(--accent-1));
  position: relative;
  transition: transform .2s, box-shadow .2s;
}
@container (max-width: 540px) {
  .ss-member { grid-template-columns: 1fr; text-align: center; }
  .ss-member-photo { margin: 0 auto; }
}
.ss-member:hover { transform: translate(-3px, -3px) rotate(0deg) !important; box-shadow: 12px 12px 0 var(--mc, var(--accent-1)); }
.ss-member-photo {
  position: relative; width: 180px; height: 180px;
  border-radius: 50%; overflow: hidden;
  border: 4px solid var(--ink);
  background: var(--accent-1);
}
.ss-member-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-member-pin {
  position: absolute; top: -8px; right: -8px;
  background: var(--ink); color: var(--accent-1);
  font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700;
  padding: 6px 10px; border-radius: 999px;
  border: 2px solid var(--accent-1);
}
.ss-member-name { font-family: 'Bowlby One SC', sans-serif; font-size: clamp(28px, 3.4cqw, 36px); margin: 0 0 2px; line-height: 1; }
.ss-member-role { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--mc); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.ss-member-bio { font-size: 14.5px; line-height: 1.5; margin: 0 0 14px; color: #333; }
.ss-member-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; justify-content: inherit; }
@container (max-width: 540px) { .ss-member-tags { justify-content: center; } }
.ss-tag { font-family: 'Space Mono', monospace; font-size: 11px; padding: 4px 8px; background: var(--mc); color: var(--ink); border-radius: 999px; border: 1.5px solid var(--ink); font-weight: 700; }
.ss-member-fact { font-family: 'Space Mono', monospace; font-size: 12px; color: #666; }

.ss-member-empty .ss-empty-photo {
  width: 180px; height: 180px; border-radius: 50%;
  border: 4px dashed var(--ink); background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
@container (max-width: 540px) { .ss-member-empty .ss-empty-photo { margin: 0 auto; } }
.ss-empty-q { font-family: 'Bowlby One SC', sans-serif; font-size: 110px; line-height: 1; color: var(--ink); }

/* CTA */
.ss-cta { padding: clamp(60px, 7cqw, 80px) clamp(20px, 5cqw, 80px); background: var(--accent-1); }
.ss-cta > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.ss-cta-card {
  background: var(--ink); color: #fff;
  border-radius: 28px; padding: clamp(30px, 5cqw, 50px) clamp(24px, 5cqw, 56px);
  border: 3px solid var(--ink);
  box-shadow: 12px 12px 0 var(--bg-3);
  text-align: center;
}
.ss-cta-h { font-family: 'Bowlby One SC', sans-serif; font-size: clamp(34px, 5cqw, 56px); line-height: 1.05; margin: 0 0 14px; }
.ss-cta-p { font-size: clamp(16px, 2cqw, 20px); margin: 0 0 36px; color: var(--accent-1); font-family: 'Bowlby One SC', sans-serif; }
.ss-cta-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.ss-cta-tile {
  background: #fff; color: var(--ink);
  text-decoration: none;
  border-radius: 18px; padding: 22px;
  text-align: left;
  border: 3px solid var(--accent-1);
  transition: transform .15s;
  display: block;
}
.ss-cta-tile:hover { transform: translateY(-4px); }
.ss-cta-tile-title { font-family: 'Bowlby One SC', sans-serif; font-size: clamp(22px, 2.5cqw, 26px); margin-bottom: 4px; }
.ss-cta-tile-sub { font-size: 14px; color: #555; margin-bottom: 16px; }
.ss-cta-tile-link { font-family: 'Bowlby One SC', sans-serif; font-size: 16px; color: var(--bg-3); text-decoration: none; }

/* FOOTER */
.ss-foot { background: var(--ink); color: #fff; padding-top: 0; }
.ss-foot-tag { background: var(--accent-1); color: var(--ink); font-family: 'Bowlby One SC', sans-serif; font-size: clamp(16px, 2cqw, 22px); padding: 16px 0; text-align: center; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; }
.ss-foot-grid { padding: 50px clamp(20px, 5cqw, 80px) 20px; display: grid; grid-template-columns: 110px 1fr 1fr 1fr; gap: 30px; align-items: start; max-width: 1280px; margin: 0 auto; }
@container (max-width: 720px) { .ss-foot-grid { grid-template-columns: 100px 1fr; row-gap: 24px; } }
.ss-foot-logo { width: 100px; height: 100px; }
.ss-foot-title { font-family: 'Bowlby One SC', sans-serif; font-size: 30px; }
.ss-foot-sub { font-size: 14px; color: var(--accent-1); }
.ss-foot-col { display: flex; flex-direction: column; gap: 8px; }
.ss-foot-h { font-family: 'Bowlby One SC', sans-serif; font-size: 18px; color: var(--accent-1); margin-bottom: 4px; }
.ss-foot-col a { color: #fff; text-decoration: none; font-size: 14px; }
.ss-foot-col a:hover { color: var(--accent-1); }
.ss-foot-tiny { padding: 16px clamp(20px, 5cqw, 80px) 30px; font-family: 'Space Mono', monospace; font-size: 12px; color: #888; border-top: 1px solid #333; max-width: 1280px; margin: 0 auto; }
`;

window.StickerSite = StickerSite;