:root {
  --cream: #f7f1e7;
  --paper: #fffdf8;
  --ink: #26241f;
  --muted: #6e685f;
  --sage: #8f9d7c;
  --sage-dark: #5f6f56;
  --ochre: #d5a23f;
  --rust: #a8613e;
  --warm: #d7b89d;
  --line: rgba(38,36,31,.14);
  --radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", system-ui, sans-serif;
  line-height: 1.55;
}
a { color: inherit; }
img { max-width: 100%; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(22px, 5vw, 72px);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark {
  width: 42px; height: 42px; border: 1px solid var(--ink); border-radius: 50%;
  display: grid; place-items: center; font-family: "Playfair Display", serif; font-size: 15px;
}
.brand-name { font-family: "Playfair Display", serif; font-size: 20px; font-weight: 600; }
.nav { display: flex; gap: 24px; align-items: center; }
.nav a { text-decoration: none; font-size: 14px; color: #49443d; }
.nav a:hover { color: var(--rust); }
.nav-toggle { display: none; border: 0; background: transparent; font-size: 24px; }

.hero {
  min-height: 78vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  padding: clamp(64px, 8vw, 120px) clamp(22px, 7vw, 110px);
  background: linear-gradient(120deg, #f8f1e6 0%, #fbf7ef 60%, #f3eadb 100%);
  overflow: hidden;
}
.hero-copy { max-width: 730px; }
.eyebrow { margin: 0 0 12px; text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 600; color: var(--sage-dark); }
h1, h2, h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 500; line-height: 1.06; margin-top: 0; }
h1 { font-size: clamp(54px, 7vw, 100px); letter-spacing: -.04em; margin-bottom: 26px; }
h1 em { color: var(--rust); font-weight: 500; }
h2 { font-size: clamp(38px, 4.3vw, 64px); letter-spacing: -.03em; margin-bottom: 20px; }
h3 { font-size: 27px; line-height: 1.12; }
.lede { font-size: clamp(18px, 2vw, 23px); color: #514c44; max-width: 640px; }
.hero-actions { display: flex; gap: 18px; align-items: center; margin-top: 34px; flex-wrap: wrap; }
.button { text-decoration: none; font-weight: 600; }
.button.primary { display: inline-block; padding: 15px 23px; background: var(--ink); color: white; border-radius: 999px; }
.button.text { padding: 12px 4px; }

.hero-art { position: relative; min-height: 520px; }
.arch { position: absolute; border-radius: 220px 220px 24px 24px; }
.arch-one { width: 68%; height: 86%; right: 2%; top: 3%; background: var(--sage); opacity: .95; }
.arch-two { width: 46%; height: 58%; left: 2%; bottom: 7%; background: var(--ochre); opacity: .9; }
.table-line { position: absolute; left: 12%; right: 2%; bottom: 18%; height: 8px; background: var(--ink); border-radius: 99px; }
.vase { position: absolute; right: 30%; bottom: 19%; width: 104px; height: 154px; background: #f4e7d4; border: 4px solid var(--ink); border-radius: 45% 45% 36% 36%; }
.vase:before { content:""; position:absolute; left:50%; top:-24px; transform:translateX(-50%); width:50px; height:34px; background:#f4e7d4; border:4px solid var(--ink); border-bottom:0; border-radius:20px 20px 0 0; }
.vase span { position: absolute; width: 4px; height: 150px; background: var(--ink); transform-origin: bottom; bottom: 128px; left: 50px; }
.vase span:nth-child(1){ transform: rotate(-27deg); }
.vase span:nth-child(2){ transform: rotate(7deg); }
.vase span:nth-child(3){ transform: rotate(34deg); }
.vase span:after { content:""; position:absolute; width:34px; height:18px; background:var(--rust); border-radius:50%; top:-4px; left:-14px; transform:rotate(-18deg); }
.glass { position:absolute; bottom:19%; width:48px; height:90px; border:4px solid var(--ink); border-radius:6px 6px 17px 17px; background: rgba(255,255,255,.28); }
.glass-one { left:26%; }
.glass-two { left:38%; height:74px; }
.plate { position:absolute; left:25%; bottom:17%; width:170px; height:34px; border:4px solid var(--ink); border-radius:50%; background:#f8f0e6; }

.promise-strip { display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--line); background:var(--paper); }
.promise-strip span { padding:18px; text-align:center; font-size:13px; text-transform:uppercase; letter-spacing:.12em; border-right:1px solid var(--line); }
.promise-strip span:last-child { border-right:0; }

.intro { display:grid; grid-template-columns: 1.2fr .8fr; gap:70px; padding:120px clamp(22px, 7vw, 110px); align-items:end; }
.intro p:last-child { font-size:20px; color:var(--muted); max-width:580px; }

.cards-section, .shop-preview { padding: 20px clamp(22px, 7vw, 110px) 120px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:34px; }
.section-heading a { text-decoration:none; font-weight:600; font-size:14px; }
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature-card { min-height:470px; border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; justify-content:space-between; }
.feature-card.warm { background:#ead5c5; }
.feature-card.sage { background:#ccd3c1; }
.feature-card.ochre { background:#e8c979; }
.card-number { font-family:"Playfair Display", serif; font-size:16px; opacity:.55; }
.card-content p { max-width:95%; }
.card-content a { text-decoration:none; font-weight:600; }

.manifesto { margin:0 clamp(22px, 5vw, 72px) 120px; padding:clamp(50px,7vw,92px); background:var(--ink); color:#fbf6ed; border-radius:36px; display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; }
.manifesto .eyebrow { color:#cad6bc; }
.manifesto-copy p { color:#ded8ce; max-width:700px; font-size:18px; }
.quote-card { background:#f4eadb; color:var(--ink); border-radius:28px; padding:42px; transform:rotate(1deg); }
.quote-mark { font-family:"Playfair Display", serif; font-size:82px; line-height:.7; color:var(--rust); }
blockquote { margin:10px 0 24px; font-family:"Playfair Display", serif; font-size:30px; line-height:1.25; }

.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.product-card h3 { font-size:25px; margin-bottom:10px; }
.product-card p { color:var(--muted); }
.product-art { aspect-ratio:4/3; border-radius:24px; display:grid; place-items:center; margin-bottom:20px; position:relative; overflow:hidden; }
.product-art span { font-family:"Playfair Display", serif; letter-spacing:.15em; font-size:30px; }
.product-art.linen { background:linear-gradient(135deg,#efe4d5,#d9c2a7); }
.product-art.glassware { background:linear-gradient(135deg,#dfe8dd,#aabca6); }
.product-art.bedding { background:linear-gradient(135deg,#efe9db,#d8d0c2); }
.product-kicker { text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:700; color:var(--sage-dark)!important; }
.affiliate-note { margin-top:30px; padding-top:20px; border-top:1px solid var(--line); font-size:12px; color:#837c72; }

.newsletter { margin:0 clamp(22px, 5vw, 72px) 90px; padding:clamp(44px,6vw,76px); background:#d9e0cf; border-radius:36px; display:grid; grid-template-columns:1fr .8fr; gap:50px; align-items:center; }
.newsletter p { max-width:650px; }
.signup { display:flex; gap:10px; background:var(--paper); padding:9px; border-radius:999px; }
.signup input { flex:1; min-width:0; border:0; background:transparent; padding:12px 16px; font:inherit; outline:0; }
.signup button { border:0; background:var(--ink); color:#fff; padding:14px 20px; border-radius:999px; font-weight:700; cursor:pointer; }

footer { padding:50px clamp(22px, 5vw, 72px); border-top:1px solid var(--line); }
.footer-brand { margin-bottom:18px; }
.footer-links { display:flex; flex-wrap:wrap; gap:18px; margin:24px 0; }
.footer-links a { text-decoration:none; color:var(--muted); font-size:14px; }
.copyright { color:#8a8379; font-size:13px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width: 900px) {
  .nav-toggle { display:block; }
  .nav { display:none; position:absolute; left:0; right:0; top:78px; background:var(--paper); padding:20px 28px; flex-direction:column; align-items:flex-start; border-bottom:1px solid var(--line); }
  .nav.open { display:flex; }
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:70px; }
  .hero-art { min-height:390px; }
  .intro, .manifesto, .newsletter { grid-template-columns:1fr; gap:30px; }
  .card-grid, .product-grid { grid-template-columns:1fr; }
  .feature-card { min-height:360px; }
  .promise-strip { grid-template-columns:1fr 1fr; }
  .promise-strip span:nth-child(2) { border-right:0; }
  .promise-strip span:nth-child(-n+2) { border-bottom:1px solid var(--line); }
}

@media (max-width: 560px) {
  .brand-name { font-size:17px; }
  h1 { font-size:53px; }
  .hero-art { min-height:320px; }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .promise-strip { grid-template-columns:1fr; }
  .promise-strip span { border-right:0; border-bottom:1px solid var(--line); }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .manifesto, .newsletter { margin-inline:16px; border-radius:28px; }
  .signup { border-radius:20px; flex-direction:column; }
  .signup button { width:100%; }
}