/*
Theme Name: Bluehost Blueprint
Theme URI: https://github.com/newfold-labs/wp-theme-bluehost-blueprint/
Author: Bluehost
Author URI: https://bluehost.com
Description: Bluehost Blueprint is a block-based, multi-purpose, WordPress theme. Compose your pages to fit any design you like with the power of Full Site Editing (FSE) and the included wide range of Block Patterns. The pre-built pages will help you populate and transform your website into a wonderful website. Customize colors and font pairings to create your own unique look and feel.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bluehost-blueprint
Tags: blog, e-commerce, portfolio, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, block-patterns, wide-blocks, full-site-editing, template-editing
 */

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hermetic Cellar | In Vino Veritas, In Spiritu Lux</title>

<style>
  body {
    margin: 0;
    font-family: 'Cinzel', serif;
    background-color: #f9f8f5;
    color: #1a1a1a;
  }

  header {
    background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
                url('YOUR-LIGHTER-CELLAR-IMAGE.jpg') center/cover no-repeat;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
  }

  header img {
    width: 160px;
    margin-bottom: 1.5rem;
  }

  header h1 {
    font-size: 2.8rem;
    letter-spacing: 3px;
    color: #2c2c2c;
  }

  header p {
    color: #b08d57;
    font-style: italic;
    margin-top: 0.5rem;
    font-size: 1.2rem;
  }

  section {
    padding: 4rem 10%;
    max-width: 1200px;
    margin: auto;
  }

  .about {
    text-align: center;
  }

  .about h2, .wines h2, .meads h2, .contact h2 {
    color: #b08d57;
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  .wines, .meads {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.08);
    margin-top: 3rem;
  }

  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
  }

  .product {
    text-align: center;
  }

  .product img {
    width: 100%;
    border-radius: 10px;
  }

  .contact {
    text-align: center;
    background-color: #1a1a1a;
    color: #f9f8f5;
    padding: 4rem 2rem;
    border-top: 3px solid #b08d57;
  }

  .contact input, .contact button {
    padding: 0.8rem 1rem;
    margin: 0.5rem;
    border: none;
    border-radius: 5px;
  }

  .contact input {
    width: 250px;
    max-width: 80%;
  }

  .contact button {
    background-color: #b08d57;
    color: #fff;
    cursor: pointer;
    transition: background 0.3s;
  }

  .contact button:hover {
    background-color: #94733d;
  }
</style>
</head>

<body>
  <header>
    <img src="YOUR-LOGO.png" alt="Hermetic Cellar Logo" />
    <h1>Hermetic Cellar</h1>
    <p>In Vino Veritas, In Spiritu Lux</p>
  </header>

  <section class="about">
    <h2>About</h2>
    <p>Hermetic Cellar crafts wines and meads inspired by the alchemical balance between nature and spirit. Each bottle embodies the hidden harmony of transformation—where sunlight, soil, and soul converge into liquid art.</p>
  </section>

  <section class="wines">
    <h2>Featured Wines</h2>
    <div class="product-grid">
      <div class="product">
        <img src="LUMEN-VINUM.jpg" alt="Lumen Vinum" />
        <h3>Lumen Vinum</h3>
      </div>
      <div class="product">
        <img src="SANGUIS-HERMETICA.jpg" alt="Sanguis Hermetica" />
        <h3>Sanguis Hermetica</h3>
      </div>
      <div class="product">
        <img src="EDELWEISS.jpg" alt="Edelweiss White Wine" />
        <h3>Edelweiss</h3>
      </div>
    </div>
  </section>

  <section class="meads">
    <h2>Mead Collection</h2>
    <div class="product-grid">
      <div class="product">
        <img src="OLD-GODS.jpg" alt="Old Gods Mead" />
        <h3>Old Gods</h3>
      </div>
      <div class="product">
        <img src="SOL-INVICTUS.jpg" alt="Sol Invictus" />
        <h3>Sol Invictus</h3>
      </div>
      <div class="product">
        <img src="NOCTURNA-LUX.jpg" alt="Nocturna Lux" />
        <h3>Nocturna Lux</h3>
      </div>
      <div class="product">
        <img src="LAPIS-MEL.jpg" alt="Lapis Mel" />
        <h3>Lapis Mel</h3>
      </div>
      <div class="product">
        <img src="APIAN-ARCANA.jpg" alt="Apian Arcana" />
        <h3>Apian Arcana</h3>
      </div>
    </div>
  </section>

  <section class="contact">
    <h2>Join Our Mailing List</h2>
    <p>Stay informed on new releases, events, and limited bottlings.</p>
    <form>
      <input type="email" placeholder="Enter your email" required />
      <button type="submit">Join</button>
    </form>
  </section>
</body>
</html>
