<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="stylesheet" href="./ds/more-of-everything-design-system-2a34e2db-350c-4891-94a8-25dd840edc87/tokens/fonts.css">
<link rel="stylesheet" href="./ds/more-of-everything-design-system-2a34e2db-350c-4891-94a8-25dd840edc87/tokens/colors.css">
<link rel="stylesheet" href="./ds/more-of-everything-design-system-2a34e2db-350c-4891-94a8-25dd840edc87/tokens/typography.css">
<link rel="stylesheet" href="./ds/more-of-everything-design-system-2a34e2db-350c-4891-94a8-25dd840edc87/tokens/spacing.css">
<link rel="stylesheet" href="./ds/more-of-everything-design-system-2a34e2db-350c-4891-94a8-25dd840edc87/tokens/effects.css">
<link rel="stylesheet" href="./ds/more-of-everything-design-system-2a34e2db-350c-4891-94a8-25dd840edc87/styles.css">
<script src="./ds/more-of-everything-design-system-2a34e2db-350c-4891-94a8-25dd840edc87/_ds_bundle.js"></script>
<style>
  html,body{margin:0;padding:0;background:#15120F;}
  *{box-sizing:border-box;}
  ::selection{background:#DD3B26;color:#F1EBE0;}
  @keyframes moeScrollCue{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(7px);opacity:1}}
  a{color:#DD3B26;}
  a:hover{opacity:.7;}
</style>
</helmet>
<div style="position:relative;width:100%;overflow-x:hidden;background:#F1EBE0;font-family:'Hanken Grotesk',sans-serif;color:#15120F;">

  <div style="position:fixed;inset:0;z-index:120;pointer-events:none;mix-blend-mode:multiply;opacity:.16;background-image:url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E&quot;);"></div>

  <header style="position:relative;width:100%;height:clamp(300px,32vw,540px);background:#0d0b09 url(./assets/banner-full.png) left center/cover no-repeat;clip-path:polygon(0 0,100% 0,100% 90%,0 100%);">
    <div style="position:absolute;top:0;left:0;right:0;height:80px;z-index:5;pointer-events:none;background:linear-gradient(180deg,rgba(13,11,9,.72),rgba(13,11,9,0));"></div>
    <div style="position:absolute;bottom:0;left:0;right:0;height:90px;z-index:5;pointer-events:none;background:linear-gradient(0deg,rgba(13,11,9,.6),rgba(13,11,9,0));"></div>
    <div style="position:absolute;top:0;left:0;right:0;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:18px clamp(20px,4vw,56px);font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.16em;color:#F1EBE0;">
      <span style="text-transform:uppercase;">More&nbsp;of&nbsp;Everything</span>
      <span style="display:flex;gap:18px;align-items:center;flex-wrap:wrap;"><a href="mailto:info@experience.moe" style="color:#F1EBE0;opacity:.85;text-decoration:none;">info@</a><span style="color:#DD3B26;">X · INDEX</span></span>
    </div>
    <div style="position:absolute;bottom:22px;right:clamp(20px,4vw,56px);z-index:6;display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.2em;color:#F1EBE0;opacity:.85;">
      <span>SCROLL</span>
      <span style="display:inline-block;animation:moeScrollCue 1.6s ease-in-out infinite;">↓</span>
    </div>
  </header>

  <section style="position:relative;width:100%;background:#F1EBE0;overflow:hidden;margin-top:-1px;padding:clamp(56px,9vh,118px) 0 clamp(64px,10vh,132px);">
    <div style="position:absolute;left:-12%;top:50%;width:124%;height:2px;background:#DD3B26;transform:rotate(-5deg);z-index:1;"></div>
    <div style="position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,72px);">
      <div style="font-family:'Space Mono',monospace;color:#DD3B26;font-size:13px;letter-spacing:.22em;margin-bottom:22px;">00 · THE THROUGH LINE</div>
      <div style="display:flex;align-items:center;gap:clamp(12px,2.4vw,36px);flex-wrap:wrap;">
        <span style="font-family:'Archivo Black',sans-serif;color:#15120F;font-size:clamp(36px,6.4vw,100px);line-height:.86;letter-spacing:-.01em;">ACTION</span>
        <span style="font-family:'Archivo Black',sans-serif;color:#DD3B26;font-size:clamp(30px,5vw,78px);line-height:.86;transform:translateY(-.04em);">↔</span>
        <span style="font-family:'Archivo Black',sans-serif;color:#15120F;font-size:clamp(36px,6.4vw,100px);line-height:.86;letter-spacing:-.01em;">ART</span>
      </div>
      <p style="max-width:740px;margin:30px 0 0;font-size:clamp(16px,1.45vw,21px);line-height:1.55;color:#15120F;font-weight:500;">
        MORE OF EVERYTHING is what happens when people who care too much about hardware put it in front of a room and dare it to do more. The agitator with the megaphone and the engraved fish are the same studio. <span style="color:#DD3B26;font-weight:700;">The collision is the brand.</span>
      </p>
    </div>
  </section>

  <section style="position:relative;width:100%;background:#F1EBE0;overflow:hidden;padding:clamp(70px,12vh,160px) 0 clamp(64px,10vh,140px);">
    <div style="position:absolute;right:-6%;top:-8%;width:52%;height:120%;z-index:0;background:url(./assets/collage-wide-4.png) center/cover no-repeat;opacity:.09;mix-blend-mode:multiply;clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);"></div>
    <div style="position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,72px);">
      <div style="font-family:'Space Mono',monospace;color:#DD3B26;font-size:13px;letter-spacing:.22em;margin-bottom:30px;">X · THE INDEX</div>
      <div style="position:relative;background:#15120F;clip-path:polygon(0 4%,100% 0,100% 96%,0 100%);padding:clamp(40px,5vw,70px) clamp(28px,5vw,76px);">
        <p style="margin:0 0 1.1em;font-size:clamp(20px,2vw,30px);line-height:1.42;color:#F1EBE0;font-weight:600;">
          MORE OF EVERYTHING is a hardware company for the moment right before something becomes a market.
        </p>
        <p style="margin:0 0 1.1em;font-size:clamp(16px,1.35vw,20px);line-height:1.62;color:#F1EBE0;opacity:.86;">
          We work the third rail — where data, product, and technology cross — because that's where the friction is, and friction is where the interesting stuff lives. Markets, if they show up, show up later.
        </p>
        <p style="margin:0 0 1.1em;font-size:clamp(16px,1.35vw,20px);line-height:1.62;color:#F1EBE0;opacity:.86;">
          Every product here is a Hill Shot: a real, working thing built for a specific scene — a conservator, an artist, a fabricator, a stage — aimed at a question nobody had quite gotten around to asking. Some of these become businesses. All of them start conversations.
        </p>
        <p style="margin:0;font-size:clamp(16px,1.35vw,20px);line-height:1.62;color:#F1EBE0;opacity:.86;">
          What we know about how these things get made doesn't show up on a spec sheet. It lives in the people we made them with — <span style="color:#DD3B26;">which is also why there's no team page. There's just the catalog: one fish at a time, in order, growing.</span>
        </p>
      </div>
      <div style="margin-top:clamp(34px,4vw,56px);display:flex;gap:clamp(16px,2vw,32px);align-items:flex-start;flex-wrap:wrap;">
        <span style="font-family:'Archivo Black',sans-serif;color:#DD3B26;font-size:clamp(38px,5vw,76px);line-height:.9;">.moe</span>
        <p style="flex:1;min-width:280px;margin:0;align-self:center;font-size:clamp(15px,1.3vw,19px);line-height:1.55;max-width:640px;">
          Japanese slang for the feeling you get when something is so well-made you can't stop looking at it. We build that, in hardware — and we don't apologize for being digital, loud, or specific.
        </p>
      </div>
    </div>
  </section>

  <section style="position:relative;width:100%;background:#15120F;overflow:hidden;padding:clamp(64px,10vh,140px) 0 clamp(72px,11vh,160px);clip-path:polygon(0 5%,100% 0,100% 100%,0 95%);margin-top:-2px;">
    <div style="position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:0 clamp(20px,5vw,72px);">
      <div style="display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;margin-bottom:clamp(34px,4vw,56px);">
        <div style="font-family:'Archivo Black',sans-serif;color:#F1EBE0;font-size:clamp(30px,4vw,60px);line-height:.95;">THE CATALOG</div>
        <div style="font-family:'Space Mono',monospace;color:#DD3B26;font-size:12px;letter-spacing:.18em;max-width:380px;text-align:right;">ONE AT A TIME, IN ORDER, GROWING · A–Z, X SKIPPED</div>
      </div>
      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:2px;background:rgba(241,235,224,.1);border:1px solid rgba(241,235,224,.1);">
        <a href="./LOCI.dc.html" style="position:relative;background:#15120F;aspect-ratio:1/1.12;display:flex;flex-direction:column;justify-content:space-between;padding:12px 12px 10px;text-decoration:none;">
          <div style="font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;color:#F1EBE0;opacity:.6;">01</div>
          <div style="font-family:'Archivo Black',sans-serif;font-size:clamp(40px,4.4vw,66px);line-height:.8;color:var(--moe-accent-a);align-self:center;margin:auto 0;">A</div>
          <div style="display:flex;justify-content:space-between;align-items:flex-end;gap:6px;">
            <span style="font-family:'Space Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.08em;color:#F1EBE0;">A-15</span>
          </div>
        </a>
        <a href="./BAFFLE.dc.html" style="position:relative;background:#15120F;aspect-ratio:1/1.12;display:flex;flex-direction:column;justify-content:space-between;padding:12px 12px 10px;text-decoration:none;">
          <div style="font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;color:#F1EBE0;opacity:.6;">02</div>
          <div style="font-family:'Archivo Black',sans-serif;font-size:clamp(40px,4.4vw,66px);line-height:.8;color:#5057E8;align-self:center;margin:auto 0;">B</div>
          <div style="display:flex;justify-content:space-between;align-items:flex-end;gap:6px;">
            <span style="font-family:'Space Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.08em;color:#F1EBE0;">B-012</span>
          </div>
        </a>
        <sc-for list="{{ ghostLetters }}" as="l" hint-placeholder-count="23">
          <div style="position:relative;background:#15120F;aspect-ratio:1/1.12;display:flex;flex-direction:column;justify-content:space-between;padding:12px 12px 10px;">
            <div style="font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;color:#F1EBE0;opacity:.5;">{{ l.num }}</div>
            <div style="font-family:'Archivo Black',sans-serif;font-size:clamp(40px,4.4vw,66px);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(241,235,224,.26);align-self:center;margin:auto 0;">{{ l.letter }}</div>
            <div style="font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.18em;color:#F1EBE0;opacity:.22;">— —</div>
          </div>
        </sc-for>
      </div>
      <p style="margin:clamp(28px,3vw,44px) 0 0;max-width:560px;font-family:'Space Mono',monospace;font-size:12px;line-height:1.7;letter-spacing:.04em;color:#F1EBE0;opacity:.55;">
        Each entry is a real, working thing, paired with a saltwater fish in the order it was introduced. Live entries carry an accent color and a Pairing. Ghosts are reserved — the school grows one individual at a time.
      </p>
    </div>
  </section>

  <footer style="position:relative;width:100%;background:#F1EBE0;overflow:hidden;padding:clamp(64px,9vh,130px) 0 clamp(48px,6vh,72px);">
    <div style="position:absolute;left:-12%;top:18%;width:124%;height:2px;background:#DD3B26;transform:rotate(-7deg);z-index:0;"></div>
    <div style="position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,72px);display:flex;justify-content:space-between;gap:clamp(36px,5vw,72px);flex-wrap:wrap;align-items:flex-start;">
      <div style="flex:1;min-width:300px;">
        <div style="font-family:'Archivo Black',sans-serif;font-size:clamp(40px,6.4vw,118px);line-height:.82;color:#15120F;letter-spacing:-.01em;">experience<span style="color:#DD3B26;">.moe</span></div>
        <div style="margin-top:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:7px;font-family:'Space Mono',monospace;font-size:14px;letter-spacing:.05em;color:#15120F;">
          <span>@experience.moe</span>
          <a href="mailto:info@experience.moe" style="color:#15120F;text-decoration:none;">info@</a>
        </div>
        <div style="margin-top:clamp(30px,4vw,52px);font-family:'Archivo Black',sans-serif;font-size:clamp(20px,2.3vw,34px);color:#15120F;letter-spacing:.01em;">MOVE HARDWARE FORWARD</div>
      </div>
      <div style="flex:none;width:clamp(170px,22vw,260px);transform:rotate(-7deg);">
        <div style="position:relative;box-shadow:0 10px 26px rgba(21,18,15,.28);border:6px solid #F1EBE0;outline:1px solid rgba(21,18,15,.15);">
          <img src="./assets/sticker.png" alt="MOE / LED sticker" style="display:block;width:100%;height:auto;">
        </div>
        <div style="margin-top:14px;text-align:center;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;color:#15120F;opacity:.6;">THE ONLY MARK ON THE HARDWARE — SCAN TO experience.moe</div>
      </div>
    </div>
  </footer>

</div>

</x-dc>
<script type="text/x-dc" data-dc-script>
class Component extends DCLogic {
  renderVals() {
    const letters = 'CDEFGHIJKLMNOPQRSTUVWYZ'.split('');
    return {
      ghostLetters: letters.map((letter, i) => ({ letter, num: String(i + 3).padStart(2, '0') })),
    };
  }
}

</script>
</body>
</html>
