:root {
  --cream: #fbf7eb;
  --cream-soft: #f4eedb;
  --ink: #1a1814;
  --ink-soft: #3a342a;
  --ink-mute: #6d6555;
  --terracotta: #b54a1f;
  --terracotta-dark: #9c3d17;
  --marigold: #d28a2c;
  --rule: rgba(26, 24, 20, 0.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ink);
  margin: 0;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

a { color: inherit; }

.smallcaps {
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin: 0;
}

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(20px, 5vw, 56px);
  border-bottom: 1px solid var(--rule);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-mark { width: 34px; height: 40px; flex-shrink: 0; }
.brand-word {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--ink);
  letter-spacing: 0.08em;
}
.brand-locale {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 500;
}
@media (max-width: 520px) {
  .brand-locale { display: none; }
}

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  padding: clamp(80px, 14vw, 160px) clamp(20px, 5vw, 56px);
}
.hero-inner { max-width: 880px; margin: 0 auto; }
.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin: 0 0 28px;
}
.hero-headline {
  font-size: clamp(3rem, 9vw, 7.2rem);
  font-weight: 900;
  font-variation-settings: "opsz" 144;
}
.hero-headline em {
  display: block;
  color: var(--terracotta);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  margin-left: 0.4em;
}
.hero-tagline {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 500;
  color: var(--ink);
  margin: 28px 0 0;
  font-variation-settings: "opsz" 60;
}
.hero-sub {
  margin-top: 28px;
  max-width: 620px;
  font-size: 1.08rem;
  line-height: 1.6;
}
.hero-sub b { color: var(--ink); font-weight: 600; }

/* ── Content blocks ─────────────────────────────────────── */
.block {
  padding: clamp(60px, 10vw, 120px) clamp(20px, 5vw, 56px);
  border-top: 1px solid var(--rule);
}
.block-inner { max-width: 1080px; margin: 0 auto; }
.block .smallcaps { display: block; margin-bottom: 36px; }
.block-products { background: var(--cream-soft); }

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: clamp(24px, 4vw, 44px);
}
.card-wide { max-width: 760px; }
.card-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marigold);
  font-weight: 600;
  margin: 0 0 18px;
}
.card-title {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 500;
  font-variation-settings: "opsz" 60;
  margin-bottom: 14px;
}
.card-body { margin: 0; color: var(--ink-mute); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 820px) {
  .card-grid { grid-template-columns: 1fr; }
}

/* ── CTA ────────────────────────────────────────────────── */
.cta {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(80px, 12vw, 140px) clamp(20px, 5vw, 56px);
  text-align: center;
}
.cta-inner { max-width: 720px; margin: 0 auto; }
.cta-eyebrow { color: var(--marigold); display: block; margin-bottom: 18px; }
.cta-headline {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.05;
  color: var(--cream);
  max-width: 18ch;
  margin: 0 auto 24px;
  font-variation-settings: "opsz" 60;
}
.cta-headline em {
  font-style: italic;
  color: var(--marigold);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.cta-sub {
  color: rgba(251, 247, 235, 0.7);
  max-width: 50ch;
  margin: 0 auto 36px;
}
.cta-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 16px 28px;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.btn-primary {
  background: var(--terracotta);
  color: var(--cream);
}
.btn-primary:hover {
  background: var(--terracotta-dark);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(251, 247, 235, 0.3);
}
.btn-ghost:hover { background: rgba(251, 247, 235, 0.08); }

/* ── Footer ─────────────────────────────────────────────── */
.site-foot {
  padding: 36px clamp(20px, 5vw, 56px);
  background: var(--cream);
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--ink-mute);
}
.foot-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.foot-brand { font-weight: 600; color: var(--ink); }
.foot-contact a {
  color: var(--terracotta);
  text-decoration: none;
  margin: 0 4px;
}
.foot-contact a:hover { text-decoration: underline; }