`index.html`

78 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Six rooms, five eras, and eighteen source-hosted Grateful Dead recordings from the Live Music Archive — including an animated riverboat listening room.">
<title>DEAD · A Listening Exhibition</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23090908'/%3E%3Cpath d='M8 3l4 5-4 5-4-5z' fill='%23d7af59'/%3E%3C/svg%3E">
<style>
:root{--ink:#f2ead8;--muted:#aaa18e;--night:#090908;--panel:#11110f;--line:#343127;--gold:#d7af59;--rose:#bd5b60;--blue:#538da2;--cols:3;--serif:Georgia,"Times New Roman",serif;--sans:Inter,Helvetica,Arial,sans-serif;--mono:"SFMono-Regular",Consolas,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--night);color:var(--ink);font-family:var(--sans)}button,a,select,input{font:inherit}a{color:inherit}button{color:inherit}.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.065;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.top{height:66px;padding:0 clamp(20px,4vw,64px);display:flex;align-items:center;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(9,9,8,.92);backdrop-filter:blur(18px);z-index:20}.mark{font-family:var(--serif);font-size:20px;letter-spacing:.06em}.mark i{color:var(--gold);font-style:normal}.nav{margin-left:auto;display:flex;gap:24px}.nav a{text-decoration:none;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.12em}.nav a:hover{color:var(--ink)}
.hero{min-height:78vh;padding:clamp(70px,10vw,150px) clamp(20px,7vw,110px) 70px;display:grid;align-content:center;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;width:70vw;height:70vw;border-radius:50%;background:radial-gradient(circle,rgba(83,141,162,.19),rgba(189,91,96,.08) 35%,transparent 67%);right:-23vw;top:-34vw}.eyebrow{font:11px var(--mono);text-transform:uppercase;letter-spacing:.24em;color:var(--gold);margin-bottom:28px}.hero h1{font:clamp(72px,15vw,220px)/.72 var(--serif);letter-spacing:-.065em;margin:0;max-width:5ch}.hero h1 em{display:block;font-weight:normal;color:transparent;-webkit-text-stroke:1px var(--rose);padding-left:.55em}.hero-copy{max-width:590px;font:clamp(18px,2vw,27px)/1.45 var(--serif);margin:50px 0 0 clamp(0px,14vw,220px);color:#d8d0bf}.hero-meta{display:flex;gap:24px;flex-wrap:wrap;margin:32px 0 0 clamp(0px,14vw,220px);font:10px var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.section{padding:90px clamp(20px,4vw,64px)}.section-head{display:grid;grid-template-columns:1fr 2fr;gap:40px;border-top:1px solid var(--line);padding-top:24px;margin-bottom:48px}.section-head .k{font:10px var(--mono);color:var(--gold);letter-spacing:.2em}.section-head h2{font:clamp(38px,6vw,86px)/.95 var(--serif);margin:0;font-weight:normal;letter-spacing:-.04em}.intro{margin:0 0 52px auto;max-width:670px;font:18px/1.7 var(--serif);color:var(--muted)}
.player-shell{display:grid;grid-template-columns:minmax(270px,390px) 1fr;border:1px solid var(--line);background:var(--panel);min-height:640px}.shows{border-right:1px solid var(--line)}.show{width:100%;display:grid;grid-template-columns:54px 1fr;gap:14px;text-align:left;padding:21px;border:0;border-bottom:1px solid var(--line);background:transparent;cursor:pointer;transition:.2s}.show:hover,.show.on{background:#191813}.show.on{box-shadow:inset 3px 0 var(--gold)}.year{font:14px var(--mono);color:var(--gold)}.show b{display:block;font:19px/1.1 var(--serif);font-weight:normal}.show small{display:block;margin-top:7px;color:var(--muted);font-size:11px;line-height:1.45}.stage{padding:clamp(28px,5vw,72px);display:flex;flex-direction:column;position:relative;overflow:hidden}.stage:after{content:"";position:absolute;inset:auto -20% -55% 10%;height:70%;background:radial-gradient(ellipse,rgba(215,175,89,.12),transparent 66%);pointer-events:none}.stage .date{font:11px var(--mono);letter-spacing:.18em;color:var(--rose);text-transform:uppercase}.stage h3{font:clamp(45px,7vw,100px)/.9 var(--serif);font-weight:normal;letter-spacing:-.05em;margin:22px 0 20px;max-width:9ch}.stage .note{font:17px/1.65 var(--serif);max-width:640px;color:var(--muted);margin:0}.listen{margin-top:auto;position:relative;z-index:2}.listen-btn{margin-top:34px;border:1px solid var(--gold);background:var(--gold);color:#121008;padding:14px 20px;cursor:pointer;font-size:12px;letter-spacing:.12em;text-transform:uppercase}.listen-btn:hover{background:#f0cb77}.frame-wrap{display:none;margin-top:24px}.frame-wrap.on{display:block}.frame-wrap iframe{width:100%;height:180px;border:1px solid var(--line);background:#000}.source-row{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-top:13px;color:var(--muted);font-size:11px}.source-row a{color:var(--gold)}
.gallery-tools{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:25px}.gallery-tools label{font:10px var(--mono);text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}.gallery-tools select{margin-left:8px;background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:8px}.gallery-tools input{margin-left:8px;accent-color:var(--gold)}.builds{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:18px}.build{border:1px solid var(--line);background:var(--panel);text-decoration:none;display:flex;flex-direction:column;min-height:400px;transition:.2s}.build:hover{transform:translateY(-4px);border-color:var(--gold)}.build .visual{height:230px;background-size:cover;background-position:top center;filter:saturate(.78)}.build .copy{padding:22px;display:flex;flex-direction:column;flex:1}.build .n{font:10px var(--mono);letter-spacing:.15em;color:var(--gold)}.build h3{font:28px/1.05 var(--serif);font-weight:normal;margin:14px 0}.build p{font-size:13px;line-height:1.55;color:var(--muted);margin:0}.build .go{margin-top:auto;padding-top:22px;font:10px var(--mono);letter-spacing:.14em;color:var(--rose);text-transform:uppercase}
.source-note{display:grid;grid-template-columns:1fr 2fr;gap:40px;border-top:1px solid var(--line);padding-top:30px}.source-note h2{font:clamp(34px,5vw,70px)/1 var(--serif);font-weight:normal;margin:0}.source-note p{font:17px/1.7 var(--serif);color:var(--muted);max-width:730px;margin:0}.source-note strong{color:var(--ink)}footer{padding:40px clamp(20px,4vw,64px);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font:10px var(--mono);letter-spacing:.1em;color:var(--muted)}
@media(max-width:820px){.player-shell{grid-template-columns:1fr}.shows{border-right:0}.show{grid-template-columns:48px 1fr}.stage{min-height:600px}.section-head,.source-note{grid-template-columns:1fr}.builds{--cols:2!important}.nav{display:none}}@media(max-width:540px){.hero{min-height:70vh}.hero h1{font-size:74px}.hero-copy,.hero-meta{margin-left:0}.builds{--cols:1!important}.source-row{align-items:flex-start;flex-direction:column}.section{padding-top:65px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.build,.show{transition:none}}
</style>
</head>
<body>
<div class="grain"></div>
<header class="top"><div class="mark"><i>◆</i> DEAD</div><nav class="nav"><a href="#listen">Listen</a><a href="/room/">Riverboat room</a><a href="#rooms">Gallery rooms</a><a href="#source">The source</a></nav></header>
<main>
<section class="hero"><div class="eyebrow">A listening exhibition · six rooms · the whole long run</div><h1>Long <em>strange</em></h1><p class="hero-copy">A visual archive with a pulse. Move through five decades of live sound, then enter the rooms the music inspired.</p><div class="hero-meta"><span>1969—1995</span><span>Community recordings</span><span>Source-hosted playback</span><span>No autoplay</span></div></section>

<section class="section" id="listen"><div class="section-head"><span class="k">01 / Listening room</span><h2>Choose a night.<br>Enter the room.</h2></div><p class="intro">Eighteen landmark dates spanning the band’s full touring run, closing on the final night, selected from Steve’s listen-only music source. Playback stays with the Internet Archive; every recording opens back to its original item page.</p><div class="player-shell"><div class="shows" id="shows"></div><div class="stage"><span class="date" id="stageDate"></span><h3 id="stageTitle"></h3><p class="note" id="stageNote"></p><div class="listen"><button class="listen-btn" id="listenBtn">Load source player</button><div class="frame-wrap" id="frameWrap"><iframe id="player" title="Internet Archive show player" loading="lazy" allow="autoplay"></iframe><div class="source-row"><span id="sourceMeta"></span><a id="sourceLink" target="_blank" rel="noopener">View recording at the Internet Archive ↗</a></div></div></div></div></div></section>

<section class="section" id="rooms"><div class="section-head"><span class="k">02 / Exhibition rooms</span><h2>The music,<br>made visible.</h2></div><div class="gallery-tools"><div><label for="sort">Sort</label><select id="sort"><option value="curated">Curated</option><option value="title">Title A→Z</option><option value="era">Era</option></select></div><div><label for="density">Density</label><input id="density" type="range" min="1" max="4" value="3"></div></div><div class="builds" id="builds"></div></section>

<section class="section" id="source"><div class="source-note"><h2>The source stays the source.</h2><p><strong>These recordings are not copied, sold, or re-hosted here.</strong> They are community recordings made available for listening through the Grateful Dead collection at the Internet Archive’s Live Music Archive. The embedded player and every source link resolve to archive.org. Availability and recording notes remain governed by the source item.</p></div></section>
</main>
<footer><span>DEAD · agentabrams.com</span><span>Curated from Steve’s music source · Internet Archive / Live Music Archive</span><span>Listen only · no commercial reuse implied</span></footer>
<script>
const shows=[
{"year":1969,"date":"February 27, 1969","title":"Fillmore West","sub":"San Francisco · primal psychedelic era","id":"gd69-02-27.sbd.16track.kaplan.6315.sbeok.shnf","downloads":"106k+ source listens","note":"A sixteen-track document from the run that shaped Live/Dead: spacious, volatile, and willing to let a song dissolve into pure architecture."},
{"year":1970,"date":"May 24, 1970","title":"Newcastle-Under-Lyme","sub":"Newcastle · acoustic-and-electric era","id":"gd70-05-24.sbd.hanno.6481.sbeok.shnf","downloads":"★8.4 · 25 reviews","note":"Two bands in one night — the acoustic Dead and the electric Dead — caught overseas with the songs of Workingman’s Dead and American Beauty still fresh in their hands."},
{"year":1971,"date":"April 14, 1971","title":"Christy Mathewson Stadium, Bucknell U.","sub":"Lewisburg · Skull & Roses era","id":"gd71-04-14.sbd.lai.6250.sbefail.shnf","downloads":"★8.8 · 22 reviews","note":"Lean, road-tested, and bright. The playing has the confidence of a band that has learned to say more with less."},
{"year":1972,"date":"August 27, 1972","title":"Veneta","sub":"Oregon · field, heat, and open sky","id":"gd72-08-27.sbd.orf.3328.sbeok.shnf","downloads":"489k+ source listens","note":"An outdoor performance with the horizon left in the mix. The playing feels communal and unhurried—the sound of a band and audience occupying the same weather."},
{"year":1973,"date":"February 15, 1973","title":"Dane County Coliseum","sub":"Madison · jazz-loose / Wake of the Flood era","id":"gd73-02-15.sbd.hall.1580.sbeok.shnf","downloads":"★9.3 · 199 reviews","note":"A famously beloved night from the group’s most conversational year — long, patient jams that breathe and turn like weather."},
{"year":1974,"date":"June 23, 1974","title":"Jai-Alai Fronton","sub":"Miami · Wall of Sound era","id":"gd74-06-23.sbd.cribbs.16780.sbeok.shnf","downloads":"160k+ source listens","note":"Scale without blur. This Wall of Sound performance pairs enormous dynamic range with unusually clear instrumental space."},
{"year":1976,"date":"June 10, 1976","title":"Boston Music Hall","sub":"Boston · return-from-hiatus era","id":"gd76-06-10.sbd.bertha-ashley.23370.sbeok.shnf","downloads":"★8.6 · 32 reviews","note":"The comeback year, slowed down and deepened. Tempos relax, the segues grow ambitious, and the ensemble listens harder than ever."},
{"year":1977,"date":"May 8, 1977","title":"Cornell","sub":"Ithaca · Barton Hall","id":"gd77-05-08.sbd.hicks.4982.sbeok.shnf","downloads":"1.45m+ source listens","note":"The famous reference point: controlled momentum, luminous ensemble playing, and a recording that has become part of American musical memory."},
{"year":1978,"date":"February 1, 1978","title":"Uptown Theater","sub":"Chicago · tight & funky late-’70s era","id":"gd78-02-01.sbd.parillo.1017.sbeok.shnf","downloads":"★9.1 · 25 reviews","note":"Muscular and precise. The rhythm section locks into a deep pocket while the jams stay adventurous."},
{"year":1981,"date":"March 21, 1981","title":"Rainbow Theatre","sub":"London · European-tour era","id":"gd81-03-21.sbd.clugston.6666.sbeok.shnf","downloads":"★9 · 9 reviews","note":"An overseas soundboard with a room-filling roar — a hot, compact set from the band’s early-’80s touring peak."},
{"year":1985,"date":"April 27, 1985","title":"Frost Amphitheatre","sub":"Palo Alto · 20th-anniversary / Frost era","id":"gd85-04-27.sbd.jerugim.359.sbeok.shnf","downloads":"★9.5 · 31 reviews","note":"A luminous afternoon in the Palo Alto sun. One of the most treasured recordings of the mid-’80s, warm and unhurried."},
{"year":1987,"date":"January 28, 1987","title":"S.F Civic Auditorium","sub":"San Francisco · In the Dark comeback era","id":"gd1987-01-28.sbd.walker-scotton.miller.83286.flac16","downloads":"★5.9 · 32 reviews","note":"The comeback-record year at home in San Francisco — a band rediscovering its audience and its reach."},
{"year":1989,"date":"December 31, 1989","title":"Oakland-Alameda County Coliseum","sub":"Oakland · late-peak / Built to Last era","id":"gd89-12-31.sbd.bertha-ashley.18674.sbeok.shnf","downloads":"★7.5 · 14 reviews","note":"New Year’s Eve in Oakland: a big, celebratory night from the band’s remarkable late-decade resurgence."},
{"year":1990,"date":"March 29, 1990","title":"Nassau","sub":"Uniondale · late-era expansion","id":"gd90-03-29.aud-fob.set2.unknown.1317.sbeok.shnf","downloads":"231k+ source listens","note":"A late-period high-water mark where the band’s expanded palette meets the immediacy of a strong audience recording."},
{"year":1991,"date":"October 31, 1991","title":"Oakland-Alameda County Coliseum","sub":"Oakland · post-Brent / Bruce Hornsby era","id":"gd91-10-31.sbd.gardner.2897.sbeok.shnf","downloads":"★9.8 · 56 reviews","note":"Halloween in Oakland, and a high-water mark of the early ’90s — a beautifully reviewed soundboard, expansive and generous."},
{"year":1993,"date":"March 24, 1993","title":"Dean Smith Center","sub":"Chapel Hill · Vince era / stadium years","id":"gd93-03-24.sbd.keyser.25664.sbeok.flacf","downloads":"★8.3 · 41 reviews","note":"A strong, well-loved night from the final chapter — the songbook wide open and the jams still reaching."},
{"year":1994,"date":"October 5, 1994","title":"The Spectrum","sub":"Philadelphia · final-years era","id":"gd94-10-05.sbd.unknown.8030.sbeok.shnf","downloads":"★9.4 · 31 reviews","note":"Late-era grandeur at the Spectrum. A superb soundboard from one of the last great runs, played like the band knew every night counted."},
{"year":1995,"date":"July 9, 1995","title":"Soldier Field","sub":"Chicago · the final show","id":"gd95-07-09.sbd.7233.sbeok.shnf","downloads":"★7 · 361 reviews","note":"The last time. July 9, 1995 in Chicago — the final Grateful Dead concert with Jerry Garcia. Not the band’s most flawless night, but the closing of the circle, and the most-remembered recording of the year."}
];
const rooms=[
{n:'01',id:'riverboat-masquerade',title:'Scarlet Riverboat Masquerade',era:1969,img:'room/cover.png',url:'/room/',desc:'An animated listening room. A paddlewheel riverboat and masked dancers turn to a live show streamed from the archive — motion composed by hand, not by the waveform.'},
{n:'02',id:'long-strange-archive',title:'The Long Strange Archive',era:1965,img:'https://gallery.agentabrams.com/builds/long-strange-archive/cover.png',desc:'Handbills, tickets, photographs, fan objects, and a cultural timeline.'},
{n:'03',id:'deadhead-print-lab',title:'Deadhead Print Lab',era:1967,img:'https://gallery.agentabrams.com/builds/deadhead-print-lab/cover.png',desc:'A working psychedelic print studio of layers, ink, paper, and type.'},
{n:'04',id:'wall-of-sound',title:'Wall of Sound',era:1974,img:'https://gallery.agentabrams.com/builds/wall-of-sound/cover.png',desc:'Live sound as architecture, seen from four listening positions.'},
{n:'05',id:'routes-residencies-rituals',title:'Routes, Residencies & Rituals',era:1977,img:'https://gallery.agentabrams.com/builds/routes-residencies-rituals/cover.png',desc:'Tour geography, venue memory, and the rituals of a traveling community.'},
{n:'06',id:'objects-golden-road',title:'Objects in the Golden Road',era:1990,img:'https://gallery.agentabrams.com/builds/objects-golden-road/cover.png',desc:'Eight imagined artifacts, cataloged with provenance and care.'}
];
let current=7;
const $=s=>document.querySelector(s);
function renderShows(){ $('#shows').innerHTML=shows.map((s,i)=>`<button class="show ${i===current?'on':''}" data-i="${i}" aria-pressed="${i===current}"><span class="year">${s.year}</span><span><b>${s.title}</b><small>${s.sub}</small></span></button>`).join(''); }
function selectShow(i){current=i;const s=shows[i];renderShows();$('#stageDate').textContent=s.date;$('#stageTitle').textContent=s.title;$('#stageNote').textContent=s.note;$('#frameWrap').classList.remove('on');$('#player').src='about:blank';$('#listenBtn').hidden=false;$('#listenBtn').textContent='Load source player';$('#sourceLink').href='https://archive.org/details/'+s.id;$('#sourceMeta').textContent=s.downloads+' · Community recording';localStorage.setItem('dead:selected-show:v2',String(i));}
$('#shows').addEventListener('click',e=>{const b=e.target.closest('[data-i]');if(b)selectShow(Number(b.dataset.i));});
$('#listenBtn').addEventListener('click',()=>{const s=shows[current];$('#player').src='https://archive.org/embed/'+s.id;$('#frameWrap').classList.add('on');$('#listenBtn').hidden=true;});
function renderRooms(){let list=rooms.slice();const sort=$('#sort').value;if(sort==='title')list.sort((a,b)=>a.title.localeCompare(b.title));if(sort==='era')list.sort((a,b)=>a.era-b.era);$('#builds').innerHTML=list.map(r=>{const internal=!!r.url;const href=internal?r.url:('https://gallery.agentabrams.com/#'+r.id);const tgt=internal?'':' target="_blank" rel="noopener"';const go=internal?'Enter the room →':'Enter exhibition ↗';return `<a class="build" href="${href}"${tgt}><div class="visual" style="background-image:url('${r.img}')"></div><div class="copy"><span class="n">ROOM ${r.n}</span><h3>${r.title}</h3><p>${r.desc}</p><span class="go">${go}</span></div></a>`;}).join('');}
const savedShowRaw=localStorage.getItem('dead:selected-show:v2');const savedShow=savedShowRaw===null?NaN:Number(savedShowRaw);if(Number.isInteger(savedShow)&&savedShow>=0&&savedShow<shows.length)current=savedShow;
const savedSort=localStorage.getItem('dead:sort');if(savedSort)$('#sort').value=savedSort;const savedDensity=localStorage.getItem('dead:density');if(savedDensity){$('#density').value=savedDensity;document.documentElement.style.setProperty('--cols',savedDensity)}
$('#sort').addEventListener('change',()=>{localStorage.setItem('dead:sort',$('#sort').value);renderRooms()});$('#density').addEventListener('input',()=>{const v=$('#density').value;document.documentElement.style.setProperty('--cols',v);localStorage.setItem('dead:density',v)});
selectShow(current);renderRooms();
</script>
</body>
</html>