Not All Thumbs

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Not All Thumbs Woodcrafts</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet" />
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

```
:root {
--cream: #F5F0E8;
--dark: #3B2F24;
--mid: #5C4A38;
--accent: #A0845C;
--accent-light: #C4A87A;
--muted: #8C7B6A;
--border: #DDD0BC;
}

html { scroll-behavior: smooth; }

body {
background: var(--cream);
color: var(--dark);
font-family: 'DM Sans', sans-serif;
font-weight: 300;
line-height: 1.6;
overflow-x: hidden;
}

/* NAV */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 4rem;
background: rgba(245,240,232,0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}

.nav-logo {
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--dark);
text-decoration: none;
}

.nav-logo span { color: var(--accent); }

.nav-links {
display: flex;
gap: 2.5rem;
list-style: none;
}

.nav-links a {
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid);
text-decoration: none;
transition: color 0.2s;
}

.nav-links a:hover { color: var(--accent); }

.nav-cart {
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
background: var(--dark);
color: var(--cream);
padding: 0.6rem 1.4rem;
text-decoration: none;
transition: background 0.2s;
}

.nav-cart:hover { background: var(--accent); }

/* HERO */
.hero {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
padding-top: 80px;
}

.hero-text {
display: flex;
flex-direction: column;
justify-content: center;
padding: 6rem 4rem 6rem 6rem;
}

.hero-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1.5rem;
}

.hero-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(3rem, 5vw, 5.5rem);
font-weight: 300;
line-height: 1.05;
color: var(--dark);
margin-bottom: 1.5rem;
}

.hero-title em {
font-style: italic;
color: var(--accent);
}

.hero-sub {
font-size: 1rem;
color: var(--muted);
max-width: 380px;
margin-bottom: 3rem;
line-height: 1.8;
}

.hero-cta {
display: inline-flex;
gap: 1rem;
align-items: center;
}

.btn-primary {
background: var(--dark);
color: var(--cream);
padding: 1rem 2.5rem;
text-decoration: none;
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
transition: background 0.25s;
}

.btn-primary:hover { background: var(--accent); }

.btn-secondary {
color: var(--mid);
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
border-bottom: 1px solid var(--border);
padding-bottom: 2px;
transition: color 0.2s, border-color 0.2s;
}

.btn-secondary:hover { color: var(--accent); border-color: var(--accent); }

.hero-visual {
position: relative;
background: var(--dark);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

.hero-visual-inner {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #2E2218 0%, #1E160E 50%, #3D2E1E 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.hero-wood-art {
width: 280px;
height: 280px;
border-radius: 50%;
border: 1px solid rgba(184,134,78,0.3);
position: relative;
display: flex;
align-items: center;
justify-content: center;
animation: slowSpin 30s linear infinite;
}

@keyframes slowSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.hero-wood-inner {
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid rgba(184,134,78,0.2);
display: flex;
align-items: center;
justify-content: center;
animation: slowSpin 20s linear infinite reverse;
}

.hero-wood-core {
width: 120px;
height: 120px;
border-radius: 50%;
background: radial-gradient(circle at 40% 40%, #C4A87A, #8C6840);
box-shadow: 0 0 60px rgba(160,132,92,0.3);
}

.hero-label {
position: absolute;
bottom: 3rem;
left: 3rem;
color: rgba(255,255,255,0.3);
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
}

/* MARQUEE */
.marquee-bar {
background: var(--dark);
padding: 1rem 0;
overflow: hidden;
white-space: nowrap;
}

.marquee-track {
display: inline-flex;
animation: marquee 20s linear infinite;
}

.marquee-track span {
color: rgba(255,255,255,0.5);
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 0 2rem;
}

.marquee-track span.accent { color: var(--accent); }

@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}

/* FEATURED */
.section {
padding: 7rem 6rem;
}

.section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 4rem;
}

.section-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2rem, 3.5vw, 3.5rem);
font-weight: 300;
line-height: 1.1;
}

.section-link {
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid var(--accent);
padding-bottom: 2px;
}

.products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}

.product-card {
cursor: pointer;
transition: transform 0.3s;
}

.product-card:hover { transform: translateY(-6px); }

.product-card:hover .product-img-inner { transform: scale(1.04); }

.product-img {
aspect-ratio: 3/4;
background: var(--dark);
overflow: hidden;
margin-bottom: 1.25rem;
position: relative;
}

.product-img-inner {
width: 100%;
height: 100%;
transition: transform 0.5s ease;
display: flex;
align-items: center;
justify-content: center;
}

/* Product visual placeholders */
.p1 { background: linear-gradient(160deg, #2E2018, #4A3020); }
.p2 { background: linear-gradient(160deg, #281E14, #3E2E1C); }
.p3 { background: linear-gradient(160deg, #322418, #503828); }
.p4 { background: linear-gradient(160deg, #261C12, #3C2C1A); }
.p5 { background: linear-gradient(160deg, #2C2016, #443018); }
.p6 { background: linear-gradient(160deg, #301E14, #4A2E1E); }

.product-icon {
font-size: 4rem;
opacity: 0.6;
}

.product-badge {
position: absolute;
top: 1rem;
left: 1rem;
background: var(--accent);
color: white;
font-size: 0.65rem;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.3rem 0.7rem;
}

.product-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem;
font-weight: 400;
margin-bottom: 0.3rem;
}

.product-meta {
display: flex;
justify-content: space-between;
align-items: center;
}

.product-material {
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}

.product-price {
font-size: 1rem;
color: var(--accent);
font-weight: 500;
}

/* ABOUT BAND */
.about-band {
background: var(--dark);
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 500px;
}

.about-visual {
background: linear-gradient(135deg, #2E2218, #3D2E1E);
display: flex;
align-items: center;
justify-content: center;
padding: 4rem;
}

.lathe-graphic {
width: 200px;
height: 200px;
position: relative;
}

.lathe-ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(184,134,78,0.25);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}

.about-text {
padding: 5rem 5rem;
display: flex;
flex-direction: column;
justify-content: center;
}

.about-eyebrow {
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1.5rem;
}

.about-title {
font-family: 'Cormorant Garamond', serif;
font-size: 2.5rem;
font-weight: 300;
color: var(--cream);
line-height: 1.2;
margin-bottom: 1.5rem;
}

.about-body {
color: rgba(247,244,239,0.5);
line-height: 1.9;
font-size: 0.95rem;
margin-bottom: 2.5rem;
}

/* CATEGORIES */
.categories {
padding: 7rem 6rem;
background: #EDE5D8;
}

.cat-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 1.5rem;
margin-top: 4rem;
}

.cat-card {
background: var(--dark);
position: relative;
overflow: hidden;
cursor: pointer;
aspect-ratio: auto;
}

.cat-card.tall { grid-row: span 2; }

.cat-inner {
padding: 2.5rem;
height: 100%;
min-height: 220px;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
z-index: 2;
transition: background 0.3s;
}

.cat-card:hover .cat-inner { background: rgba(184,134,78,0.1); }

.cat-bg {
position: absolute;
inset: 0;
opacity: 0.15;
font-size: 8rem;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}

.cat-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.6rem;
font-weight: 300;
color: var(--cream);
margin-bottom: 0.5rem;
}

.cat-count {
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
}

/* PROCESS */
.process {
padding: 7rem 6rem;
border-top: 1px solid var(--border);
}

.process-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3rem;
margin-top: 4rem;
}

.step-num {
font-family: 'Cormorant Garamond', serif;
font-size: 4rem;
font-weight: 300;
color: var(--border);
line-height: 1;
margin-bottom: 1rem;
}

.step-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.3rem;
margin-bottom: 0.75rem;
}

.step-body {
font-size: 0.88rem;
color: var(--muted);
line-height: 1.8;
}

/* NEWSLETTER */
.newsletter {
background: var(--accent);
padding: 5rem 6rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 4rem;
}

.newsletter-title {
font-family: 'Cormorant Garamond', serif;
font-size: 2.5rem;
font-weight: 300;
color: white;
line-height: 1.2;
}

.newsletter-form {
display: flex;
gap: 0;
flex: 0 0 420px;
}

.newsletter-form input {
flex: 1;
padding: 1rem 1.5rem;
border: none;
background: rgba(255,255,255,0.2);
color: white;
font-family: 'DM Sans', sans-serif;
font-size: 0.9rem;
outline: none;
}

.newsletter-form input::placeholder { color: rgba(255,255,255,0.6); }

.newsletter-form button {
background: var(--dark);
color: white;
border: none;
padding: 1rem 1.75rem;
font-family: 'DM Sans', sans-serif;
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s;
}

.newsletter-form button:hover { background: var(--mid); }

/* FOOTER */
footer {
background: var(--dark);
padding: 4rem 6rem 2rem;
}

.footer-top {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 4rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 2rem;
}

.footer-brand {
font-family: 'Cormorant Garamond', serif;
font-size: 1.4rem;
color: var(--cream);
margin-bottom: 1rem;
}

.footer-brand span { color: var(--accent); }

.footer-tagline {
font-size: 0.85rem;
color: rgba(247,244,239,0.35);
line-height: 1.8;
}

.footer-col-title {
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1.25rem;
}

.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
}

.footer-links a {
color: rgba(247,244,239,0.4);
text-decoration: none;
font-size: 0.85rem;
transition: color 0.2s;
}

.footer-links a:hover { color: var(--cream); }

.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}

.footer-copy {
font-size: 0.75rem;
color: rgba(247,244,239,0.25);
}

.footer-location {
font-size: 0.75rem;
color: rgba(247,244,239,0.25);
letter-spacing: 0.05em;
}

/* ANIMATIONS */
.fade-up {
opacity: 0;
transform: translateY(30px);
animation: fadeUp 0.7s forwards;
}

@keyframes fadeUp {
to { opacity: 1; transform: translateY(0); }
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.55s; }
```

</style>
</head>
<body>

<nav>
<a href="#" class="nav-logo">Not All Thumbs <span>Woodcrafts</span></a>
<ul class="nav-links">
<li><a href="#shop">Shop</a></li>
<li><a href="#about">About</a></li>
<li><a href="#process">Process</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<a href="#shop" class="nav-cart">Cart (0)</a>
</nav>

<section class="hero">
<div class="hero-text">
<h1 class="hero-title fade-up delay-1">One of a kind.<br>Artisan <em>quality.</em><br>Functional art.</h1>
<p class="hero-sub fade-up delay-2">Artisan-made pieces designed to spark connection, conversation, and enjoyment.</p>
<div class="hero-cta fade-up delay-3">
<a href="#shop" class="btn-primary">Shop Now</a>
<a href="#about" class="btn-secondary">Our Story</a>
</div>
</div>
<div class="hero-visual">
<div class="hero-visual-inner" style="padding:0;position:relative;">
<img src="hero-bowl.jpeg" alt="Hand-turned wood and resin bowl by Not All Thumbs Woodcrafts" style="width:100%;height:100%;object-fit:cover;display:block;" />
<div style="position:absolute;inset:0;background:linear-gradient(to top, rgba(30,20,10,0.6) 0%, transparent 50%);"></div>
<p class="hero-label"><em>Illegitimi Non Carborundum</em></p>
</div>
</div>
</section>

<div class="marquee-bar">
<div class="marquee-track">
<span>Cocktail Smokers</span><span class="accent">✦</span>
<span>Turned Bowls</span><span class="accent">✦</span>
<span>Handmade Vessels</span><span class="accent">✦</span>
<span>Pens & Small Items</span><span class="accent">✦</span>
<span class="accent">Illegitimi Non Carborundum</span><span class="accent">✦</span>
<span>Craft Fair Favorites</span><span class="accent">✦</span>
<span>Cocktail Smokers</span><span class="accent">✦</span>
<span>Turned Bowls</span><span class="accent">✦</span>
<span>Handmade Vessels</span><span class="accent">✦</span>
<span>Pens & Small Items</span><span class="accent">✦</span>
<span class="accent">Illegitimi Non Carborundum</span><span class="accent">✦</span>
<span>Craft Fair Favorites</span><span class="accent">✦</span>
</div>
</div>

<section class="section" id="shop">
<div class="section-header">
<h2 class="section-title">Featured<br>Products</h2>
<a href="#" class="section-link">View All</a>
</div>
<div class="products-grid">

```
<div class="product-card tall" style="grid-row:span 2;cursor:pointer;transition:transform 0.3s;">
<div class="product-img p1" style="aspect-ratio:unset;height:100%;">
<div class="product-img-inner" style="height:100%;"><span class="product-icon">🥃</span></div>
<span class="product-badge">Best Seller</span>
</div>
<p class="product-name">Cocktail Smoker Kit</p>
<div class="product-meta">
<span class="product-material">Cherry Wood</span>
<span class="product-price">$65</span>
</div>
</div>

<div class="product-card">
<div class="product-img p2">
<div class="product-img-inner"><span class="product-icon">🥃</span></div>
</div>
<p class="product-name">Cocktail Smoker Kit</p>
<div class="product-meta">
<span class="product-material">Walnut</span>
<span class="product-price">$70</span>
</div>
</div>

<div class="product-card">
<div class="product-img p3">
<div class="product-img-inner"><span class="product-icon">🎲</span></div>
<span class="product-badge">New</span>
</div>
<p class="product-name">Yardzee Set</p>
<div class="product-meta">
<span class="product-material">Solid Wood</span>
<span class="product-price">$85</span>
</div>
</div>

<div class="product-card">
<div class="product-img p4">
<div class="product-img-inner"><span class="product-icon">🪵</span></div>
</div>
<p class="product-name">Turned Serving Bowl</p>
<div class="product-meta">
<span class="product-material">Maple Burl</span>
<span class="product-price">$120</span>
</div>
</div>

<div class="product-card">
<div class="product-img p5">
<div class="product-img-inner"><span class="product-icon">✒️</span></div>
</div>
<p class="product-name">Handturned Pen</p>
<div class="product-meta">
<span class="product-material">Wood, Resin & Antler</span>
<span class="product-price">$35</span>
</div>
</div>

<div class="product-card">
<div class="product-img p6">
<div class="product-img-inner"><span class="product-icon">🎁</span></div>
<span class="product-badge">Gift Set</span>
</div>
<p class="product-name">Smoker Gift Bundle</p>
<div class="product-meta">
<span class="product-material">Mixed Woods</span>
<span class="product-price">$110</span>
</div>
</div>
```

</div>
</section>

<section class="about-band" id="about">
<div class="about-visual">
<div class="lathe-graphic">
<div class="lathe-ring" style="width:200px;height:200px;margin-left:-100px;margin-top:-100px;"></div>
<div class="lathe-ring" style="width:150px;height:150px;margin-left:-75px;margin-top:-75px;"></div>
<div class="lathe-ring" style="width:100px;height:100px;margin-left:-50px;margin-top:-50px;"></div>
<div class="lathe-ring" style="width:60px;height:60px;margin-left:-30px;margin-top:-30px;background:radial-gradient(circle,#C4A87A,#8C6840);border:none;"></div>
</div>
</div>
<div class="about-text">
<p class="about-eyebrow">About the Maker</p>
<h2 class="about-title">Crafted by hand,<br>one turn at a time.</h2>
<p class="about-body">Not All Thumbs Woodcrafts creates handcrafted, one-of-a-kind pieces that blend artisan quality with everyday usefulness. Each item is thoughtfully made to be more than something to look at—it's functional art designed to be used, shared, and enjoyed.</p>
<p class="about-body" style="margin-top:1rem;">Not All Thumbs Woodcrafts is about creating artisan-made functional art—well-crafted objects that spark connection, conversation, and enjoyment, one handcrafted piece at a time.</p>
<a href="#" class="btn-primary" style="align-self:flex-start;margin-top:1rem;">Meet Frank</a>
</div>
</section>

<section class="categories" id="collections">
<div class="section-header">
<h2 class="section-title">Shop by<br>Category</h2>
<a href="#" class="section-link">All Collections</a>
</div>
<div class="cat-grid">
<div class="cat-card tall">
<div class="cat-bg">🥃</div>
<div class="cat-inner">
<p class="cat-name">Cocktail Smokers</p>
<p class="cat-count">Our Most Popular</p>
</div>
</div>
<div class="cat-card">
<div class="cat-bg">🎲</div>
<div class="cat-inner">
<p class="cat-name">Yardzee</p>
<p class="cat-count">Yard Game Sets</p>
</div>
</div>
<div class="cat-card">
<div class="cat-bg">✒️</div>
<div class="cat-inner">
<p class="cat-name">Pens</p>
<p class="cat-count">Wood, Resin & Antler</p>
</div>
</div>
<div class="cat-card">
<div class="cat-bg">🪵</div>
<div class="cat-inner">
<p class="cat-name">Bowls & Vessels</p>
<p class="cat-count">Turned & Finished</p>
</div>
</div>
<div class="cat-card">
<div class="cat-bg">🎁</div>
<div class="cat-inner">
<p class="cat-name">Gift Sets & Custom</p>
<p class="cat-count">Inquire Below</p>
</div>
</div>
</div>
</section>

<section class="process" id="process">
<div class="section-header">
<h2 class="section-title">How It's<br>Made</h2>
</div>
<div class="process-steps">
<div>
<p class="step-num">01</p>
<p class="step-title">Select the Wood</p>
<p class="step-body">Every piece starts with carefully chosen hardwood — walnut, cherry, maple, oak, and more exotic species.</p>
</div>
<div>
<p class="step-num">02</p>
<p class="step-title">Mount & Turn</p>
<p class="step-body">The blank goes on the lathe. Turning tools shape it slowly, revealing the grain patterns hidden inside.</p>
</div>
<div>
<p class="step-num">03</p>
<p class="step-title">Sand & Finish</p>
<p class="step-body">Each piece is sanded through progressive grits and finished with food-safe oils or lacquer for lasting beauty.</p>
</div>
<div>
<p class="step-num">04</p>
<p class="step-title">Ships to You</p>
<p class="step-body">Carefully packed and shipped to your door — or find us in person at craft fairs around the Chicago area.</p>
</div>
</div>
</section>

<section class="section" id="events" style="background:#EDE5D8;border-top:1px solid var(--border);">
<div class="section-header">
<h2 class="section-title">Find Us<br>in Person</h2>
</div>

<div style="margin-bottom:3rem;">
<p style="font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);margin-bottom:1.25rem;">Mai Fest 2026</p>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;">
<div style="background:var(--dark);padding:2rem;">
<p style="font-family:'Cormorant Garamond',serif;font-size:1.6rem;color:var(--cream);margin-bottom:0.5rem;">5th Annual Arts & Crafts Street Festival</p>
<p style="font-size:0.85rem;color:var(--accent-light);margin-bottom:1rem;">Saturday, May 9, 2026  ·  12PM – 5PM</p>
<p style="font-size:0.85rem;color:rgba(245,240,232,0.5);">13351 Old Western Ave, Blue Island, IL 60406-5026</p>
</div>
<div style="background:var(--cream);padding:2rem;border:1px solid var(--border);display:flex;align-items:center;">
<p style="font-size:0.9rem;color:var(--muted);line-height:1.8;">A beloved annual street festival hosted by the Blue Island Arts Alliance. Come find us for cocktail smokers, Yardzee sets, turned pens, and more.</p>
</div>
</div>
</div>

<div>
<p style="font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);margin-bottom:1.25rem;">Park Ridge Market After Dark — 2026 Dates</p>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;">

```
<div style="background:var(--cream);padding:2rem;border:1px solid var(--border);">
<p style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:0.75rem;">Event 1</p>
<p style="font-family:'Cormorant Garamond',serif;font-size:1.4rem;margin-bottom:0.5rem;">May 30, 2026</p>
<p style="font-size:0.82rem;color:var(--muted);margin-bottom:0.25rem;">Saturday Evening</p>
<p style="font-size:0.82rem;color:var(--muted);">15 Prairie Ave, Park Ridge, IL 60068</p>
</div>

<div style="background:var(--cream);padding:2rem;border:1px solid var(--border);">
<p style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:0.75rem;">Event 2</p>
<p style="font-family:'Cormorant Garamond',serif;font-size:1.4rem;margin-bottom:0.5rem;">July 25, 2026</p>
<p style="font-size:0.82rem;color:var(--muted);margin-bottom:0.25rem;">Saturday Evening · 🎄 Christmas in July!</p>
<p style="font-size:0.82rem;color:var(--muted);">15 Prairie Ave, Park Ridge, IL 60068</p>
</div>

<div style="background:var(--cream);padding:2rem;border:1px solid var(--border);">
<p style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:0.75rem;">Event 3</p>
<p style="font-family:'Cormorant Garamond',serif;font-size:1.4rem;margin-bottom:0.5rem;">August 22, 2026</p>
<p style="font-size:0.82rem;color:var(--muted);margin-bottom:0.25rem;">Saturday Evening</p>
<p style="font-size:0.82rem;color:var(--muted);">15 Prairie Ave, Park Ridge, IL 60068</p>
</div>

</div>
```

</div>
</section>

<section class="newsletter">
<h2 class="newsletter-title">New pieces,<br>craft fair dates & more.</h2>
<div class="newsletter-form">
<input type="email" placeholder="Your email address" />
<button type="button">Subscribe</button>
</div>
</section>

<footer id="contact">
<div class="footer-top">
<div>
<p class="footer-brand">Not All Thumbs <span>Woodcrafts</span></p>
<p class="footer-tagline" style="font-style:italic;color:var(--accent-light);margin-bottom:0.75rem;">Illegitimi Non Carborundum</p>
<p class="footer-tagline">Artisan-made functional art crafted in West Chicago, Illinois. Every piece is truly one of a kind.</p>
</div>
<div>
<p class="footer-col-title">Shop</p>
<ul class="footer-links">
<li><a href="#">Cocktail Smokers</a></li>
<li><a href="#">Yardzee Sets</a></li>
<li><a href="#">Bowls & Vessels</a></li>
<li><a href="#">Pens</a></li>
<li><a href="#">Gift Sets & Custom</a></li>
</ul>
</div>
<div>
<p class="footer-col-title">Info</p>
<ul class="footer-links">
<li><a href="#">About Frank</a></li>
<li><a href="#">The Process</a></li>
<li><a href="#">Craft Fair Schedule</a></li>
<li><a href="#">Shipping & Returns</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<div>
<p class="footer-col-title">Contact</p>
<ul class="footer-links">
<li><a href="https://notallthumbscrafts.com">notallthumbscrafts.com</a></li>
<li><a href="https://www.instagram.com/not_all_thumbs_woodcrafts" target="_blank">Instagram</a></li>
<li><a href="https://www.facebook.com/not_all_thumbs_woodcrafts" target="_blank">Facebook</a></li>
<li><a href="/cdn-cgi/l/email-protection#90feffe4f1fcfce4f8e5fdf2e3f3e2f1f6e4e3d0f7fdf1f9fcbef3fffd"><span class="__cf_email__" data-cfemail="157b7a61747979617d60787766766774736166557278747c793b767a78">[email protected]</span></a></li>
<li><a href="tel:+18472260837">(847) 226-0837</a></li>