`builds/long-strange-archive/index.html`

289 lines
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Long Strange Archive</title>
  <style>
    :root {
      --bg: #f7efe6;
      --surface: #fff9f1;
      --text: #3a2c22;
      --muted: #a08c7a;
      --accent: #c65f38;
      --accent-alt: #e0a458;
      --card-radius: 14px;
      --spacing: 4px 8px 12px 16px 24px 32px 48px 64px 96px 128px;
      --font-display: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
      --font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
      --scale: 12px 16px 21px 28px 38px 50px 67px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      line-height: 1.6;
      overflow-x: hidden;
      scroll-behavior: smooth;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      font-size: var(--scale-1);
    }

    h1, h2, h3 {
      font-family: var(--font-display);
      font-weight: normal;
    }

    h1 {
      font-size: var(--scale-5);
      margin-bottom: var(--spacing-4);
    }

    h2 {
      font-size: var(--scale-4);
      margin-bottom: var(--spacing-3);
    }

    h3 {
      font-size: var(--scale-3);
      margin-bottom: var(--spacing-2);
    }

    .curator {
      padding: var(--spacing-6) var(--spacing-4);
      background: var(--surface);
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
      border-radius: var(--card-radius);
      margin-bottom: var(--spacing-6);
    }

    .timeline {
      display: flex;
      overflow-x: auto;
      padding: var(--spacing-4);
      gap: var(--spacing-4);
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
    }

    .timeline-item {
      flex: 0 0 auto;
      min-width: 120px;
      padding: var(--spacing-2);
      background: var(--muted);
      border-radius: var(--card-radius);
      text-align: center;
      transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }

    .timeline-item:hover {
      transform: scale(1.05);
      box-shadow: 0 16px 48px rgba(0,0,0,0.18);
    }

    .artifact-station {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-4);
      padding: var(--spacing-4);
    }

    .artifact {
      display: flex;
      align-items: center;
      gap: var(--spacing-2);
      padding: var(--spacing-2);
      background: var(--surface);
      border-radius: var(--card-radius);
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
      transition: box-shadow 0.2s ease-in-out;
    }

    .artifact:hover {
      box-shadow: 0 16px 48px rgba(0,0,0,0.18);
    }

    .label {
      font-size: var(--scale-0);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: var(--spacing-2);
    }

    .label-detail {
      font-size: var(--scale-0);
      color: var(--text);
    }

    .listening-room {
      background: var(--surface);
      padding: var(--spacing-6);
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
      border-radius: var(--card-radius);
      margin-bottom: var(--spacing-6);
    }

    .spotlight {
      background: var(--accent);
      color: var(--surface);
      padding: var(--spacing-4);
      border-radius: var(--card-radius);
      margin-bottom: var(--spacing-6);
      text-align: center;
    }

    .venue-map {
      background: var(--surface);
      padding: var(--spacing-4);
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
      border-radius: var(--card-radius);
      margin-bottom: var(--spacing-6);
    }

    .reduce-motion {
      animation: none !important;
    }

    .fade-up {
      animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(28px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      body {
        background: linear-gradient(180deg, var(--accent), var(--accent-alt)) fixed;
        background-size: 400% 400%;
        animation: drift 18s ease-in-out infinite;
      }

      @keyframes drift {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
      }
    }

    @media (max-width: 768px) {
      .timeline {
        overflow-x: auto;
        flex-wrap: wrap;
      }

      .timeline-item {
        flex: 1 1 80px;
        min-width: 80px;
      }
    }
  </style>
</head>
<body class="fade-up">
  <h1>The Long Strange Archive</h1>
  <div class="curator">
    <h2>Curatorial Statement</h2>
    <p>This exhibition traces the Grateful Dead’s visual and cultural legacy across five decades, from the psychedelic counterculture of the 1960s to the final performances of the 1990s. Through a curated selection of rare and overlooked artifacts, this space invites reflection on the band's evolution as artists, activists, and cultural icons. It is not a museum of nostalgia, but a scholarly exploration of a band that reshaped the boundaries of music, art, and community.</p>
  </div>

  <div class="timeline">
    <div class="timeline-item">1965</div>
    <div class="timeline-item">1967</div>
    <div class="timeline-item">1971</div>
    <div class="timeline-item">1977</div>
    <div class="timeline-item">1987</div>
    <div class="timeline-item">1995 · Soldier Field finale</div>
    <div class="timeline-item">2009</div>
  </div>

  <div class="artifact-station">
    <h2>Artifact Stations</h2>
    <div class="artifact">
      <div class="label">HANDBILL</div>
      <div class="label-detail">Date: 1967 | Medium: Screen-printed paper | Provenance: San Francisco, CA</div>
      <div class="label-detail">A handbill from a 1967 gig at the Avalon Ballroom, featuring a psychedelic design that mimics a cosmic landscape. The poster is a relic of the era’s underground printing movement, where artists created ephemera for music, politics, and protest.</div>
    </div>

    <div class="artifact">
      <div class="label">TICKET STUB</div>
      <div class="label-detail">Date: 1971 | Medium: Paper | Provenance: Fillmore West, San Francisco</div>
      <div class="label-detail">This stub from a Fillmore West show reveals the band’s growing influence and the logistical scale of their concerts. The ticket’s design reflects the era’s mix of corporate production and rock-n-roll authenticity, a paradox that defined the Dead’s touring life.</div>
    </div>

    <div class="artifact">
      <div class="label">BACKSTAGE EPHEMERA</div>
      <div class="label-detail">Date: 1977 | Medium: Mixed media | Provenance: San Francisco, CA</div>
      <div class="label-detail">A backstage pass and scribbled note from a 1977 tour, showing the informal, almost ritualistic nature of the Dead’s performances. The pass is marked with a hand-drawn mandala, a symbol of the band’s deep spiritual interests and the countercultural ethos of the time.</div>
    </div>

    <div class="artifact">
      <div class="label">STAGE PHOTOGRAPHY</div>
      <div class="label-detail">Date: 1987 | Medium: Silver gelatin print | Provenance: The Warfield, San Francisco</div>
      <div class="label-detail">This photograph captures the band mid-performance at The Warfield, with members in full stage regalia and a crowd in motion. The image shows the Dead in their prime, a balance of musical mastery and visual spectacle that defined their later years.</div>
    </div>

    <div class="artifact">
      <div class="label">FAN-MADE OBJECT</div>
      <div class="label-detail">Date: 1995 | Medium: Mixed media | Provenance: Santa Cruz, CA</div>
      <div class="label-detail">A handcrafted "Deadhead" pin made of wood and fabric, featuring an abstract representation of the band’s logo. This object represents the deeply personal and communal relationship between the band and its fans, a legacy that continues to this day.</div>
    </div>
  </div>

  <div class="listening-room">
    <h2>Listening Room</h2>
    <audio controls>
      <source src="https://upload.wikimedia.org/wikipedia/en/3/36/GratefulDead-PlayingInTheDark.ogg" type="audio/ogg">
      Your browser does not support the audio element.
    </audio>
    <p>Audio from <i>Playing in the Dark</i> (1989), a live recording that captures the band's improvisational brilliance and the emotional resonance of their performances.</p>
  </div>

  <div class="spotlight">
    <h3>From the Archive</h3>
    <p><strong>Artifact:</strong> 1973 "Dark Star" Poster<br><strong>Medium:</strong> Hand-drawn ink and collage<br><strong>Provenance:</strong> Portland, OR</p>
    <p>This rare poster from a 1973 "Dark Star" show is a masterwork of psychedelic printmaking. Featuring a spiral of ink and paper collage, it reflects the band’s deep engagement with art, spirituality, and the visual language of the era.</p>
  </div>

  <div class="venue-map">
    <h2>Venue Map</h2>
    <p>Explore a map of the Dead’s most iconic venues, including The Fillmore, The Warfield, and the outdoor festivals of the 1970s and 1980s. Each location is marked with a small icon and a brief historical note.</p>
  </div>

  <script>
    // Keyboard navigation: 'Tab' to navigate, 'Enter' to open artifact details
    const artifacts = document.querySelectorAll('.artifact');
    artifacts.forEach((artifact, index) => {
      artifact.tabIndex = 0;
      artifact.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
          alert('Artifact ' + (index + 1) + ' details: ' + this.querySelector('.label-detail').textContent);
        }
      });
    });

    // Reduce motion class toggle
    if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
      document.body.classList.remove('reduce-motion');
    } else {
      document.body.classList.add('reduce-motion');
    }
  </script>
</body>
</html>