:root {
--bg: #f4f1eb;
--paper: #faf8f3;
--white: #ffffff;

```
--text: #222222;
--muted: #666666;

--accent: #495747;
--border: #ddd8cf;
```

}

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

body {
font-family: Georgia, serif;
line-height: 1.8;
background: var(--bg);
color: var(--text);
}

.container {
width: min(1100px, 92%);
margin: 0 auto;
}

.narrow {
max-width: 720px;
}

.hero {
min-height: 90vh;
background:
    linear-gradient(
        rgba(0,0,0,.35),
        rgba(0,0,0,.35)
    ),
    url('hero.jpg');
background-size: cover;
background-position: center;
color: white;
display: flex;
flex-direction: column;
}

nav {
padding: 2rem 5%;
}

.logo {
height: 104px;
width: auto;
}

.hero-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 2rem;
}

.hero h1 {
font-size: clamp(3rem, 8vw, 5.5rem);
font-weight: normal;
line-height: 1.1;
margin-bottom: 1rem;
}

.hero-subtitle {
max-width: 650px;
font-size: 1.3rem;
margin-bottom: 2rem;
}

.cta-button {
display: inline-block;
background: white;
color: black;
text-decoration: none;
padding: 1rem 2rem;
border-radius: 2px;
transition: .2s ease;
}

.cta-button:hover {
opacity: .85;
}

section {
padding: 7rem 0;
}

h2 {
font-size: 2rem;
font-weight: normal;
margin-bottom: 2rem;
}

.featured-designs {
background: white;
}

.product-grid {
display: grid;
grid-template-columns:
    repeat(auto-fit, minmax(280px, 1fr));

gap: 2rem;
}

.product-card {
background: var(--paper);
border: 1px solid var(--border);
overflow: hidden;
}

.image-placeholder {
aspect-ratio: 1 / 1;
background: #e6e1d8;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 2rem;
color: var(--muted);
font-size: .9rem;
}

.product-card h3 {
padding: 1rem 1rem .5rem;
font-weight: normal;
font-size: 1.4rem;
}

.product-card p {
padding: 0 1.5rem 1.5rem;
color: var(--muted);
}

.philosophy {
background: var(--paper);
}

.philosophy p,
.retail-partners p,
.trail-note p {
color: var(--muted);
margin-bottom: 1.5rem;
}

.retail-partners {
background: white;
text-align: center;
}

.note-label {
text-transform: uppercase;
letter-spacing: .15em;
font-size: .85rem;
color: var(--muted);
margin-bottom: .25rem;
}

.note-date {
color: var(--muted);
margin-bottom: 2rem;
}

.trail-note {
background: var(--paper);
}

footer {
text-align: center;
padding: 4rem 2rem;
border-top: 1px solid var(--border);
background: white;
}

.footer-logo {
height: 70px;
width: auto;
margin-bottom: 1.5rem;
opacity: .85;
}

footer p {
color: var(--muted);
margin-bottom: .75rem;
}

.copyright {
font-size: .9rem;
}

@media (max-width: 768px) {

.logo {
    height: 80px;
}

.footer-logo {
    height: 56px;
}

section {
    padding: 5rem 0;
}

.hero-subtitle {
    font-size: 1.1rem;
}
}