:root {
      --cream: #f6f1e7;
      --brown: #7a4a2e;
      --dark: #2a1a12;
      --muted: #6e625b;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Source Sans 3', sans-serif;
      background: var(--cream);
      color: var(--dark);
      line-height: 1.6;
    }

    header {
      background: #e9dcc7;
      padding: 4rem 2rem;
      text-align: center;
      border-bottom: 6px solid var(--brown);
    }

    header h1 {
      font-family: 'Libre Baskerville', serif;
      font-size: clamp(2.5rem, 6vw, 3.5rem);
      margin-bottom: 0.8rem;
      color: var(--brown);
    }

    header p {
      max-width: 600px;
      margin: 0 auto;
      color: var(--muted);
      font-size: 1.05rem;
    }

    .demo {
      display: inline-block;
      margin-top: 1.2rem;
      padding: 0.4rem 0.9rem;
      border: 2px dashed var(--brown);
      font-size: 0.75rem;
      letter-spacing: 1px;
      background: #fff8ec;
    }

    section {
      max-width: 1100px;
      margin: 0 auto;
      padding: 4rem 2rem;
    }

    h2 {
      font-family: 'Libre Baskerville', serif;
      font-size: 2.2rem;
      color: var(--brown);
      margin-bottom: 2rem;
    }

    .story {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
    }

    .box {
      background: #fffaf1;
      padding: 2rem;
      border: 1px solid #e0d3bf;
    }

    .products {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 2rem;
    }

    .product {
      background: #fffaf1;
      padding: 1.8rem;
      border: 1px solid #e0d3bf;
    }

    .product h3 {
      font-family: 'Libre Baskerville', serif;
      margin-bottom: 0.4rem;
    }

    .price {
      font-weight: 700;
      color: var(--brown);
      margin-bottom: 0.6rem;
    }

    .note {
      margin-top: 3rem;
      padding: 1.5rem;
      background: #fff3dc;
      border: 2px dashed var(--brown);
      text-align: center;
      font-size: 0.9rem;
      color: var(--muted);
    }

    footer {
      background: #2a1a12;
      color: #f2e8da;
      text-align: center;
      padding: 2.5rem 2rem;
      font-size: 0.85rem;
    }

    footer strong {
      color: #e9dcc7;
    }