


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Collaborhythm — Choose Your Own Adventure Doorways</title>
  <style>
    :root {
      --bg: #030303;
      --black2: #090909;
      --panel: #111111;
      --panel2: #181818;
      --gold: #ffc400;
      --gold2: #d9a400;
      --red: #ff2424;
      --white: #f7f1e8;
      --muted: #b7aa92;
      --line: rgba(255,196,0,.42);
      --soft: rgba(255,196,0,.12);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: Impact, Haettenschweiler, "Arial Black", Arial, sans-serif;
      background:
        radial-gradient(circle at 15% 0%, rgba(255,196,0,.22), transparent 30%),
        radial-gradient(circle at 85% 20%, rgba(255,36,36,.12), transparent 25%),
        linear-gradient(180deg, #020202, #080600 42%, #020202);
      color: var(--white);
      line-height: 1.25;
    }

    button {
      font: inherit;
      color: inherit;
    }

    .wrap {
      width: min(1240px, calc(100% - 30px));
      margin: 0 auto;
      padding: 20px 0 48px;
    }

    .hero {
      border: 3px solid var(--gold);
      border-radius: 26px;
      padding: 26px;
      background:
        linear-gradient(135deg, rgba(255,196,0,.14), rgba(0,0,0,.85) 38%, rgba(255,36,36,.08)),
        repeating-linear-gradient(135deg, rgba(255,196,0,.035) 0 8px, transparent 8px 18px);
      box-shadow: 0 0 0 5px #000, 0 0 42px rgba(255,196,0,.25), inset 0 0 60px rgba(0,0,0,.75);
      margin-bottom: 18px;
      text-align: center;
    }

    .kicker {
      color: var(--gold);
      letter-spacing: .26em;
      text-transform: uppercase;
      font-size: 16px;
      margin-bottom: 10px;
      text-shadow: 0 2px 0 #000;
    }

    h1 {
      margin: 0;
      font-size: clamp(44px, 8vw, 104px);
      line-height: .82;
      letter-spacing: -0.035em;
      text-transform: uppercase;
      text-shadow: 5px 5px 0 #000, 0 0 22px rgba(255,196,0,.28);
    }

    .hero .yellow { color: var(--gold); }

    .subtitle {
      max-width: 980px;
      color: var(--white);
      font-family: Arial, Helvetica, sans-serif;
      font-weight: 900;
      font-size: clamp(17px, 2vw, 24px);
      margin: 18px auto 0;
    }

    .ritual {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 22px;
    }

    .ritual div {
      padding: 15px 12px;
      border-radius: 16px;
      background: #000;
      border: 2px solid var(--gold);
      color: var(--gold);
      font-size: clamp(18px, 2.5vw, 30px);
      text-align: center;
      text-transform: uppercase;
      box-shadow: inset 0 0 22px rgba(255,196,0,.12);
    }

    .section-title {
      margin: 24px 0 12px;
      padding: 14px 18px;
      border-left: 12px solid var(--gold);
      background: linear-gradient(90deg, rgba(255,196,0,.18), transparent);
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
    }

    .section-title h2 {
      margin: 0;
      font-size: clamp(30px, 4vw, 56px);
      letter-spacing: -0.025em;
      text-transform: uppercase;
      color: var(--gold);
      text-shadow: 3px 3px 0 #000;
    }

    .section-title p {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--white);
      font-size: 16px;
      font-weight: 800;
      max-width: 520px;
      text-align: right;
    }

    .rating-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
    }

    .rating-card, .entry-card, .switch-card {
      border: 2px solid rgba(255,196,0,.5);
      background:
        linear-gradient(180deg, #171717, #050505),
        repeating-linear-gradient(45deg, rgba(255,196,0,.06) 0 10px, transparent 10px 20px);
      border-radius: 22px;
      padding: 16px;
      cursor: pointer;
      transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
      box-shadow: 0 10px 0 #000, inset 0 0 32px rgba(255,196,0,.04);
    }

    .rating-card:hover, .entry-card:hover {
      transform: translateY(-4px) scale(1.015);
      border-color: var(--gold);
      box-shadow: 0 14px 0 #000, 0 0 26px rgba(255,196,0,.18), inset 0 0 34px rgba(255,196,0,.12);
    }

    .rating-card.active, .entry-card.active {
      border-color: var(--gold);
      background: linear-gradient(180deg, rgba(255,196,0,.25), #090909 62%);
      box-shadow: 0 10px 0 #000, 0 0 0 4px rgba(255,196,0,.16), 0 0 34px rgba(255,196,0,.25);
    }

    .rating-card {
      min-height: 176px;
      text-align: center;
    }

    .rating-label {
      font-size: clamp(34px, 4vw, 54px);
      line-height: .85;
      color: var(--gold);
      margin-bottom: 10px;
      text-shadow: 4px 4px 0 #000;
      text-transform: uppercase;
    }

    .rating-card small, .entry-card small, .switch-card small {
      color: var(--gold);
      display: block;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: .1em;
      margin-bottom: 8px;
    }

    .rating-card p, .entry-card p, .switch-card p {
      margin: 0;
      color: var(--white);
      font-family: Arial, Helvetica, sans-serif;
      font-weight: 800;
      font-size: 14px;
    }

    .status-bar {
      margin: 18px 0 0;
      border-radius: 18px;
      background: #000;
      border: 2px solid var(--gold);
      padding: 15px;
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 12px;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: 900;
      font-size: 18px;
    }

    .status-bar strong { color: var(--gold); }

    .entry-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
    }

    .entry-card {
      min-height: 148px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: center;
      padding: 14px;
    }

    .entry-card h3 {
      margin: 0;
      font-size: clamp(20px, 2vw, 29px);
      line-height: .95;
      letter-spacing: -0.02em;
      text-transform: uppercase;
      color: var(--white);
      text-shadow: 3px 3px 0 #000;
    }

    .entry-card p {
      display: none;
    }

    .entry-meta {
      margin-top: 12px;
      color: var(--gold);
      font-size: 14px;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .switchboard {
      border: 3px solid var(--gold);
      border-radius: 28px;
      background:
        linear-gradient(160deg, rgba(255,196,0,.14), rgba(0,0,0,.88) 36%, rgba(0,0,0,.98)),
        repeating-linear-gradient(135deg, rgba(255,196,0,.035) 0 8px, transparent 8px 17px);
      padding: 20px;
      margin-top: 22px;
      box-shadow: 0 0 0 5px #000, inset 0 0 55px rgba(0,0,0,.85);
    }

    .switch-head {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 16px;
      border-bottom: 2px solid rgba(255,196,0,.38);
      padding-bottom: 16px;
      margin-bottom: 16px;
    }

    .switch-head h2 {
      margin: 0;
      font-size: clamp(34px, 5vw, 76px);
      line-height: .88;
      letter-spacing: -0.04em;
      text-transform: uppercase;
      color: var(--gold);
      text-shadow: 4px 4px 0 #000;
    }

    .switch-head p {
      margin: 10px 0 0;
      color: var(--white);
      font-family: Arial, Helvetica, sans-serif;
      font-weight: 900;
      font-size: 17px;
      max-width: 780px;
    }

    .badge {
      border: 2px solid var(--gold);
      border-radius: 999px;
      padding: 10px 14px;
      background: #000;
      color: var(--gold);
      font-size: 18px;
      white-space: nowrap;
      box-shadow: inset 0 0 18px rgba(255,196,0,.12);
    }

    .switch-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    .switch-card {
      min-height: 112px;
      cursor: default;
      box-shadow: 0 8px 0 #000;
    }

    .switch-card h3 {
      margin: 0 0 8px;
      font-size: 25px;
      color: var(--white);
      text-transform: uppercase;
      text-shadow: 2px 2px 0 #000;
    }

    .path-note {
      margin-top: 16px;
      padding: 16px;
      border-radius: 18px;
      background: rgba(255,36,36,.18);
      border: 2px solid rgba(255,36,36,.6);
      color: var(--white);
      font-family: Arial, Helvetica, sans-serif;
      font-size: 20px;
      font-weight: 950;
      box-shadow: inset 0 0 30px rgba(0,0,0,.5);
    }

    .footer-note {
      margin-top: 24px;
      color: var(--muted);
      font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
      font-weight: 800;
      text-align: center;
    }

    @media (max-width: 1050px) {
      .rating-grid, .entry-grid { grid-template-columns: repeat(2, 1fr); }
      .switch-grid { grid-template-columns: repeat(2, 1fr); }
      .ritual, .status-bar { grid-template-columns: 1fr; }
      .section-title { display: block; }
      .section-title p { text-align: left; margin-top: 6px; }
    }

    @media (max-width: 590px) {
      .rating-grid, .entry-grid, .switch-grid { grid-template-columns: 1fr; }
      .hero { padding: 18px; }
      .switch-head { display: block; }
      .badge { display: inline-block; margin-top: 12px; }
    }
  </style>


  <main class="wrap">
    <section class="hero">
      <div class="kicker">Collaborhythm · Collabtunes · Front Door &amp; Bouncer</div>
      <h1>Choose Your Own <span class="yellow">Adventure</span><br>or Take the <span class="yellow">Ride Again</span></h1>
      <p class="subtitle">Pick your rating limit. Pick your doorway. Get your switchboard. Safe shoes or Bad Mutha Fucka mode.</p>
      <div class="ritual">
        <div>1. Rating</div>
        <div>2. Doorway</div>
        <div>3. Ride Map</div>
      </div>
    </section>

    <section>
      <div class="section-title">
        <h2>Limit Your Rating</h2>
        <p>The bouncer decides which version of the universe you are allowed to see.</p>
      </div>
      <div class="rating-grid" id="ratingGrid"></div>
      <div class="status-bar">
        <div><strong>Rating:</strong> <span id="currentRating">No Limits</span></div>
        <div><strong>Bouncer:</strong> <span id="bouncerLine">Wallet checked. It says BAD MUTHA FUCKA. Door opens.</span></div>
      </div>
    </section>

    <section>
      <div class="section-title">
        <h2>Pick a Doorway</h2>
        <p>25 canon start-here branches. Big buttons first. Details later.</p>
      </div>
      <div class="entry-grid" id="entryGrid"></div>
    </section>

    <section class="switchboard" id="switchboard">
      <div class="switch-head">
        <div>
          <h2 id="switchTitle">Switchboard Waiting</h2>
          <p id="switchDesc">Pick a rating, then pick a doorway. This becomes the custom ride map.</p>
        </div>
        <div class="badge" id="switchBadge">READY</div>
      </div>
      <div class="switch-grid" id="switchGrid"></div>
      <div class="path-note" id="pathNote">Prototype links only. Later every button pulls from replaceable data files.</div>
    </section>

    <div class="footer-note">Engine rule: build the ride balls-out, but keep the data replaceable. Change the data, not the machine.</div>
  </main>

  <script>
    const ratings = [
      { id: "gpg", label: "G / PG", title: "Safe Shoes", line: "Clean route.", bouncer: "Safe shoes tied. No basement doors." },
      { id: "pg13", label: "PG-13", title: "Teen-ish", line: "Some edge.", bouncer: "Johnny might survive if he closes tabs fast." },
      { id: "r", label: "R", title: "Adult Road", line: "Language and bite.", bouncer: "You are past the polite living room." },
      { id: "nc17", label: "NC-17", title: "Johnny Trouble", line: "Explicit map.", bouncer: "This might get Johnny in trouble in 8th grade." },
      { id: "nolimits", label: "No Limits", title: "Bad Mutha Fucka", line: "Censor-free ride.", bouncer: "Wallet checked. It says BAD MUTHA FUCKA. Door opens." }
    ];

    const entryPoints = [
      [1, "Lady Weaver", "Universal hook, snippet + story"],
      [2, "Website Mission Statement", "Section 149"],
      [3, "How I Got Here", "Clean version"],
      [4, "Rolling Stone Reviews", "Section 57, 9 of 35"],
      [5, "Full Text of Lyrics", "Section 56, 8 of 35"],
      [6, "One Sentence Summaries", "Section 58, 10 of 35"],
      [7, "Albums Ranked GX", "Section 59, 11 of 35"],
      [8, "Themes Mood Profanity", "Section 60, 12 of 35"],
      [9, "Quick Guide G to X", "Section 61 / 55"],
      [10, "Switchboard Quicklinks", "Homepage #10"],
      [11, "Site Navigator", "Collabtunes.com map"],
      [12, "Fast Scroll Tabs", "Homepage #1"],
      [13, "Start Reading 1/35", "Dive in"],
      [14, "Complete Sitemap", "128 to 200 sections"],
      [15, "Should You Read This?", "Section 77, 27 of 35"],
      [16, "Business Card", "Identity doorway"],
      [17, "50 Lyric Videos", "Lyrics on screen"],
      [18, "80 Min Song Clips", "120 songs approx."],
      [19, "Set Descriptions", "Section 106"],
      [20, "New American Songbook", "35 sections"],
      [21, "Songs I Wish I Wrote", "Influence path"],
      [22, "Tracks by Category", "Theme-first map"],
      [23, "Four Word Descriptions", "Fast discovery"],
      [24, "What Community Says", "Section 52, 4 of 35"],
      [25, "10 Famous Artists", "Comparison hook"]
    ];

    let selectedRating = ratings[4];
    let selectedEntry = null;

    function renderRatings() {
      document.getElementById("ratingGrid").innerHTML = ratings.map(r => `
        <button class="rating-card ${r.id === selectedRating.id ? "active" : ""}" data-rating="${r.id}">
          <div class="rating-label">${r.label}</div>
          <small>${r.title}</small>
          <p>${r.line}</p>
        </button>
      `).join("");

      document.querySelectorAll("[data-rating]").forEach(btn => {
        btn.addEventListener("click", () => {
          selectedRating = ratings.find(r => r.id === btn.dataset.rating);
          document.getElementById("currentRating").textContent = `${selectedRating.label} — ${selectedRating.title}`;
          document.getElementById("bouncerLine").textContent = selectedRating.bouncer;
          renderRatings();
          renderSwitchboard();
        });
      });
    }

    function renderEntries() {
      document.getElementById("entryGrid").innerHTML = entryPoints.map(([num, title, desc]) => `
        <button class="entry-card ${selectedEntry && selectedEntry.num === num ? "active" : ""}" data-entry="${num}">
          <small>Doorway ${String(num).padStart(2, "0")}</small>
          <h3>${title}</h3>
          <div class="entry-meta">${desc}</div>
        </button>
      `).join("");

      document.querySelectorAll("[data-entry]").forEach(btn => {
        btn.addEventListener("click", () => {
          const row = entryPoints.find(e => e[0] === Number(btn.dataset.entry));
          selectedEntry = { num: row[0], title: row[1], desc: row[2] };
          renderEntries();
          renderSwitchboard();
          document.getElementById("switchboard").scrollIntoView({ behavior: "smooth", block: "start" });
        });
      });
    }

    function renderSwitchboard() {
      const title = selectedEntry ? selectedEntry.title : "Pick a Doorway";
      document.getElementById("switchTitle").textContent = selectedEntry ? `${selectedRating.label}: ${title}` : "Switchboard Waiting";
      document.getElementById("switchDesc").textContent = selectedEntry ? `${selectedEntry.desc}. Filtered through ${selectedRating.title}.` : "Pick a rating, then pick a doorway. This becomes the custom ride map.";
      document.getElementById("switchBadge").textContent = selectedEntry ? `DOOR ${String(selectedEntry.num).padStart(2, "0")}` : "READY";

      const cards = selectedEntry ? [
        ["Enter Here", `Open ${selectedEntry.title}.`, "Primary"],
        ["Safe Trail", `Only ${selectedRating.label} links.`, "Bouncer"],
        ["Rabbit Hole", "Next strange turn.", "Discovery"],
        ["Ride Again", "Restart differently.", "Replay"],
        ["Deep Archive", "Full sitemap/index.", "Archive"],
        ["Search", "Filter title/theme/rating.", "Tool"],
        ["Copy Ride", "Save this path.", "Utility"],
        ["Next Door", "Adjacent entry point.", "Branch"]
      ] : [
        ["Step One", "Choose your rating limit.", "Route"],
        ["Step Two", "Pick one of 25 doorways.", "Route"],
        ["Step Three", "Switchboard adapts.", "Route"],
        ["Later", "Replace placeholder URLs.", "Route"]
      ];

      document.getElementById("switchGrid").innerHTML = cards.map(([h, p, tag]) => `
        <div class="switch-card">
          <small>${tag}</small>
          <h3>${h}</h3>
          <p>${p}</p>
        </div>
      `).join("");

      document.getElementById("pathNote").textContent = warningText(selectedRating);
    }

    function warningText(rating) {
      if (rating.id === "gpg") return "SAFE SHOES MODE: cleanest public-facing route.";
      if (rating.id === "pg13") return "PG-13 MODE: some edge, still guarded.";
      if (rating.id === "r") return "R MODE: adult road open.";
      if (rating.id === "nc17") return "NC-17 MODE: Johnny Trouble Zone.";
      return "NO LIMITS MODE: censor-free ride. The bouncer waves you through.";
    }

    renderRatings();
    renderEntries();
    renderSwitchboard();
  </script>


