<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Yes, You</title>

  <!-- Free Google-font approximations (no downloads needed) -->
  <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=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=DM+Sans:wght@400;600;700&family=Caveat:wght@500;700&display=swap" rel="stylesheet">

  <style>
    :root{
      /* paper + ink */
      --paper:#f6f0e6;
      --paper2:#efe6d9;
      --ink:#111111;

      /* muted grown-up accents */
      --sage:#7f9b8f;
      --mustard:#c5a24a;
      --peach:#d59a86;
      --teal:#4f8a8b;
      --plum:#6d4c6b;
      --navy:#2f3e55;

      --border: 4px solid var(--ink);
      --radius: 18px;
      --shadow: 0 18px 35px rgba(0,0,0,.10);
    }

    *{ box-sizing:border-box; }

    body{
      margin:0;
      color:var(--ink);
      background:
        radial-gradient(900px 520px at 15% 0%, rgba(127,155,143,.20), transparent 55%),
        radial-gradient(760px 520px at 85% 10%, rgba(197,162,74,.14), transparent 60%),
        linear-gradient(180deg, var(--paper), var(--paper2));
      font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      line-height:1.45;
    }

    .wrap{
      width:min(980px, 92vw);
      margin:0 auto;
      padding:22px 0 46px;
    }

    header{
      border: var(--border);
      border-radius: var(--radius);
      background: rgba(255,255,255,.35);
      box-shadow: var(--shadow);
      padding:18px 18px 14px;
    }

    .topline{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
      margin-bottom:6px;
      font-size:13px;
      letter-spacing:.14em;
      text-transform:uppercase;
      opacity:.9;
    }

    .brand{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
    }

    .pill{
      border:2px solid var(--ink);
      border-radius:999px;
      padding:6px 10px;
      background: rgba(255,255,255,.45);
      font-weight:700;
      letter-spacing:.06em;
      text-transform:uppercase;
      font-size:12px;
    }

    .hero-title{
      margin:0;
      font-family: "Caveat", system-ui, sans-serif; /* brushy-ish */
      font-size: clamp(56px, 10vw, 92px);
      line-height: .92;
      letter-spacing: -0.01em;
    }

    .hero-sub{
      margin:10px 0 0;
      max-width: 70ch;
      font-size:16px;
    }

    .grid{
      display:grid;
      grid-template-columns: 1fr;
      gap:14px;
      margin-top:14px;
    }

    /* big choice tiles */
    .choice-row{
      display:grid;
      grid-template-columns: 1fr;
      gap:14px;
      margin-top:14px;
    }
    @media (min-width: 820px){
      .choice-row{ grid-template-columns: 1.2fr .8fr; }
      .grid{ grid-template-columns: 1fr 1fr; }
    }

    .box{
      border: var(--border);
      border-radius: var(--radius);
      background: rgba(255,255,255,.35);
      box-shadow: var(--shadow);
      overflow:hidden;
    }

    .box-head{
      padding:14px 16px;
      border-bottom: var(--border);
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:10px;
      background: rgba(255,255,255,.35);
    }

    .kicker{
      font-size:12px;
      letter-spacing:.14em;
      text-transform:uppercase;
      opacity:.9;
      margin:0 0 6px;
    }

    .h2{
      margin:0;
      font-family:"Fraunces", serif;  /* classy display */
      font-size: 28px;
      letter-spacing:-.01em;
      line-height:1.1;
    }

    .box-body{
      padding:16px;
      font-size:16px;
    }

    .actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:12px;
    }

    .btn{
      display:inline-block;
      border:3px solid var(--ink);
      border-radius: 14px;
      padding:10px 12px;
      background: var(--ink);
      color: var(--paper);
      text-decoration:none;
      font-weight:800;
      letter-spacing:.01em;
    }
    .btn.secondary{
      background: transparent;
      color: var(--ink);
    }

    .tag{
      font-size:12px;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
      opacity:.85;
    }

    /* colored headers */
    .sage .box-head{ background: rgba(127,155,143,.28); }
    .mustard .box-head{ background: rgba(197,162,74,.22); }
    .peach .box-head{ background: rgba(213,154,134,.24); }
    .teal .box-head{ background: rgba(79,138,139,.22); }
    .plum .box-head{ background: rgba(109,76,107,.20); }
    .navy .box-head{ background: rgba(47,62,85,.16); }

    details{
      border: 3px solid var(--ink);
      border-radius: 14px;
      padding: 10px 12px;
      background: rgba(255,255,255,.30);
      margin: 12px 0;
    }
    summary{
      cursor:pointer;
      font-weight:900;
      list-style:none;
    }
    summary::-webkit-details-marker{ display:none; }

    ul{ margin:10px 0 0 18px; }
    li{ margin:8px 0; }

    footer{
      margin-top:16px;
      text-align:center;
      opacity:.85;
      font-size:13px;
    }

    /* tab system */
    .tab{ display:none; }
    .tab.active{ display:block; }

    /* keep text big on phones */
    @media (max-width: 480px){
      .box-body{ font-size:17px; }
      .h2{ font-size:26px; }
    }
  </style>
</head>

<body>
  <div class="wrap">
    <header class="box">
      <div class="topline">
        <div class="brand">
          <span class="pill">Echo &amp; Lore</span>
          <span class="pill">Real mail. Real humans.</span>
        </div>
        <div class="tag">yesyou.group</div>
      </div>

      <h1 class="hero-title">Yes, you.</h1>
      <p class="hero-sub">
        If you found a card, this is the simple “what is this” page.
        Pick where you want to go. Nothing to buy. Nothing being collected.
      </p>

      <div class="choice-row">
        <section class="box sage">
          <div class="box-head">
            <div>
              <p class="kicker">Start here</p>
              <p class="h2">Yes, You</p>
            </div>
            <div class="tag">the card project</div>
          </div>
          <div class="box-body">
            Cliff-notes answers, what to do with the card, and the “not-a-cult” FAQ.
            <div class="actions">
              <a class="btn" href="#yesyou" onclick="showTab('yesyou')">Open Yes, You</a>
              <a class="btn secondary" href="#faq" onclick="showTab('yesyou'); scrollToId('faq')">Jump to FAQ</a>
            </div>
          </div>
        </section>

        <section class="box plum">
          <div class="box-head">
            <div>
              <p class="kicker">Also</p>
              <p class="h2">Echo &amp; Lore</p>
            </div>
            <div class="tag">studio + future</div>
          </div>
          <div class="box-body">
            A second doorway for the bigger creative umbrella. Light. Personal. Intentional.
            <div class="actions">
              <a class="btn" href="#echo" onclick="showTab('echo')">Open Echo &amp; Lore</a>
            </div>
          </div>
        </section>
      </div>
    </header>

    <!-- YES YOU TAB -->
    <main id="yesyou" class="tab active">
      <div class="grid">
        <section class="box mustard">
          <div class="box-head">
            <div>
              <p class="kicker">Cliff notes</p>
              <p class="h2">What is this?</p>
            </div>
            <div class="tag">the who/what/why</div>
          </div>
          <div class="box-body">
            You got real mail because getting real mail hits different.
            I make hand-drawn, colorful quote cards and send them to humans who might need a small nudge of light.
          </div>
        </section>

        <section class="box peach">
          <div class="box-head">
            <div>
              <p class="kicker">Important</p>
              <p class="h2">Not selling anything</p>
            </div>
            <div class="tag">zero agenda</div>
          </div>
          <div class="box-body">
            No product pitch. No list. No tracking. This page exists so “mystery card” doesn’t feel weird.
          </div>
        </section>

        <section class="box teal" id="faq">
          <div class="box-head">
            <div>
              <p class="kicker">WTF / FAQ</p>
              <p class="h2">Common questions</p>
            </div>
            <div class="tag">fast answers</div>
          </div>
          <div class="box-body">
            <details>
              <summary>How did you get my address?</summary>
              <p>Random selection. Public listings, mailing lists you can legally purchase, and old-school address databases. No stalking. No social hacking.</p>
            </details>

            <details>
              <summary>Why did you send me this?</summary>
              <p>Because sometimes a tiny “yes” lands at the right time. If it missed, you can ignore it. No harm done.</p>
            </details>

            <details>
              <summary>Is this a religious thing?</summary>
              <p>No. No recruitment. No belief requirements. Just encouragement and art.</p>
            </details>

            <details>
              <summary>Do all the cards say the same thing?</summary>
              <p>No. Different quotes, different art. Same energy.</p>
            </details>

            <details>
              <summary>So what are the odds?</summary>
              <p>Low, but not magic. It is random on purpose. The meaning is what you make of it.</p>
            </details>
          </div>
        </section>

        <section class="box navy">
          <div class="box-head">
            <div>
              <p class="kicker">Now what?</p>
              <p class="h2">What do I do with it?</p>
            </div>
            <div class="tag">choose your move</div>
          </div>
          <div class="box-body">
            <ul>
              <li><b>Keep it.</b> Put it somewhere you’ll stumble on it later. Sock drawer counts.</li>
              <li><b>Share it.</b> Take a photo of the card (or with it) and post it. Tell a tiny piece of your story.</li>
              <li><b>Pass it on.</b> Slip it to someone who needs it. “This came to me, but I think it’s for you.”</li>
              <li><b>Chaos-good mode.</b> Take it out and leave it somewhere safe and ordinary. It will find the right person.</li>
              <li><b>Brave mode.</b> Send a card to a random person in a different state. No names needed.</li>
            </ul>
          </div>
        </section>
      </div>

      <footer>
        <div class="actions" style="justify-content:center;">
          <a class="btn secondary" href="#top" onclick="showTab('home')">Back to top</a>
          <a class="btn" href="#echo" onclick="showTab('echo')">Go to Echo &amp; Lore</a>
        </div>
        <p style="margin-top:10px;">If this page helped, good. If it didn’t, also good. You’re allowed to move on.</p>
      </footer>
    </main>

    <!-- ECHO TAB -->
    <main id="echo" class="tab">
      <div class="grid">
        <section class="box plum">
          <div class="box-head">
            <div>
              <p class="kicker">Echo &amp; Lore</p>
              <p class="h2">What this becomes</p>
            </div>
            <div class="tag">umbrella</div>
          </div>
          <div class="box-body">
            A home for art, words, and small projects that are meant to find people.
            Yes, You is the first doorway.
          </div>
        </section>

        <section class="box sage">
          <div class="box-head">
            <div>
              <p class="kicker">Next</p>
              <p class="h2">Coming soon</p>
            </div>
            <div class="tag">placeholder</div>
          </div>
          <div class="box-body">
            This is where future links can live. For now, it stays simple.
          </div>
        </section>
      </div>

      <footer>
        <div class="actions" style="justify-content:center;">
          <a class="btn" href="#yesyou" onclick="showTab('yesyou')">Back to Yes, You</a>
          <a class="btn secondary" href="#top" onclick="showTab('home')">Back to top</a>
        </div>
      </footer>
    </main>
  </div>

  <script>
    function showTab(which){
      // "home" just means show the first section (yesyou) but scroll top
      const tabs = document.querySelectorAll('.tab');
      tabs.forEach(t => t.classList.remove('active'));

      if(which === 'home'){
        document.getElementById('yesyou').classList.add('active');
        window.scrollTo({ top: 0, behavior: 'smooth' });
        return;
      }

      const el = document.getElementById(which);
      if(el){
        el.classList.add('active');
        // scroll near top so it feels like a "page"
        window.scrollTo({ top: 0, behavior: 'smooth' });
      }
    }

    function scrollToId(id){
      const el = document.getElementById(id);
      if(el){ el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
    }
  </script>
</body>
</html>