:root {
    --color-bg: #FAF6F0;
    --color-text: #1C1816;
    --color-accent: #A25F34;
    --color-border: #E6DFD5;
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans: 'Inter', system-ui, sans-serif;
    --font-mono: 'Courier New', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); line-height: 1.6; padding: 20px; }

header { border-bottom: 1px solid var(--color-border); padding-bottom: 2rem; margin-bottom: 3rem; }
h1 { font-family: var(--font-serif); font-size: 2.5rem; margin-bottom: 0.5rem; }
.subtitle { font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }

.hero-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }
.pre-order-notice { border: 1px solid var(--color-accent); padding: 1.5rem; background: var(--color-bg); }
.pre-order-notice strong { color: var(--color-accent); font-family: var(--font-mono); }

section { margin-bottom: 4rem; }
h2 { font-family: var(--font-serif); font-size: 2rem; margin-bottom: 2rem; }

.grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.card { border: 1px solid var(--color-border); padding: 1.5rem; background: #fff; }
.card h3 { font-family: var(--font-serif); margin-bottom: 0.5rem; }
.price { font-family: var(--font-mono); font-weight: bold; display: block; margin-bottom: 1rem; }

button { background: var(--color-text); color: #fff; border: none; padding: 0.75rem 1.5rem; cursor: pointer; font-family: var(--font-sans); margin-top: 1rem; }

@media (min-width: 768px) {
    .hero-grid { grid-template-columns: 1fr 1fr; }
    .grid { grid-template-columns: 1fr 1fr; }
}