:root {
    /* Warm Artisan Palette */
    --a-cream: #EAE6DB;
    --a-brown: #3C2A21;
    --a-latte: #A67B5B;
    --a-paper: #F5F1E7;
    
    --font-serif: 'Besley', serif;
    --font-sans: 'Karla', sans-serif;
}

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

body { background-color: var(--a-cream); color: var(--a-brown); font-family: var(--font-sans); overflow-x: hidden; position: relative; }

/* Global Paper Texture Overlay */
.paper-texture {
    position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: 0.4; mix-blend-mode: multiply;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
}

/* Custom Wood-toned Cursor */
.a-cursor {
    position: fixed; width: 25px; height: 25px; background: rgba(166, 123, 91, 0.4); border-radius: 50%;
    pointer-events: none; z-index: 10001; transform: translate(-50%, -50%); transition: transform 0.2s, background 0.2s; backdrop-filter: blur(2px);
}
.a-cursor.hover { transform: translate(-50%, -50%) scale(2); background: rgba(60, 42, 33, 0.1); border: 1px solid var(--a-brown); }

/* Nav */
.artisan-nav {
    position: fixed; top: 0; width: 100%; padding: 30px 5%; display: flex; justify-content: space-between; align-items: center; z-index: 100;
}
.logo { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; letter-spacing: 2px; }
.nav-links { display: flex; gap: 40px; }
.nav-links a { color: var(--a-brown); text-decoration: none; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s; }
.nav-links a:hover { color: var(--a-latte); }

/* Hero */
.a-hero { height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; }
#bean-canvas { position: absolute; inset: 0; z-index: 1; }
.hero-text { position: relative; z-index: 2; pointer-events: none; }
.hero-text > * { pointer-events: auto; }
.hero-text h1 { font-family: var(--font-serif); font-size: 5rem; line-height: 1.1; margin-bottom: 20px; color: var(--a-brown); }
.hero-text h1 span { font-style: italic; color: var(--a-latte); }
.hero-text p { font-size: 1.2rem; margin-bottom: 40px; color: #555; }
.btn-wood { background: var(--a-brown); color: var(--a-paper); border: none; padding: 15px 35px; font-family: var(--font-serif); font-size: 1.1rem; border-radius: 4px; transition: background 0.3s; }
.btn-wood:hover { background: var(--a-latte); }

/* Shop Section */
.shop-section { padding: 150px 5%; background: var(--a-paper); }
.section-title { margin-bottom: 80px; }
.section-title h2 { font-family: var(--font-serif); font-size: 3.5rem; margin-bottom: 10px; }
.section-title p { font-size: 1.2rem; color: var(--a-latte); }
.text-center { text-align: center; }

.coffee-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; max-width: 1200px; margin: 0 auto; align-items: start; }
.mt-down { margin-top: 60px; }

.c-card { text-align: center; }
.c-card h3 { font-family: var(--font-serif); font-size: 1.5rem; margin-top: 25px; margin-bottom: 5px; }
.roast-level { display: block; font-size: 0.9rem; color: var(--a-latte); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.price { font-weight: 600; font-size: 1.2rem; }

.bag-container { position: relative; height: 400px; overflow: hidden; border-radius: 8px; border: 1px solid rgba(60,42,33,0.1); background: #eee; }
.bag-img { width: 100%; height: 100%; object-fit: cover; filter: sepia(30%) contrast(0.9); transition: transform 0.6s, filter 0.6s; }
.c-card:hover .bag-img { transform: scale(1.05); filter: sepia(0%) contrast(1); }

.taste-overlay { position: absolute; inset: 0; background: rgba(60, 42, 33, 0.85); color: var(--a-paper); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.4s; backdrop-filter: blur(5px); }
.c-card:hover .taste-overlay { opacity: 1; }
.taste-overlay h4 { font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: 20px; font-style: italic; }
.taste-overlay ul { list-style: none; }
.taste-overlay li { font-size: 1rem; margin-bottom: 10px; letter-spacing: 1px; text-transform: uppercase; }

/* Brew Guide Interactive */
.brew-section { padding: 150px 5%; }
.brew-container { display: flex; max-width: 1000px; margin: 0 auto; gap: 80px; align-items: center; }
.b-left { flex: 1; border-right: 1px solid rgba(60, 42, 33, 0.2); padding-right: 40px; }
.b-left h2 { font-family: var(--font-serif); font-size: 3rem; margin-bottom: 40px; }
.brew-selector { display: flex; flex-direction: column; gap: 20px; }
.b-option { font-size: 1.5rem; color: rgba(60, 42, 33, 0.4); text-transform: uppercase; font-weight: 600; transition: color 0.3s; }
.b-option:hover { color: var(--a-latte); }
.b-option.active { color: var(--a-brown); }

.b-right { flex: 1.5; }
.brew-content { display: none; padding: 40px; background: var(--a-white); border: 1px solid rgba(60, 42, 33, 0.1); border-radius: 8px; box-shadow: 0 10px 30px rgba(60, 42, 33, 0.05); }
.brew-content.active { display: block; animation: fadeIn 0.5s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.brew-content h3 { font-family: var(--font-serif); font-size: 2rem; margin-bottom: 30px; font-style: italic; }
.step { margin-bottom: 20px; font-size: 1.1rem; line-height: 1.5; }
.step span { font-weight: 600; color: var(--a-latte); margin-right: 10px; }

/* Footer */
.a-footer { border-top: 1px solid rgba(60, 42, 33, 0.1); }
.newsletter-wood { background: var(--a-brown); color: var(--a-paper); padding: 80px 5%; text-align: center; }
.newsletter-wood h3 { font-family: var(--font-serif); font-size: 2.5rem; margin-bottom: 40px; }
.input-line { display: flex; max-width: 500px; margin: 0 auto; border-bottom: 1px solid var(--a-paper); padding-bottom: 10px; }
.input-line input { flex: 1; background: transparent; border: none; outline: none; color: var(--a-paper); font-family: var(--font-sans); font-size: 1.1rem; }
.input-line input::placeholder { color: rgba(245, 241, 231, 0.5); }
.input-line button { background: transparent; border: none; color: var(--a-paper); font-family: var(--font-sans); font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }

.f-bottom { display: flex; justify-content: space-between; align-items: center; padding: 40px 5%; background: var(--a-paper); }
.f-bottom p { font-size: 0.9rem; color: var(--a-latte); }

@media (max-width: 900px) {
    .hero-text h1 { font-size: 3.5rem; }
    .coffee-grid { grid-template-columns: 1fr; gap: 40px; }
    .mt-down { margin-top: 0; }
    .brew-container { flex-direction: column; }
    .b-left { border-right: none; border-bottom: 1px solid rgba(60, 42, 33, 0.2); padding-right: 0; padding-bottom: 40px; }
    .f-bottom { flex-direction: column; gap: 20px; }
}