/* The Cozy Home Edit — shared editorial typography and formatting system */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --reading-measure: 43rem;
  --content-measure: 50rem;
  --muted: #6b5e54;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body) !important;
  font-size: 16px;
  line-height: 1.72;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.brand-name,
.footer-title,
.hero-title,
.about-me-title,
.card-title,
.article-title,
.affiliate-article h1,
.affiliate-article h2 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
}

.brand-name {
  font-size: 1.18rem !important;
  letter-spacing: -0.025em !important;
}

.brand-note,
.desktop-nav a,
.mobile-menu,
.mobile-menu h3,
.mobile-menu a,
.footer-links,
.product-image-caption {
  font-family: var(--font-body) !important;
}

.desktop-nav a {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

.hero-title {
  font-size: clamp(2.05rem, 4vw, 3.15rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.038em !important;
  text-wrap: balance;
}

.hero-sub {
  max-width: 39rem;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

.about-me,
.card-desc {
  font-size: 0.96rem !important;
  line-height: 1.7 !important;
}

.about-me-title,
.card-title {
  letter-spacing: -0.018em;
}

.card-title {
  font-size: 1.38rem !important;
  line-height: 1.15 !important;
}

.article-card {
  border-radius: 24px !important;
}

.affiliate-article {
  font-size: 1.02rem;
  line-height: 1.75;
}

.affiliate-article > div {
  max-width: var(--content-measure) !important;
  line-height: 1.75 !important;
}

.affiliate-article .article-title,
.affiliate-article h1 {
  max-width: 18ch;
  margin: 0 0 1.15rem !important;
  color: var(--brand-dark);
  font-size: clamp(2.05rem, 4.2vw, 3.25rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.042em !important;
  text-wrap: balance;
}

.affiliate-article h2 {
  color: var(--brand-dark);
  font-size: clamp(1.55rem, 2.8vw, 2rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.026em !important;
}

.affiliate-article h3 {
  font-family: var(--font-body) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
}

.affiliate-article p,
.affiliate-article li {
  max-width: var(--reading-measure);
}

.affiliate-article p + p { margin-top: 1.05rem; }

/* Inline product blocks from legacy page generators become consistent editorial cards. */
.affiliate-article > div > div[style*="border"] {
  margin: 1.9rem 0 !important;
  padding: clamp(1.25rem, 3vw, 1.8rem) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 9px 25px rgba(81, 57, 45, 0.055) !important;
}

.affiliate-article > div > div[style*="border"] > h2 {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.affiliate-article > div > div[style*="border"]:hover {
  border-color: rgba(138, 86, 54, 0.42) !important;
  box-shadow: 0 14px 30px rgba(81, 57, 45, 0.09) !important;
}

.product-image-wrap {
  margin: 1.35rem 0 1.45rem !important;
  border-radius: 18px !important;
}

.product-image-caption {
  font-size: 0.78rem !important;
  line-height: 1.5 !important;
}

.affiliate-article table {
  font-size: 0.92rem;
  line-height: 1.5;
}

.affiliate-article a:not([href*="amazon.com"]):not([href*="amzn.to"]),
.footer-links a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .hero-title { font-size: clamp(1.9rem, 9vw, 2.55rem) !important; }
  .affiliate-article .article-title,
  .affiliate-article h1 { font-size: clamp(1.85rem, 8.5vw, 2.55rem) !important; }
  .affiliate-article { font-size: 1rem; }
  .affiliate-article > div > div[style*="border"] { padding: 1.1rem !important; }
}