Created
January 11, 2026 00:47
-
-
Save mbutler/833428cbe242fdfe36511a9ff57244f6 to your computer and use it in GitHub Desktop.
Red Amulet Intermedia System home
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>RED AMULET | Intermedia Systems</title> | |
| <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=IBM+Plex+Mono:wght@300;400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-color: #080808; | |
| --text-main: #D4D4D4; | |
| --text-dim: #666666; | |
| --accent-red: #FF2A2A; | |
| --border-color: #333333; | |
| --code-bg: #111111; | |
| --spacing: 3rem; | |
| } | |
| html { scroll-behavior: smooth; } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background-color: var(--bg-color); | |
| color: var(--text-main); | |
| font-family: 'IBM Plex Mono', monospace; | |
| line-height: 1.6; | |
| font-size: 14px; | |
| overflow-x: hidden; | |
| } | |
| /* UTILITIES */ | |
| a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: 0.2s; } | |
| a:hover { color: var(--accent-red); border-bottom: 1px solid var(--accent-red); } | |
| .red { color: var(--accent-red); } | |
| .dim { color: var(--text-dim); } | |
| .caps { text-transform: uppercase; letter-spacing: 0.05em; } | |
| .blur { filter: blur(4px); user-select: none; opacity: 0.7; } | |
| /* GRID LAYOUT */ | |
| .grid-container { | |
| display: grid; | |
| grid-template-columns: 250px 1fr; | |
| min-height: 100vh; | |
| border-left: 1px solid var(--border-color); | |
| border-right: 1px solid var(--border-color); | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| /* SIDEBAR (NAVIGATION) */ | |
| .sidebar { | |
| border-right: 1px solid var(--border-color); | |
| padding: var(--spacing) 2rem; | |
| position: sticky; | |
| top: 0; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| } | |
| .logo { | |
| font-weight: 600; | |
| font-size: 16px; | |
| margin-bottom: 4rem; | |
| display: block; | |
| border-bottom: none !important; | |
| } | |
| .nav-links ul { list-style: none; } | |
| .nav-links li { margin-bottom: 1rem; } | |
| .nav-links a { font-size: 13px; color: var(--text-dim); } | |
| .nav-links a:hover { color: var(--text-main); } | |
| .meta-data { font-size: 11px; color: var(--text-dim); font-family: monospace; } | |
| .meta-row { display: flex; justify-content: space-between; margin-bottom: 0.5rem; } | |
| /* MAIN CONTENT */ | |
| .content { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* SECTIONS */ | |
| section { | |
| border-bottom: 1px solid var(--border-color); | |
| padding: 6rem var(--spacing); | |
| } | |
| h1 { | |
| font-weight: 400; | |
| font-size: clamp(2rem, 4vw, 3.5rem); | |
| line-height: 1.1; | |
| margin-bottom: 3rem; | |
| max-width: 25ch; | |
| letter-spacing: -0.02em; | |
| } | |
| h2 { | |
| font-size: 12px; | |
| margin-bottom: 2rem; | |
| color: var(--accent-red); | |
| font-weight: 600; | |
| } | |
| h3 { | |
| font-size: 18px; | |
| font-weight: 400; | |
| margin-bottom: 1rem; | |
| color: var(--text-main); | |
| } | |
| p { | |
| max-width: 65ch; | |
| margin-bottom: 1.5rem; | |
| font-weight: 300; | |
| color: #BCBCBC; | |
| } | |
| /* ARTIFACT GRID */ | |
| .artifact-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1px; | |
| background: var(--border-color); | |
| border: 1px solid var(--border-color); | |
| margin-top: 3rem; | |
| } | |
| .artifact-card { | |
| background: var(--bg-color); | |
| padding: 2.5rem; | |
| min-height: 350px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| } | |
| .status-badge { | |
| font-size: 10px; | |
| border: 1px solid var(--text-dim); | |
| padding: 3px 8px; | |
| display: inline-block; | |
| margin-bottom: 1rem; | |
| text-transform: uppercase; | |
| } | |
| .tech-spec { | |
| font-size: 11px; | |
| color: var(--text-dim); | |
| margin-top: auto; | |
| border-top: 1px solid #222; | |
| padding-top: 1rem; | |
| } | |
| /* PROTOCOL LIST */ | |
| .protocol-list { | |
| margin-top: 3rem; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .protocol-item { | |
| border-bottom: 1px solid var(--border-color); | |
| padding: 3rem 0; | |
| display: grid; | |
| grid-template-columns: 200px 1fr; | |
| } | |
| /* CODE BLOCK STYLING FOR PROTOCOL */ | |
| .code-snippet { | |
| background: var(--code-bg); | |
| padding: 1.5rem; | |
| font-size: 11px; | |
| font-family: 'IBM Plex Mono', monospace; | |
| color: #888; | |
| margin-top: 1.5rem; | |
| border: 1px solid var(--border-color); | |
| max-width: 600px; | |
| overflow-x: auto; | |
| } | |
| .code-key { color: var(--accent-red); } | |
| .code-val { color: #D4D4D4; } | |
| /* BUTTONS */ | |
| .btn { | |
| display: inline-block; | |
| border: 1px solid var(--text-main); | |
| padding: 1rem 2rem; | |
| margin-top: 2rem; | |
| font-size: 12px; | |
| color: var(--text-main); | |
| } | |
| .btn:hover { | |
| background: var(--text-main); | |
| color: var(--bg-color); | |
| } | |
| /* RESPONSIVE */ | |
| @media (max-width: 900px) { | |
| .grid-container { grid-template-columns: 1fr; border: none; } | |
| .sidebar { height: auto; position: relative; border-bottom: 1px solid var(--border-color); padding: 1.5rem var(--spacing); } | |
| .artifact-grid { grid-template-columns: 1fr; } | |
| .protocol-item { grid-template-columns: 1fr; gap: 1rem; } | |
| section { padding: 4rem 1.5rem; } | |
| h1 { font-size: 2rem; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="grid-container"> | |
| <aside class="sidebar"> | |
| <div> | |
| <a href="#hero" class="logo caps"><span class="red">●</span> Red Amulet</a> | |
| <nav class="nav-links"> | |
| <ul> | |
| <li><a href="#artifacts">[01] Artifacts</a></li> | |
| <li><a href="#research">[02] Research</a></li> | |
| <li><a href="#studio">[03] Studio</a></li> | |
| <li><a href="#collaborate">[04] Collaborate</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <div class="meta-data"> | |
| <div class="meta-row"><span>SYS:</span> <span class="dim">ONLINE</span></div> | |
| <div class="meta-row"><span>LOC:</span> <span class="dim">IOWA/GLOBAL</span></div> | |
| <div class="meta-row"><span>VER:</span> <span class="dim">2.0.4</span></div> | |
| </div> | |
| </aside> | |
| <main class="content"> | |
| <section id="hero"> | |
| <h1>BESPOKE INTELLIGENCE.<br>SCULPTED DATASETS.<br><span class="dim">INTERMEDIA SYSTEMS.</span></h1> | |
| <p>We engineer friction, texture, and surprise. Red Amulet is a creative technology studio building air-gapped, offline LLMs for ambient narrative.</p> | |
| <a href="#artifacts" class="btn caps">View Artifacts</a> | |
| </section> | |
| <section id="artifacts"> | |
| <h2 class="caps">/// [01] DEDICATED INFERENCE UNITS</h2> | |
| <p>We fabricate computational and synthetic editions. These are not information terminals; they are autonomous artworks.</p> | |
| <div class="artifact-grid"> | |
| <div class="artifact-card"> | |
| <div> | |
| <span class="status-badge">Deployed</span> | |
| <h3 class="caps" style="margin-top: 1rem;">Artifact 001<br>The Dream Machine</h3> | |
| <p style="font-size: 13px; margin-top: 1rem;">Ambient Narrative Device. Designed for sculptural inputs and brainstorms. Pre-loaded with the Red Amulet Protocol.</p> | |
| </div> | |
| <div class="tech-spec caps"> | |
| ARCH: 8B PARAM QUANTIZED<br> | |
| PROTO: CEIP V1.1 / PULP<br> | |
| LINK: OFFLINE / NPU | |
| </div> | |
| </div> | |
| <div class="artifact-card" style="opacity: 0.6;"> | |
| <div> | |
| <span class="status-badge">In Development</span> | |
| <h3 class="caps" style="margin-top: 1rem;">Artifact 002<br>[REDACTED]</h3> | |
| <p style="font-size: 13px; margin-top: 1rem;">Visual synthesis core. <span class="blur">Utilizing diffusion loops to generate non-euclidean geometry based on audio input.</span></p> | |
| </div> | |
| <div class="tech-spec caps"> | |
| ARCH: UNKNOWN<br> | |
| PROTO: CLASSIFIED<br> | |
| LINK: OFFLINE | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="research"> | |
| <h2 class="caps">/// [02] PROTOCOLS & EXCAVATIONS</h2> | |
| <p>We aim for <strong>Specific Intelligence</strong>. We isolate distinct historical and aesthetic strata to create models with deep, narrow expertise and distinct aesthetic sensibilities.</p> | |
| <div class="protocol-list"> | |
| <div class="protocol-item"> | |
| <div class="caps dim">Protocol A:<br>CEIP v1.1</div> | |
| <div> | |
| <h3>Color-Encoded Information Protocol</h3> | |
| <p><strong>Objective:</strong> To standardize the representation of digital state using discrete physical matter (12-Color LEGO Standard).<br> | |
| <strong>Rationale:</strong> Encoding key/value pairs where the key is a printable ASCII character and the value is a base-12 integer (0-143).<br> | |
| <strong>Mechanism:</strong> A 4-brick sequence representing atomic data units.</p> | |
| <div class="code-snippet"> | |
| <span class="code-key">class</span> ColorCode: | |
| COLORS = { | |
| "Aqua": 0, "Black": 1, "Blue": 2, "Brown": 3, | |
| "Gray": 4, "Green": 5, "Orange": 6, "Pink": 7, | |
| "Purple": 8, "Red": 9, "White": 10, "Yellow": 11 | |
| } | |
| <span class="code-key">def</span> number_encode(self, number): | |
| <span class="dim"># Base-12 Conversion Logic</span> | |
| digit1, digit2 = divmod(number, 12) | |
| <span class="code-key">return</span> [self.COLORS_INDEX[digit1], self.COLORS_INDEX[digit2]] | |
| </div> | |
| </div> | |
| </div> | |
| <div class="protocol-item"> | |
| <div class="caps dim">Protocol B:<br>[REDACTED]</div> | |
| <div> | |
| <h3><span class="blur">The Pulp Horizon</span></h3> | |
| <p><strong>Objective:</strong> <span class="blur">To optimize loss functions for narrative suspense.</span><br> | |
| <strong>The Excavation:</strong> <span class="blur">5,000 public domain narrative texts.</span><br> | |
| <strong>Status:</strong> Awaiting Clearance.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="studio"> | |
| <h2 class="caps">/// [03] INTERMEDIA CONTAINMENT</h2> | |
| <p>Red Amulet is an experimental research studio positioned at the intersection of computer science and intermedia art. We operate as a commercial entity to sustain a non-commercial vision: <strong>The liberation of Artificial Intelligence from utility.</strong></p> | |
| <div style="margin-top: 3rem; border-left: 1px solid var(--accent-red); padding-left: 2rem;"> | |
| <h3 class="caps">Fluxus & Code</h3> | |
| <p>In the 1960s, Fluxus artists developed "Event Scores"—simple text instructions that could be performed by anyone.</p> | |
| <p>In the 2020s, the Event Score is Code. Simple text instructions that can be written by anyone.</p> | |
| </div> | |
| <div style="margin-top: 3rem;"> | |
| <h3 class="caps">Friction Over Function</h3> | |
| <p>We value Hallucination. A model that lies is a model that creates.<br> | |
| We value Latency. The pause before speaking is where "thinking" is simulated.<br> | |
| We value Bias. Bias is not harm. Bias is playful opinion.</p> | |
| </div> | |
| </section> | |
| <section id="collaborate"> | |
| <h2 class="caps">/// [04] TRANSMISSION</h2> | |
| <p>We are currently recruiting for the role of <strong>Creative Systems Architect</strong>. If you are an artist or engineer who prefers divergence over convergence, establish contact.</p> | |
| <br> | |
| <a href="mailto:hello@redamulet.art" class="caps red">Initiate Signal →</a> | |
| </section> | |
| </main> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment