Spaces:

222tuesday
/

ccrframework

Running

App Files Files Community

222tuesday commited on Jul 31

Commit

d6fd62c

verified ·

1 Parent(s): 7385041

<!DOCTYPE html> <html lang="en" class="scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Forensic Musicology: A Sonic Deconstruction (1968-1980)</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> <style> /* Custom Styles for Cyberpunk Brutalist Aesthetic / body { background-color: #0A0A0A; color: #E5E5E5; font-family: 'Inter', sans-serif; } .font-mono { font-family: 'Roboto Mono', monospace; } .font-sans { font-family: 'Inter', sans-serif; } .cyber-glitch { text-shadow: 0.05em 0 0 rgba(0, 255, 255, 0.75), -0.025em -0.05em 0 rgba(255, 0, 0, 0.75), 0.025em 0.05em 0 rgba(0, 255, 0, 0.75); animation: glitch 5s infinite linear alternate-reverse; } .cyber-glow { transition: all 0.3s ease; } .cyber-glow:hover { text-shadow: 0 0 8px rgba(0, 255, 255, 0.6); color: #00FFFF; } .cyber-border { border: 1px solid rgba(229, 231, 235, 0.2); transition: border-color 0.3s ease; } .cyber-border:hover { border-color: rgba(0, 255, 255, 0.5); } .content-section { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .content-section.is-visible { opacity: 1; transform: translateY(0); } .signal-path-arrow { font-family: 'Roboto Mono', monospace; color: #00FFFF; } .timeline::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0; width: 2px; background-color: rgba(229, 231, 235, 0.2); } .timeline-item { position: relative; } .timeline-dot { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); width: 16px; height: 16px; background-color: #0A0A0A; border: 2px solid #00FFFF; border-radius: 50%; z-index: 10; } .table-header { background-color: rgba(229, 231, 235, 0.05); } @keyframes glitch { 0% { text-shadow: 0.05em 0 0 rgba(0,255,255,0.75), -0.05em -0.025em 0 rgba(255,0,0,0.75), -0.025em 0.05em 0 rgba(0,255,0,0.75); } 14% { text-shadow: 0.05em 0 0 rgba(0,255,255,0.75), -0.05em -0.025em 0 rgba(255,0,0,0.75), -0.025em 0.05em 0 rgba(0,255,0,0.75); } 15% { text-shadow: -0.05em -0.025em 0 rgba(0,255,255,0.75), 0.025em 0.025em 0 rgba(255,0,0,0.75), -0.05em -0.05em 0 rgba(0,255,0,0.75); } 49% { text-shadow: -0.05em -0.025em 0 rgba(0,255,255,0.75), 0.025em 0.025em 0 rgba(255,0,0,0.75), -0.05em -0.05em 0 rgba(0,255,0,0.75); } 50% { text-shadow: 0.025em 0.05em 0 rgba(0,255,255,0.75), 0.05em 0 0 rgba(255,0,0,0.75), 0 -0.05em 0 rgba(0,255,0,0.75); } 99% { text-shadow: 0.025em 0.05em 0 rgba(0,255,255,0.75), 0.05em 0 0 rgba(255,0,0,0.75), 0 -0.05em 0 rgba(0,255,0,0.75); } 100% { text-shadow: -0.025em 0 0 rgba(0,255,255,0.75), -0.025em -0.025em 0 rgba(255,0,0,0.75), -0.025em -0.05em 0 rgba(0,255,0,0.75); } } </style> </head> <body class="antialiased">  <header class="p-4 md:p-8 sticky top-0 z-50 bg-[#0A0A0A]/80 backdrop-blur-sm cyber-border border-b"> <div class="container mx-auto flex justify-between items-center"> <h1 class="font-mono text-lg md:text-xl font-bold tracking-widest uppercase cyber-glitch">F.M.A.</h1> <nav class="hidden md:flex space-x-6 font-mono text-sm"> <a href="#alchemists" class="cyber-glow">I. ALCHEMISTS</a> <a href="#cathedral" class="cyber-glow">II. CATHEDRAL</a> <a href="#language" class="cyber-glow">III. LANGUAGE</a> <a href="#anomalies" class="cyber-glow">IV. ANOMALIES</a> </nav> </div> </header> <main class="container mx-auto p-4 md:p-8">  <section class="text-center my-16 md:my-24 content-section"> <h2 class="font-mono text-3xl md:text-5xl lg:text-6xl font-bold tracking-tighter uppercase">Sonic Deconstruction</h2> <p class="text-lg md:text-xl text-gray-400 mt-4 max-w-3xl mx-auto">A Forensic Analysis of Audio Engineering & Production // 1968-1980</p> </section>  <section id="alchemists" class="my-24 md:my-32 content-section"> <h3 class="font-mono text-2xl md:text-3xl font-bold border-b border-cyan-400/50 pb-2 mb-8">I. The Alchemists of Tone</h3> <p class="text-gray-400 max-w-4xl mb-12">The era's sound was sculpted by instrumentalists who treated technology as an extension of their artistic will. They were sonic architects, pioneering new techniques and modifying their gear to forge the foundational tones of modern rock.</p> <div class="space-y-12"> <h4 class="font-mono text-xl font-semibold tracking-wide">Signal Chain Archaeology</h4>  <article class="cyber-border p-6 rounded-lg"> <h5 class="font-mono text-lg font-bold text-cyan-400">Tony Iommi // Architect of Heavy</h5> <p class="text-sm text-gray-400 mb-4">Injury-driven innovation: downtuned guitars and light strings required a treble booster to cut through, creating the first true high-gain metal tone.</p> <div class="flex flex-wrap items-center gap-4 text-center"> <div class="cyber-border p-3 rounded-md flex-grow">Gibson SG ('Monkey')</div> <div class="signal-path-arrow text-2xl">→</div> <div class="cyber-border p-3 rounded-md flex-grow">Dallas Rangemaster Treble Booster</div> <div class="signal-path-arrow text-2xl">→</div> <div class="cyber-border p-3 rounded-md flex-grow">Laney/Orange Amps</div> </div> </article>  <article class="cyber-border p-6 rounded-lg"> <h5 class="font-mono text-lg font-bold text-cyan-400">Jimmy Page // The Studio Auteur</h5> <p class="text-sm text-gray-400 mb-4">A master of layering and ambient miking. Famously used a Telecaster into a Supro amp for the 'Stairway' solo and pioneered direct-to-console distortion.</p> <div class="flex flex-wrap items-center gap-4 text-center"> <div class="cyber-border p-3 rounded-md flex-grow">Fender Telecaster / Gibson Les Paul</div> <div class="signal-path-arrow text-2xl">→</div> <div class="cyber-border p-3 rounded-md flex-grow">Maestro Echoplex EP-2 (Preamp Boost)</div> <div class="signal-path-arrow text-2xl">→</div> <div class="cyber-border p-3 rounded-md flex-grow">Marshall / Supro Amps</div> </div> </article>  <article class="cyber-border p-6 rounded-lg"> <h5 class="font-mono text-lg font-bold text-cyan-400">Ritchie Blackmore // Stratocaster Fury</h5> <p class="text-sm text-gray-400 mb-4">Pursued controlled violence with scalloped fretboards and heavily modified Marshall Major heads, using a tape deck as a preamp for searing gain.</p> <div class="flex flex-wrap items-center gap-4 text-center"> <div class="cyber-border p-3 rounded-md flex-grow">Fender Stratocaster (Scalloped)</div> <div class="signal-path-arrow text-2xl">→</div> <div class="cyber-border p-3 rounded-md flex-grow">Aiwa Tape Deck (Preamp)</div> <div class="signal-path-arrow text-2xl">→</div> <div class="cyber-border p-3 rounded-md flex-grow">Modified Marshall Major 200W</div> </div> </article>  <article class="cyber-border p-6 rounded-lg"> <h5 class="font-mono text-lg font-bold text-cyan-400">Robert Fripp // The Avant-Garde Intellectual</h5> <p class="text-sm text-gray-400 mb-4">Pioneered "Frippertronics," a real-time tape-looping system using two Revox tape machines to build complex, evolving soundscapes. The amplifier was a clean platform (Hiwatt) for a sound created entirely by effects and technique.</p> <div class="flex flex-wrap items-center gap-4 text-center"> <div class="cyber-border p-3 rounded-md flex-grow">Gibson Les Paul Custom</div> <div class="signal-path-arrow text-2xl">→</div> <div class="cyber-border p-3 rounded-md flex-grow">EHX Big Muff / Fuzz</div> <div class="signal-path-arrow text-2xl">→</div> <div class="cyber-border p-3 rounded-md flex-grow">Hiwatt DR103 (For Clean Headroom)</div> <div class="signal-path-arrow text-2xl">→</div> <div class="cyber-border p-3 rounded-md flex-grow">Frippertronics Tape Loop System</div> </div> </article> </div> </section>  <section id="cathedral" class="my-24 md:my-32 content-section"> <h3 class="font-mono text-2xl md:text-3xl font-bold border-b border-cyan-400/50 pb-2 mb-8">II. The Cathedral of Sound</h3> <p class="text-gray-400 max-w-4xl mb-12">The recording studio evolved from a documentary space into an instrument itself. The philosophies of producers and the unique sonic signatures of iconic hardware defined the sound of classic records.</p> <div class="overflow-x-auto"> <h4 class="font-mono text-xl font-semibold tracking-wide mb-6">Console Forensics: Neve vs. API vs. Trident vs. Helios</h4> <table class="w-full text-left border-collapse cyber-border"> <thead> <tr class="table-header font-mono uppercase text-sm"> <th class="p-4">Console</th> <th class="p-4">Sonic Signature</th> <th class="p-4">Key Technology</th> <th class="p-4">Defining Artists</th> </tr> </thead> <tbody> <tr class="border-t border-gray-200/20"> <td class="p-4 font-bold">Neve 80-Series</td> <td class="p-4">Huge, punchy, warm, "larger-than-life." The definitive British rock sound.</td> <td class="p-4 font-mono text-sm">Class-A, transformer-balanced (1073)</td> <td class="p-4">Pink Floyd, Queen, Nirvana</td> </tr> <tr class="border-t border-gray-200/20"> <td class="p-4 font-bold">API Consoles</td> <td class="p-4">Big, bold, punchy, clear. The definitive American rock sound.</td> <td class="p-4 font-mono text-sm">Discrete 2520 op-amp, Proportional Q EQ</td> <td class="p-4">Aerosmith, Heart, Funk & Soul records</td> </tr> <tr class="border-t border-gray-200/20"> <td class="p-4 font-bold">Trident A-Range</td> <td class="p-4">Smoother, creamier, and highly "musical." Famous for its colorful EQ.</td> <td class="p-4 font-mono text-sm">All-discrete, Inductor-based EQ</td> <td class="p-4">David Bowie, Queen, Elton John</td> </tr> <tr class="border-t border-gray-200/20"> <td class="p-4 font-bold">Helios Type 69</td> <td class="p-4">Open, slightly gritty, with a unique "woody" midrange. Less polished than its peers.</td> <td class="p-4 font-mono text-sm">Lustraphone transformer preamps, 3-band EQ</td> <td class="p-4">Led Zeppelin, The Who, Rolling Stones</td> </tr> </tbody> </table> </div> <div class="mt-16"> <h4 class="font-mono text-xl font-semibold tracking-wide mb-12 text-center">Studio Technology Evolution</h4> <div class="relative timeline max-w-2xl mx-auto"> <div class="timeline-item mb-12"> <div class="timeline-dot"></div> <div class="w-1/2 ml-auto pl-8"><div class="cyber-border p-4 rounded-lg"><h5 class="font-mono font-bold">1968-1970: Foundation</h5><p class="text-sm text-gray-400">8-track recording becomes standard. Transistor consoles and effects pedals emerge.</p></div></div> </div> <div class="timeline-item mb-12"> <div class="timeline-dot"></div> <div class="w-1/2 mr-auto pr-8 text-right"><div class="cyber-border p-4 rounded-lg"><h5 class="font-mono font-bold">1971-1974: Expansion</h5><p class="text-sm text-gray-400">16-track enables complexity. Minimoog makes synths portable. The project studio is born (e.g., Mike Oldfield's Tubular Bells*).</p></div></div> </div> <div class="timeline-item mb-12"> <div class="timeline-dot"></div> <div class="w-1/2 ml-auto pl-8"><div class="cyber-border p-4 rounded-lg"><h5 class="font-mono font-bold">1975-1978: Sophistication</h5><p class="text-sm text-gray-400">24-track becomes standard. Digital effects (reverb, delay) are introduced. Giorgio Moroder's "I Feel Love" (1977) pioneers the synth-sequenced dance track.</p></div></div> </div> </div> </div> </section>  <section id="language" class="my-24 md:my-32 content-section"> <h3 class="font-mono text-2xl md:text-3xl font-bold border-b border-cyan-400/50 pb-2 mb-8">III. The Language of an Era</h3> <p class="text-gray-400 max-w-4xl mb-12">The sonic revolution was mirrored by a compositional one. Rock's musical vocabulary expanded beyond its blues roots to incorporate modal harmony, classical counterpoint, and complex rhythmic structures.</p> <div class="grid md:grid-cols-2 gap-8"> <article class="cyber-border p-6 rounded-lg"> <h4 class="font-mono text-lg font-bold">Mixolydian Mode</h4> <p class="text-sm text-gray-400 mb-4">Major scale with a flat 7th ($b7$). The sound of blues-rock and Southern rock. Bright and powerful with a bluesy edge.</p> <div class="font-mono text-cyan-400 p-4 bg-black/50 rounded-md">I - ii - iii° - IV - v - vi - $b$VII</div> <p class="text-xs mt-2 text-gray-500">Key Progression: I - $b$VII - IV</p> </article> <article class="cyber-border p-6 rounded-lg"> <h4 class="font-mono text-lg font-bold">Dorian Mode</h4> <p class="text-sm text-gray-400 mb-4">Natural minor with a raised 6th. The "cooler," sophisticated minor sound of hard rock and prog.</p> <div class="font-mono text-cyan-400 p-4 bg-black/50 rounded-md">i - ii - $b$III - IV - v - vi° - $b$VII</div> <p class="text-xs mt-2 text-gray-500">Key Progression: i - IV</p> </article> </div> </section>  <section id="anomalies" class="my-24 md:my-32 content-section"> <h3 class="font-mono text-2xl md:text-3xl font-bold border-b border-cyan-400/50 pb-2 mb-8">IV. Declassified Histories & Sonic Anomalies</h3> <p class="text-gray-400 max-w-4xl mb-12">Beyond the established canon lie stories of radical divergence and iconoclastic production. These figures rejected mainstream techniques, pioneering sounds and philosophies that would prove deeply influential to post-punk, electronic music, and beyond.</p> <div class="space-y-12">  <article class="cyber-border p-6 rounded-lg"> <h5 class="font-mono text-lg font-bold text-cyan-400">Conny Plank // The Krautrock Anti-Producer</h5> <p class="text-sm text-gray-400 mb-4">A central figure in the German Krautrock scene, Plank's philosophy was a deliberate rejection of Anglo-American production norms. He treated the studio as a compositional tool for creating alien textures, favoring live, ambient drum sounds and radical tape manipulation over polished perfection. His work with Can, Neu!, and early Kraftwerk established a new sonic language free from blues lineage, directly influencing post-punk and electronic music.</p> </article>  <article class="cyber-border p-6 rounded-lg"> <h5 class="font-mono text-lg font-bold text-cyan-400">Giorgio Moroder // The Click Track Prophecy</h5> <p class="text-sm text-gray-400 mb-4">With Donna Summer's "I Feel Love" (1977), Moroder created a sound that was pure future shock. By syncing a Moog modular synthesizer's pulsing bassline to a click track—and nothing else—he severed dance music from its R&B and funk roots. It was the first major hit driven entirely by electronic rhythm, creating the foundational blueprint for synth-pop, techno, and all subsequent forms of electronic dance music. It was a sound built on metronomic precision, not human groove.</p> </article> </div> </section> </main> <footer class="text-center p-8 mt-16 border-t border-gray-200/20"> <p class="font-mono text-xs text-gray-500">ARTIFEX Labs // Forensic Musicology Division // Analysis Complete</p> </footer> <script> // JavaScript for scroll-triggered animations const sections = document.querySelectorAll('.content-section'); const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); } }); }, { threshold: 0.1 // Trigger when 10% of the element is visible }); sections.forEach(section => { observer.observe(section); }); </script> </body> </html> can you amake this cyberpunk brutalist galaaxy style, back and white, bodyfont Jura, boldy header all caps archivo black - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +320 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Cathedral Of Sound
-emoji: 🐠
-colorFrom: yellow
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: cathedral-of-sound
+emoji: 🐳
+colorFrom: blue
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,320 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Forensic Musicology: A Sonic Deconstruction (1968-1980)</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Jura:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        /* Custom Styles for Cyberpunk Brutalist Galactic Aesthetic */
+        body {
+            background-color: #000000;
+            color: #FFFFFF;
+            font-family: 'Jura', sans-serif;
+        }
+        .font-header {
+            font-family: 'Archivo Black', sans-serif;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+        }
+        .galactic-border {
+            border: 2px solid rgba(255, 255, 255, 0.15);
+            transition: all 0.3s ease;
+        }
+        .galactic-border:hover {
+            border-color: rgba(255, 255, 255, 0.5);
+        }
+        .galactic-glow {
+            transition: all 0.3s ease;
+        }
+        .galactic-glow:hover {
+            text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
+        }
+        .content-section {
+            opacity: 0;
+            transform: translateY(20px);
+            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+        }
+        .content-section.is-visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .signal-path-arrow {
+            color: #FFFFFF;
+            font-weight: bold;
+        }
+        .timeline::before {
+            content: '';
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: 0;
+            bottom: 0;
+            width: 1px;
+            background: linear-gradient(to bottom, transparent, #FFFFFF, transparent);
+        }
+        .timeline-item {
+            position: relative;
+        }
+        .timeline-dot {
+            position: absolute;
+            left: 50%;
+            top: 20px;
+            transform: translateX(-50%);
+            width: 16px;
+            height: 16px;
+            background-color: #000000;
+            border: 2px solid #FFFFFF;
+            border-radius: 50%;
+            z-index: 10;
+        }
+        .table-header {
+            background-color: rgba(255, 255, 255, 0.05);
+        }
+        .galactic-pattern {
+            background-image:
+                radial-gradient(circle at 10% 20%, rgba(255,255,255,0.02) 0%, transparent 20%),
+                radial-gradient(circle at 90% 80%, rgba(255,255,255,0.02) 0%, transparent 20%);
+        }
+        .galactic-divider {
+            height: 1px;
+            background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
+        }
+        .galactic-highlight {
+            position: relative;
+            display: inline-block;
+        }
+        .galactic-highlight::after {
+            content: '';
+            position: absolute;
+            bottom: -2px;
+            left: 0;
+            width: 100%;
+            height: 1px;
+            background: linear-gradient(to right, transparent, #FFFFFF, transparent);
+        }
+    </style>
+</head>
+<body class="antialiased galactic-pattern">
+    <!-- Header -->
+    <header class="p-4 md:p-8 sticky top-0 z-50 bg-black/80 backdrop-blur-sm galactic-border border-b">
+        <div class="container mx-auto flex justify-between items-center">
+            <h1 class="font-header text-lg md:text-xl tracking-widest">F.M.A.</h1>
+            <nav class="hidden md:flex space-x-6 font-header text-sm">
+                <a href="#alchemists" class="galactic-glow">I. ALCHEMISTS</a>
+                <a href="#cathedral" class="galactic-glow">II. CATHEDRAL</a>
+                <a href="#language" class="galactic-glow">III. LANGUAGE</a>
+                <a href="#anomalies" class="galactic-glow">IV. ANOMALIES</a>
+            </nav>
+        </div>
+    </header>
+    <main class="container mx-auto p-4 md:p-8">
+        <!-- Hero Section -->
+        <section class="text-center my-16 md:my-24 content-section">
+            <h2 class="font-header text-3xl md:text-5xl lg:text-6xl tracking-tighter">SONIC DECONSTRUCTION</h2>
+            <div class="galactic-divider my-6 max-w-2xl mx-auto"></div>
+            <p class="text-lg md:text-xl text-gray-300 mt-4 max-w-3xl mx-auto">A Forensic Analysis of Audio Engineering & Production // 1968-1980</p>
+        </section>
+        <!-- I. The Alchemists of Tone -->
+        <section id="alchemists" class="my-24 md:my-32 content-section">
+            <h3 class="font-header text-2xl md:text-3xl pb-2 mb-8 galactic-highlight">I. THE ALCHEMISTS OF TONE</h3>
+            <p class="text-gray-300 max-w-4xl mb-12">The era's sound was sculpted by instrumentalists who treated technology as an extension of their artistic will. They were sonic architects, pioneering new techniques and modifying their gear to forge the foundational tones of modern rock.</p>
+            <div class="space-y-12">
+                <h4 class="font-header text-xl tracking-wide">SIGNAL CHAIN ARCHAEOLOGY</h4>
+                <!-- Tony Iommi -->
+                <article class="galactic-border p-6 rounded-none">
+                    <h5 class="font-header text-lg text-white">TONY IOMMI // ARCHITECT OF HEAVY</h5>
+                    <p class="text-sm text-gray-300 mb-4">Injury-driven innovation: downtuned guitars and light strings required a treble booster to cut through, creating the first true high-gain metal tone.</p>
+                    <div class="flex flex-wrap items-center gap-4 text-center">
+                        <div class="galactic-border p-3 rounded-none flex-grow">GIBSON SG ('MONKEY')</div>
+                        <div class="signal-path-arrow text-2xl">→</div>
+                        <div class="galactic-border p-3 rounded-none flex-grow">DALLAS RANGEMASTER TREBLE BOOSTER</div>
+                        <div class="signal-path-arrow text-2xl">→</div>
+                        <div class="galactic-border p-3 rounded-none flex-grow">LANEY/ORANGE AMPS</div>
+                    </div>
+                </article>
+                <!-- Jimmy Page -->
+                <article class="galactic-border p-6 rounded-none">
+                    <h5 class="font-header text-lg text-white">JIMMY PAGE // THE STUDIO AUTEUR</h5>
+                    <p class="text-sm text-gray-300 mb-4">A master of layering and ambient miking. Famously used a Telecaster into a Supro amp for the 'Stairway' solo and pioneered direct-to-console distortion.</p>
+                    <div class="flex flex-wrap items-center gap-4 text-center">
+                        <div class="galactic-border p-3 rounded-none flex-grow">FENDER TELECASTER / GIBSON LES PAUL</div>
+                        <div class="signal-path-arrow text-2xl">→</div>
+                        <div class="galactic-border p-3 rounded-none flex-grow">MAESTRO ECHOPLEX EP-2 (PREAMP BOOST)</div>
+                        <div class="signal-path-arrow text-2xl">→</div>
+                        <div class="galactic-border p-3 rounded-none flex-grow">MARSHALL / SUPRO AMPS</div>
+                    </div>
+                </article>
+                <!-- Ritchie Blackmore -->
+                <article class="galactic-border p-6 rounded-none">
+                    <h5 class="font-header text-lg text-white">RITCHIE BLACKMORE // STRATOCASTER FURY</h5>
+                    <p class="text-sm text-gray-300 mb-4">Pursued controlled violence with scalloped fretboards and heavily modified Marshall Major heads, using a tape deck as a preamp for searing gain.</p>
+                    <div class="flex flex-wrap items-center gap-4 text-center">
+                        <div class="galactic-border p-3 rounded-none flex-grow">FENDER STRATOCASTER (SCALLOPED)</div>
+                        <div class="signal-path-arrow text-2xl">→</div>
+                        <div class="galactic-border p-3 rounded-none flex-grow">AIWA TAPE DECK (PREAMP)</div>
+                        <div class="signal-path-arrow text-2xl">→</div>
+                        <div class="galactic-border p-3 rounded-none flex-grow">MODIFIED MARSHALL MAJOR 200W</div>
+                    </div>
+                </article>
+                <!-- Robert Fripp -->
+                <article class="galactic-border p-6 rounded-none">
+                    <h5 class="font-header text-lg text-white">ROBERT FRIPP // THE AVANT-GARDE INTELLECTUAL</h5>
+                    <p class="text-sm text-gray-300 mb-4">Pioneered "Frippertronics," a real-time tape-looping system using two Revox tape machines to build complex, evolving soundscapes. The amplifier was a clean platform (Hiwatt) for a sound created entirely by effects and technique.</p>
+                    <div class="flex flex-wrap items-center gap-4 text-center">
+                        <div class="galactic-border p-3 rounded-none flex-grow">GIBSON LES PAUL CUSTOM</div>
+                        <div class="signal-path-arrow text-2xl">→</div>
+                        <div class="galactic-border p-3 rounded-none flex-grow">EHX BIG MUFF / FUZZ</div>
+                        <div class="signal-path-arrow text-2xl">→</div>
+                        <div class="galactic-border p-3 rounded-none flex-grow">HIWATT DR103 (FOR CLEAN HEADROOM)</div>
+                        <div class="signal-path-arrow text-2xl">→</div>
+                        <div class="galactic-border p-3 rounded-none flex-grow">FRIPPTRONICS TAPE LOOP SYSTEM</div>
+                    </div>
+                </article>
+            </div>
+        </section>
+        <!-- II. The Cathedral of Sound -->
+        <section id="cathedral" class="my-24 md:my-32 content-section">
+            <h3 class="font-header text-2xl md:text-3xl pb-2 mb-8 galactic-highlight">II. THE CATHEDRAL OF SOUND</h3>
+            <p class="text-gray-300 max-w-4xl mb-12">The recording studio evolved from a documentary space into an instrument itself. The philosophies of producers and the unique sonic signatures of iconic hardware defined the sound of classic records.</p>
+            <div class="overflow-x-auto">
+                <h4 class="font-header text-xl tracking-wide mb-6">CONSOLE FORENSICS: NEVE VS. API VS. TRIDENT VS. HELIOS</h4>
+                <table class="w-full text-left border-collapse galactic-border">
+                    <thead>
+                        <tr class="table-header font-header uppercase text-sm">
+                            <th class="p-4">CONSOLE</th>
+                            <th class="p-4">SONIC SIGNATURE</th>
+                            <th class="p-4">KEY TECHNOLOGY</th>
+                            <th class="p-4">DEFINING ARTISTS</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr class="border-t border-gray-200/10">
+                            <td class="p-4 font-bold">NEVE 80-SERIES</td>
+                            <td class="p-4">Huge, punchy, warm, "larger-than-life." The definitive British rock sound.</td>
+                            <td class="p-4 text-sm">Class-A, transformer-balanced (1073)</td>
+                            <td class="p-4">Pink Floyd, Queen, Nirvana</td>
+                        </tr>
+                        <tr class="border-t border-gray-200/10">
+                            <td class="p-4 font-bold">API CONSOLES</td>
+                            <td class="p-4">Big, bold, punchy, clear. The definitive American rock sound.</td>
+                            <td class="p-4 text-sm">Discrete 2520 op-amp, Proportional Q EQ</td>
+                            <td class="p-4">Aerosmith, Heart, Funk & Soul records</td>
+                        </tr>
+                        <tr class="border-t border-gray-200/10">
+                            <td class="p-4 font-bold">TRIDENT A-RANGE</td>
+                            <td class="p-4">Smoother, creamier, and highly "musical." Famous for its colorful EQ.</td>
+                            <td class="p-4 text-sm">All-discrete, Inductor-based EQ</td>
+                            <td class="p-4">David Bowie, Queen, Elton John</td>
+                        </tr>
+                        <tr class="border-t border-gray-200/10">
+                            <td class="p-4 font-bold">HELIOS TYPE 69</td>
+                            <td class="p-4">Open, slightly gritty, with a unique "woody" midrange. Less polished than its peers.</td>
+                            <td class="p-4 text-sm">Lustraphone transformer preamps, 3-band EQ</td>
+                            <td class="p-4">Led Zeppelin, The Who, Rolling Stones</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="mt-16">
+                <h4 class="font-header text-xl tracking-wide mb-12 text-center">STUDIO TECHNOLOGY EVOLUTION</h4>
+                <div class="relative timeline max-w-2xl mx-auto">
+                    <div class="timeline-item mb-12">
+                        <div class="timeline-dot"></div>
+                        <div class="w-1/2 ml-auto pl-8"><div class="galactic-border p-4 rounded-none"><h5 class="font-header">1968-1970: FOUNDATION</h5><p class="text-sm text-gray-300">8-track recording becomes standard. Transistor consoles and effects pedals emerge.</p></div></div>
+                    </div>
+                    <div class="timeline-item mb-12">
+                        <div class="timeline-dot"></div>
+                        <div class="w-1/2 mr-auto pr-8 text-right"><div class="galactic-border p-4 rounded-none"><h5 class="font-header">1971-1974: EXPANSION</h5><p class="text-sm text-gray-300">16-track enables complexity. Minimoog makes synths portable. The project studio is born (e.g., Mike Oldfield's *Tubular Bells*).</p></div></div>
+                    </div>
+                    <div class="timeline-item mb-12">
+                        <div class="timeline-dot"></div>
+                        <div class="w-1/2 ml-auto pl-8"><div class="galactic-border p-4 rounded-none"><h5 class="font-header">1975-1978: SOPHISTICATION</h5><p class="text-sm text-gray-300">24-track becomes standard. Digital effects (reverb, delay) are introduced. Giorgio Moroder's "I Feel Love" (1977) pioneers the synth-sequenced dance track.</p></div></div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- III. The Language of an Era -->
+        <section id="language" class="my-24 md:my-32 content-section">
+            <h3 class="font-header text-2xl md:text-3xl pb-2 mb-8 galactic-highlight">III. THE LANGUAGE OF AN ERA</h3>
+            <p class="text-gray-300 max-w-4xl mb-12">The sonic revolution was mirrored by a compositional one. Rock's musical vocabulary expanded beyond its blues roots to incorporate modal harmony, classical counterpoint, and complex rhythmic structures.</p>
+            <div class="grid md:grid-cols-2 gap-8">
+                <article class="galactic-border p-6 rounded-none">
+                    <h4 class="font-header text-lg">MIXOLYDIAN MODE</h4>
+                    <p class="text-sm text-gray-300 mb-4">Major scale with a flat 7th ($b7$). The sound of blues-rock and Southern rock. Bright and powerful with a bluesy edge.</p>
+                    <div class="p-4 bg-black/50 rounded-none border border-white/10">
+                        <span class="font-mono">I - ii - iii° - IV - v - vi - $b$VII</span>
+                    </div>
+                    <p class="text-xs mt-2 text-gray-400">Key Progression: I - $b$VII - IV</p>
+                </article>
+                <article class="galactic-border p-6 rounded-none">
+                    <h4 class="font-header text-lg">DORIAN MODE</h4>
+                    <p class="text-sm text-gray-300 mb-4">Natural minor with a raised 6th. The "cooler," sophisticated minor sound of hard rock and prog.</p>
+                    <div class="p-4 bg-black/50 rounded-none border border-white/10">
+                        <span class="font-mono">i - ii - $b$III - IV - v - vi° - $b$VII</span>
+                    </div>
+                    <p class="text-xs mt-2 text-gray-400">Key Progression: i - IV</p>
+                </article>
+            </div>
+        </section>
+        <!-- IV. Declassified Histories & Sonic Anomalies -->
+        <section id="anomalies" class="my-24 md:my-32 content-section">
+            <h3 class="font-header text-2xl md:text-3xl pb-2 mb-8 galactic-highlight">IV. DECLASSIFIED HISTORIES & SONIC ANOMALIES</h3>
+            <p class="text-gray-300 max-w-4xl mb-12">Beyond the established canon lie stories of radical divergence and iconoclastic production. These figures rejected mainstream techniques, pioneering sounds and philosophies that would prove deeply influential to post-punk, electronic music, and beyond.</p>
+            <div class="space-y-12">
+                <!-- Conny Plank -->
+                <article class="galactic-border p-6 rounded-none">
+                    <h5 class="font-header text-lg text-white">CONNY PLANK // THE KRAUTROCK ANTI-PRODUCER</h5>
+                    <p class="text-sm text-gray-300 mb-4">A central figure in the German Krautrock scene, Plank's philosophy was a deliberate rejection of Anglo-American production norms. He treated the studio as a compositional tool for creating alien textures, favoring live, ambient drum sounds and radical tape manipulation over polished perfection. His work with Can, Neu!, and early Kraftwerk established a new sonic language free from blues lineage, directly influencing post-punk and electronic music.</p>
+                </article>
+                <!-- Giorgio Moroder -->
+                <article class="galactic-border p-6 rounded-none">
+                    <h5 class="font-header text-lg text-white">GIORGIO MORODER // THE CLICK TRACK PROPHECY</h5>
+                    <p class="text-sm text-gray-300 mb-4">With Donna Summer's "I Feel Love" (1977), Moroder created a sound that was pure future shock. By syncing a Moog modular synthesizer's pulsing bassline to a click track—and nothing else—he severed dance music from its R&B and funk roots. It was the first major hit driven entirely by electronic rhythm, creating the foundational blueprint for synth-pop, techno, and all subsequent forms of electronic dance music. It was a sound built on metronomic precision, not human groove.</p>
+                </article>
+            </div>
+        </section>
+    </main>
+    <footer class="text-center p-8 mt-16 border-t border-gray-200/10">
+        <p class="text-xs text-gray-400">ARTIFEX LABS // FORENSIC MUSICOLOGY DIVISION // ANALYSIS COMPLETE</p>
+    </footer>
+    <script>
+        // JavaScript for scroll-triggered animations
+        const sections = document.querySelectorAll('.content-section');
+        const observer = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('is-visible');
+                }
+            });
+        }, {
+            threshold: 0.1 // Trigger when 10% of the element is visible
+        });
+        sections.forEach(section => {
+            observer.observe(section);
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=222tuesday/cathedral-of-sound" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>