:root {
  --cream: #f8f3ec;
  --paper: #fffdf9;
  --espresso: #3b2a22;
  --cocoa: #7a5c4d;
  --blush: #e9cfc4;
  --rose: #b9786a;
  --line: #eadfd4;
  --radius: 14px;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--espresso); font: 16px/1.6 var(--sans); }
a { color: inherit; }
img { max-width: 100%; display: block; }

.disclosure-bar {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  background: var(--espresso); color: var(--cream); font-size: 13px; padding: 8px 16px; text-align: center;
}
.disclosure-bar a { color: var(--blush); }

.site-header { max-width: 1120px; margin: 0 auto; padding: 24px 16px 8px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.brand { font: 600 40px/1 var(--serif); text-decoration: none; letter-spacing: .5px; }
.brand span { color: var(--rose); }
nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chip {
  font: 500 14px var(--sans); color: var(--espresso); background: transparent;
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer;
}
.chip:hover { border-color: var(--rose); }
.chip.is-active { background: var(--espresso); color: var(--cream); border-color: var(--espresso); }

main { max-width: 1120px; margin: 0 auto; padding: 0 16px 48px; }
.hero { text-align: center; padding: 32px 0 28px; max-width: 680px; margin: 0 auto; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--cocoa); margin: 0 0 8px; }
h1 { font: 600 clamp(36px, 6vw, 56px)/1.05 var(--serif); margin: 0 0 12px; }
.lede { color: var(--cocoa); margin: 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(59, 42, 34, .08); }
.card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.card-media { aspect-ratio: 4 / 5; background: var(--blush); display: grid; place-items: center; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media .type-card { padding: 24px; text-align: center; font: 600 28px/1.15 var(--serif); color: var(--espresso); }
.card-media .type-card small { display: block; margin-top: 10px; font: 500 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cocoa); }
.card-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-cat { margin: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cocoa); }
.card-title { margin: 0; font: 600 22px/1.2 var(--serif); }
.card-desc { margin: 0; color: var(--cocoa); font-size: 14px; flex: 1; }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; }
.card-price { font-weight: 600; }
.card-cta { color: var(--rose); font-weight: 500; white-space: nowrap; }

.empty { text-align: center; padding: 48px 16px; color: var(--cocoa); }
.empty-title { font: 600 28px var(--serif); color: var(--espresso); margin: 0 0 8px; }

.site-footer { border-top: 1px solid var(--line); text-align: center; padding: 28px 16px 40px; color: var(--cocoa); font-size: 14px; }
.site-footer p { margin: 6px auto; max-width: 720px; }
.fine { font-size: 12px; }

.prose { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; }
.prose h1 { font-size: 44px; }
.prose h2 { font: 600 26px var(--serif); margin-top: 28px; }

.card { position: relative; }
.card-num { position: absolute; top: 10px; left: 10px; z-index: 1; min-width: 28px; height: 28px; padding: 0 8px; display: grid; place-items: center; border-radius: 14px; background: var(--paper); color: var(--espresso); font: 600 14px var(--sans); border: 1px solid var(--line); }
.list-summary { margin: 8px 0 0; font-weight: 600; color: var(--espresso); }
.note { margin: 16px 0 0; color: var(--cocoa); font-size: 13px; }