:root {
  --ivory: #F7F1E8;
  --champagne: #E6D8C4;
  --sage: #8FA089;
  --forest: #3E5548;
  --blush: #C4A8A0;
  --burgundy: #3E5548;
  --gold: #C4A882;
  --ink: #2C352F;
  --paper: #FFFBF6;
  --muted: #6B726C;
  --serif: "Cormorant Garamond", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --sans: "Jost", "Gill Sans", "Trebuchet MS", sans-serif;
  --space: clamp(1.1rem, 3vw, 2.4rem);
  --max: 1180px;
  --narrow: 720px;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500i.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jost-400.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jost-500.woff2") format("woff2");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold); }
h1, h2, h3, .wordmark {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.15;
}
h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); margin: 0 0 .4em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.skip {
  position: absolute; left: -999px; top: 0; background: var(--forest); color: var(--ivory); padding: .5rem 1rem;
}
.skip:focus { left: 0; z-index: 20; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { width: min(var(--max), calc(100% - 2rem)); margin-inline: auto; }
.narrow { width: min(var(--narrow), calc(100% - 2rem)); margin-inline: auto; }

.site-header {
  border-bottom: 1px solid var(--champagne);
  background: rgba(247,241,232,.94);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 8;
}
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: .7rem 0;
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--forest);
  text-decoration: none;
  min-width: 0;
}
.brand-lockup:hover { color: var(--forest); }
.brand-mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--ivory);
}
.wordmark {
  color: inherit;
  text-decoration: none;
  font-size: 1.55rem;
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.wm-kicker, .kicker {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.site-nav { display: flex; gap: 1.1rem; flex-wrap: wrap; justify-content: center; }
.site-nav a { color: var(--ink); text-decoration: none; font-size: .92rem; }
.site-nav a:hover { color: var(--forest); }
.search-mini { justify-self: end; }
.search-mini input, select, textarea, input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="number"], input[type="date"], input[type="password"] {
  border: 1px solid var(--champagne);
  background: var(--paper);
  padding: .55rem .7rem;
  font: inherit;
  color: var(--ink);
  width: 100%;
}
.search-mini input { min-width: 12rem; }
.nav-toggle { display: none; background: none; border: 1px solid var(--champagne); padding: .4rem .7rem; font: inherit; }

.hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 6vw, 5rem) 0 3rem;
}
.hero-copy p.lede { font-size: 1.2rem; max-width: 40ch; color: var(--muted); }
.hero-mark {
  display: grid;
  place-items: center;
  width: min(26rem, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,251,246,.2) 42%, transparent 43%),
    radial-gradient(circle at 30% 28%, rgba(196,168,160,.28), transparent 42%),
    radial-gradient(circle at 72% 70%, rgba(143,160,137,.32), transparent 46%),
    var(--ivory);
  box-shadow: 0 0 0 1px var(--gold), 0 18px 50px rgba(62,85,72,.08);
}
.hero-mark img {
  width: 78%;
  height: auto;
  max-width: 280px;
  border-radius: 50%;
}
.hero-frame {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--forest);
  border-radius: 2px;
}
.hero-frame img { width: 100%; height: 100%; object-fit: cover; }

.section { padding: 3rem 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.4rem; }
.card-grid, .cat-grid, .product-grid {
  display: grid;
  gap: 1.4rem;
}
.card-grid { grid-template-columns: repeat(3, 1fr); }
.cat-grid { grid-template-columns: repeat(4, 1fr); }
.product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.post-card, .cat-tile, .product-card {
  background: var(--paper);
  border: 1px solid var(--champagne);
}
.post-card a.thumb, .product-card .thumb {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  display: block;
  background: var(--champagne);
}
.post-card img, .product-card img, .cat-tile { object-fit: cover; width: 100%; height: 100%; }
.post-card .pad, .product-card .pad, .cat-tile { padding: 1rem 1.05rem 1.2rem; }
.cat-tile {
  min-height: 8.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  color: var(--ink);
  background:
    linear-gradient(180deg, transparent, rgba(62,85,72,.08)),
    var(--champagne);
}
.cat-tile:nth-child(3n) { background: linear-gradient(180deg, transparent, rgba(62,85,72,.1)), #E7E2D4; }
.cat-tile:nth-child(4n) { background: linear-gradient(180deg, transparent, rgba(196,168,160,.18)), #EFE4DC; }
.meta { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.badge {
  display: inline-block;
  border: 1px solid var(--gold);
  color: var(--forest);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .15rem .45rem;
  margin-right: .3rem;
}
.badge.sponsored { background: var(--blush); color: var(--ink); border-color: var(--blush); }

.btn, button.btn {
  display: inline-block;
  border: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
  padding: .8rem 1.2rem;
  text-decoration: none;
}
.btn-burg { background: var(--forest); color: var(--ivory); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-ghost { background: transparent; border: 1px solid var(--champagne); color: var(--ink); }
.btn-burg:hover { color: var(--ivory); background: #32463b; }
.btn-ghost:hover { border-color: var(--forest); color: var(--forest); }

.pin-follow {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 2rem;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--champagne);
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
.pin-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.pin-chip {
  border: 1px solid var(--champagne);
  padding: .38rem .75rem;
  border-radius: 999px;
  font-size: .82rem;
  text-decoration: none;
  color: var(--forest);
  background: var(--ivory);
}
.pin-chip:hover { border-color: var(--gold); color: var(--ink); }

.newsletter {
  background: var(--forest);
  color: var(--ivory);
  padding: 3.2rem 0;
}
.newsletter h2, .newsletter p { color: var(--ivory); }
.newsletter .kicker { color: var(--gold); }
.newsletter form { display: flex; gap: .6rem; flex-wrap: wrap; max-width: 34rem; }
.newsletter input { background: #4a6558; border-color: transparent; color: var(--ivory); flex: 1; min-width: 12rem; }
.newsletter input::placeholder { color: #d7e0d6; }

.site-footer {
  border-top: 1px solid var(--champagne);
  padding: 3rem 0 2rem;
  font-size: .95rem;
  background: #f3ece2;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 2rem; }
.site-footer a { display: block; color: var(--ink); text-decoration: none; margin: .25rem 0; }
.site-footer .brand-lockup { margin-bottom: .8rem; }
.foot-h { letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; color: var(--gold); }
.disclosure { font-size: .88rem; color: var(--muted); }
.muted { color: var(--muted); }
.legal { opacity: .7; font-size: .82rem; }
.social-row { display: flex; gap: .8rem; margin-top: .8rem; }
.social-row a { display: inline; margin: 0; color: var(--forest); letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }

.article { padding: 2.5rem 0 4rem; }
.article .body { font-size: 1.08rem; }
.article .body h2 { margin-top: 2rem; }
.article .body figure, .img-pin-wrap { margin: 1.4rem 0; }
.notice {
  border-left: 3px solid var(--gold);
  background: #fff;
  padding: .9rem 1rem;
  margin: 1rem 0;
}
.toc { border: 1px solid var(--champagne); padding: 1rem 1.2rem; margin: 1.5rem 0; }
.toc a { display: block; color: var(--ink); text-decoration: none; }
.toc .l3 { padding-left: 1rem; font-size: .95rem; }
.share { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.5rem 0; }
.pin-end { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; border: 1px solid var(--champagne); padding: 1rem; background: var(--paper); }
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pager { display: flex; justify-content: space-between; margin: 2rem 0; }
.crumbs { font-size: .88rem; margin-bottom: 1rem; }
.crumbs a { color: var(--ink); }

.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; margin: 1rem 0 1.5rem; }
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { border: 1px solid var(--champagne); padding: .7rem; text-align: left; vertical-align: top; }
.planner-card { padding: 1.2rem; border: 1px solid var(--champagne); background: var(--paper); }
.shop-bar {
  position: sticky; bottom: 0; background: var(--forest); color: var(--ivory);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .8rem 1rem; z-index: 6;
}
.shop-bar a { color: var(--champagne); }
.consent {
  position: fixed; bottom: 0; left: 0; right: 0; background: var(--paper);
  border-top: 1px solid var(--champagne); padding: 1rem; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; z-index: 12;
}
.honeypot { position: absolute; left: -9999px; }
.price { font-family: var(--serif); font-size: 1.25rem; }
.price s { opacity: .55; margin-right: .35rem; }
.form-stack label { display: block; margin: .8rem 0 .25rem; }
.alert { padding: .8rem 1rem; background: #efe7d6; margin: 1rem 0; }
.budget-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.budget-total { font-size: 2rem; font-family: var(--serif); }
.top5 { counter-reset: looks; }
.top5 article { counter-increment: looks; position: relative; margin-bottom: 1rem; }
.top5 article::before {
  content: counter(looks);
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--gold);
  margin-right: .5rem;
}

@media (max-width: 900px) {
  .header-inner { grid-template-columns: 1fr auto; }
  .search-mini { display: none; }
  .nav-toggle { display: inline-block; }
  .site-nav { display: none; grid-column: 1 / -1; }
  .site-nav.open { display: flex; }
  .hero, .card-grid, .related, .footer-grid, .pin-end, .budget-grid, .pin-follow { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .brand-mark { width: 52px; height: 52px; }
  .wordmark { font-size: 1.28rem; }
}