<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>TJ · DROP 03 — American Streetwear, Morandi Palette</title>
  <meta name="description" content="TJ — Oversize cotton tees, washed docker caps, heritage shoes. Made in Portugal. Morandi palette, streetstyle fit."/>
  <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="css/main.css?v=7" />

<!-- TJ SiteOS live install: head start -->
<link rel="stylesheet" href="/tj-siteos-install.css">
<link rel="stylesheet" href="/robot-widget.css">
<link rel="icon" href="/assets/brand/favicon.svg" type="image/svg+xml">
<!-- TJ SiteOS live install: head end -->
</head>
<body data-page="home">

<nav class="nav">
  <div class="nav-inner">
    <a href="index.html" class="nav-brand">TJ</a>
    <div class="nav-links">
      <a href="shop.html?cat=tees">TEES</a>
      <a href="shop.html?cat=hats">HATS</a>
      <a href="shop.html?cat=shoes">SHOES</a>
      <a href="model.html">LOOK</a>
    </div>
    <div class="nav-right">
      <a href="cart.html" class="cart-btn">BAG<span class="cart-count"></span></a>
    </div>
  </div>
</nav>

<!-- Hero -->
<section class="hero">
  <div class="hero-media">
    <video src="assets/hero_v3/hero.mp4?v=11" autoplay muted loop playsinline
           poster="assets/hero_v3/look_moody.png"
           style="width:100%;height:100%;object-fit:cover;display:block"></video>
  </div>
  <div class="hero-inner">
    <div class="hero-top">
      <span class="hero-drop hype">DROP 03 · FW26</span>
      <div class="hero-meta">TJ STREETWEAR<br/>PORTUGAL · MORANDI</div>
    </div>
    <div class="hero-bottom">
      <div class="hero-title">
        <div class="eyebrow">NEW COLLECTION</div>
        <h1>Soft<br/>Dye,<br/>Hard<br/>Cut.</h1>
      </div>
      <div class="hero-cta">
        <a class="btn btn-light" href="shop.html?cat=tees">SHOP THE DROP</a>
        <a class="btn btn-ghost" href="model.html">SHOP THE LOOK</a>
      </div>
    </div>
  </div>
</section>

<!-- Tees -->
<section class="section">
  <div class="container">
    <div class="section-head">
      <div>
        <span class="eyebrow">LOT Nº 10–18</span>
        <h2>Oversize<br/>Cotton Tees.</h2>
      </div>
      <a href="shop.html?cat=tees" class="btn btn-primary">SEE ALL 9</a>
    </div>
    <div class="grid grid-3 home-tees"></div>
  </div>
</section>

<!-- Hats -->
<section class="section" style="background:rgba(26,26,26,0.03);">
  <div class="container">
    <div class="section-head">
      <div>
        <span class="eyebrow">LOT Nº 01–09</span>
        <h2>Washed<br/>Docker Caps.</h2>
      </div>
      <a href="shop.html?cat=hats" class="btn btn-primary">SEE ALL 9</a>
    </div>
    <div class="grid home-hats"></div><!-- 4 cols 1 row: 4 hats sneak peek -->

  </div>
</section>

<!-- Shoes -->
<section class="section">
  <div class="container">
    <div class="section-head">
      <div>
        <span class="eyebrow">LOT Nº 19–24</span>
        <h2>Heritage<br/>Footwear.</h2>
      </div>
      <a href="shop.html?cat=shoes" class="btn btn-primary">SEE ALL 6</a>
    </div>
    <div class="grid grid-3 home-shoes"></div>
  </div>
</section>

<!-- Manifesto strip -->
<section class="section" style="background:var(--ink);color:var(--bg);padding:128px 0;">
  <div class="container" style="text-align:center;">
    <span class="eyebrow" style="color:rgba(255,255,255,0.6)">MANIFESTO</span>
    <h2 style="max-width:18ch;margin:24px auto;color:var(--bg);font-size:clamp(28px,4.5vw,72px)">
      Garment-dyed.<br/>Pre-shrunk.<br/>Made to soften.
    </h2>
    <p style="max-width:52ch;margin:0 auto;opacity:0.7;font-size:14px;line-height:1.8;letter-spacing:0.02em">
      12 Morandi-calibrated colorways. 220 GSM combed cotton. Oversize boxy cut with dropped shoulders. Hand-finished in Portugal, pre-washed so every piece arrives soft and worn-in.
    </p>
  </div>
</section>

<footer>
  <div class="container">
    <div>
      <h4>TJ</h4>
      <p style="font-size:11px;opacity:0.6;letter-spacing:0.1em;line-height:1.6">American streetwear, Morandi palette. Made in Portugal.</p>
    </div>
    <div>
      <h4>Shop</h4>
      <a href="shop.html?cat=tees">Tees</a>
      <a href="shop.html?cat=hats">Hats</a>
      <a href="shop.html?cat=shoes">Shoes</a>
      <a href="model.html">Shop the Look</a>
    </div>
    <div>
      <h4>Info</h4>
      <a href="#">Returns</a>
      <a href="#">Shipping</a>
      <a href="#">Fabric &amp; Care</a>
      <a href="#">Contact</a>
    </div>
  </div>
  <div class="footer-bottom">© 2026 TJ · DROP 03 · FW26</div>
</footer>

<script src="js/data.js?v=7"></script>
<script src="js/cart.js?v=7"></script>
<script src="js/main.js?v=7"></script>

<!-- TJ SiteOS live install: body start -->
<script src="/tj-siteos-install.js" defer></script>
<script src="/robot-widget.js" defer></script>
<!-- TJ SiteOS live install: body end -->
</body>
</html>
