@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --paper:#F5F0E4;
  --paper-deep:#EDE5D2;
  --green:#173A2E;
  --green-soft:#24503F;
  --gold:#B8862E;
  --gold-soft:#D9B166;
  --ink:#241F18;
  --ink-soft:#5A5346;
  --line:#D8CDB2;
  --tape:#E7C674;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans',sans-serif;
  font-size:17px;
  line-height:1.55;
}

h1,h2,h3,.display{
  font-family:'Fraunces',serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--green);
}

a{color:inherit;}

/* header */
header.site{
  background:var(--green);
  color:var(--paper);
  padding:18px 6vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:20;
}
header.site .brand{
  font-family:'Fraunces',serif;
  font-size:1.35rem;
  font-weight:600;
  letter-spacing:0.02em;
}
header.site .brand span{color:var(--gold-soft);}
nav.site-nav{display:flex;gap:22px;flex-wrap:wrap;}
nav.site-nav a{
  font-size:0.88rem;
  text-decoration:none;
  color:#E9E2CE;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .2s;
}
nav.site-nav a:hover{border-color:var(--gold-soft);}

/* hero */
.hero{
  padding:64px 6vw 48px;
  max-width:820px;
}
.hero .eyebrow{
  display:inline-block;
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  border:1px solid var(--gold-soft);
  padding:5px 12px;
  border-radius:20px;
  margin-bottom:18px;
}
.hero h1{font-size:2.5rem;line-height:1.15;margin:0 0 16px;}
.hero p.lead{font-size:1.08rem;color:var(--ink-soft);max-width:640px;}

/* category grid on index */
.category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  padding:0 6vw 72px;
  max-width:1100px;
}
.category-card{
  background:var(--paper-deep);
  border:1px solid var(--line);
  border-radius:4px;
  padding:24px 22px;
  text-decoration:none;
  position:relative;
  transition:transform .18s ease, box-shadow .18s ease;
}
.category-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px -14px rgba(23,58,46,0.35);}
.category-card .tape{
  position:absolute;top:-8px;left:22px;
  width:46px;height:16px;
  background:var(--tape);
  opacity:.85;
  transform:rotate(-3deg);
}
.category-card h3{font-size:1.15rem;margin:6px 0 8px;}
.category-card p{font-size:0.92rem;color:var(--ink-soft);margin:0;}

/* category page */
main.category{padding:0 6vw 80px;max-width:900px;}
.category-header{padding:44px 0 28px;border-bottom:1px solid var(--line);}
.category-header .eyebrow{
  font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);
}
.category-header h1{font-size:2.1rem;margin:10px 0 14px;}
.category-header p{color:var(--ink-soft);max-width:600px;}

.video-slot{
  margin:32px 0;
  background:var(--green);
  color:#EFE9D8;
  border-radius:4px;
  padding:40px 28px;
  text-align:center;
  font-family:'Fraunces',serif;
  font-size:1.05rem;
}
.video-slot small{display:block;margin-top:8px;font-family:'Work Sans',sans-serif;font-size:0.82rem;color:#B9C9BF;}

.disclaimer{
  font-size:0.86rem;
  color:var(--ink-soft);
  background:var(--paper-deep);
  border-left:3px solid var(--gold);
  padding:14px 18px;
  margin:28px 0;
}

.note{
  margin:36px 0 18px;
  font-family:'Fraunces',serif;
  font-size:1.2rem;
  color:var(--green);
}
.note::before{content:"— ";color:var(--gold);}

.products{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
  margin:24px 0 8px;
}
.product-card{
  background:#FFFDF8;
  border:1px solid var(--line);
  border-radius:4px;
  padding:22px 20px;
  position:relative;
}
.product-card .tape{
  position:absolute;top:-8px;right:20px;
  width:40px;height:14px;
  background:var(--tape);
  transform:rotate(4deg);
  opacity:.85;
}
.product-card h4{margin:6px 0 8px;font-size:1.05rem;font-family:'Fraunces',serif;color:var(--ink);}
.product-card p.personal{
  font-size:0.92rem;
  color:var(--ink-soft);
  font-style:italic;
  margin:0 0 16px;
}
.btn-buy{
  display:inline-block;
  background:var(--gold);
  color:#241F18;
  font-weight:600;
  font-size:0.88rem;
  text-decoration:none;
  padding:10px 18px;
  border-radius:3px;
  transition:background .2s;
}
.btn-buy:hover{background:var(--gold-soft);}

footer.site{
  background:var(--green);
  color:#B9C9BF;
  padding:34px 6vw;
  font-size:0.84rem;
  margin-top:60px;
}
footer.site .foot-disclaimer{max-width:700px;margin-bottom:10px;}