/* The Monthly Lemma — website styles. Echoes the print house style. */
:root{
  --vellum:#EAE6D9; --ink:#21272E; --sepia:#5C4B3A; --madder:#8C2F23;
  --rule:#C7BFA9; --slip:#F5F2E9; --faint:#DBD5C3;
  --display:"Cormorant Garamond", Georgia, serif;
  --body:"EB Garamond", Georgia, serif;
  --mono:"Courier Prime", "Courier New", monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--vellum); color:var(--ink);
  font-family:var(--body); font-size:19px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.ast{color:var(--madder);}
em{font-style:italic;}
a{color:var(--madder); text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---- header ---- */
.site-head{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1080px; margin:0 auto; padding:22px 28px;
}
.brand{font-family:var(--display); color:var(--ink); text-decoration:none; line-height:1;}
.brand-the{font-style:italic; font-size:18px; color:var(--sepia);}
.brand .ast{font-size:20px; margin:0 2px;}
.brand-name{font-weight:600; font-size:30px; letter-spacing:.01em;}
.site-nav a{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sepia); margin-left:22px;}

/* ---- buttons ---- */
.btn{display:inline-block; font-family:var(--mono); font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; padding:13px 24px; border:1px solid var(--ink); border-radius:2px;
  transition:.15s;}
.btn:hover{text-decoration:none;}
.btn-solid{background:var(--ink); color:var(--vellum);}
.btn-solid:hover{background:var(--madder); border-color:var(--madder);}
.btn-line{background:transparent; color:var(--ink);}
.btn-line:hover{background:var(--ink); color:var(--vellum);}
.btn-disabled{opacity:.45; pointer-events:none;}

/* ---- hero ---- */
.hero{max-width:760px; margin:0 auto; padding:54px 28px 40px; text-align:center;}
.kicker{font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--sepia); margin:0 0 18px;}
.hero-title{font-family:var(--display); font-weight:600; margin:0; line-height:.98;}
.hero-the{font-style:italic; font-weight:500; font-size:.5em; color:var(--sepia); vertical-align:baseline;}
.hero-title .ast{font-size:.55em;}
.hero-title{font-size:74px;}
.hero-tag{font-family:var(--display); font-style:italic; font-size:21px; color:var(--sepia); margin:10px 0 0;}
.hero-lede{font-size:20px; line-height:1.55; max-width:38ch; margin:26px auto 30px;}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ---- what ---- */
.what{max-width:1000px; margin:24px auto; padding:30px 28px; border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);}
.what-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px;}
.what-mark{font-family:var(--display); font-size:24px; color:var(--madder); line-height:1;}
.what-cell h3{font-family:var(--display); font-weight:600; font-size:23px; margin:8px 0 6px;}
.what-cell p{font-size:17px; line-height:1.5; margin:0; color:#2c333b;}

/* ---- section furniture ---- */
.section-title{font-family:var(--display); font-weight:600; font-size:40px; text-align:center; margin:0;}
.section-lede{text-align:center; max-width:46ch; margin:12px auto 28px; color:#2c333b; font-size:18px;}

/* ---- sample ---- */
.sample{max-width:1080px; margin:0 auto; padding:54px 28px;}
.sample-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.sample-page img{width:100%; height:auto; display:block; border:1px solid var(--rule);
  box-shadow:2px 4px 12px rgba(33,39,46,.14); background:#fff; transition:.15s;}
.sample-page:hover img{transform:translateY(-3px); box-shadow:3px 7px 18px rgba(33,39,46,.22);}
.sample-cta{text-align:center; margin-top:30px;}

/* ---- pricing ---- */
.pricing{max-width:880px; margin:0 auto; padding:40px 28px 54px;}
.price-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:8px;}
.price-card{background:var(--slip); border:1px solid var(--rule); border-radius:3px; padding:30px 28px;
  text-align:center; position:relative;}
.price-feature{border:1.5px solid var(--ink);}
.price-flag{position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--madder); color:var(--vellum); font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; padding:4px 12px; border-radius:2px;}
.price-name{font-family:var(--display); font-weight:600; font-size:26px; margin:0 0 4px;}
.price-amt{font-family:var(--display); font-size:46px; font-weight:600; color:var(--madder); margin:6px 0;}
.price-blurb{font-size:16px; color:#2c333b; min-height:3em; margin:8px 0 20px;}
.price-how{text-align:center; font-size:16px; line-height:1.5; color:#2c333b; max-width:52ch;
  margin:24px auto 0;}
.price-fine{text-align:center; font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  color:var(--sepia); margin-top:10px;}

/* thank-you page */
.thanks{max-width:620px; margin:0 auto; padding:70px 28px 60px; text-align:center;}
.thanks .ast.big{font-family:var(--display); font-size:38px; color:var(--madder);}
.thanks-lede{font-size:20px; line-height:1.55; max-width:44ch; margin:14px auto 20px;}
.thanks-note{font-size:16px; color:var(--sepia); margin:0 auto 28px; max-width:44ch;}
.price-terms{text-align:center; font-size:15px; line-height:1.5; color:var(--sepia);
  max-width:48ch; margin:8px auto 0; font-style:italic;}

/* ---- gift note ---- */
.gift-note{background:var(--ink); color:var(--vellum); margin-top:20px;}
.gift-inner{max-width:620px; margin:0 auto; padding:54px 28px; text-align:center;}
.gift-note .ast.big{font-family:var(--display); font-size:34px; color:var(--madder);}
.gift-note h2{font-family:var(--display); font-weight:600; font-size:34px; margin:6px 0 12px;}
.gift-note p{color:#e7e2d4; max-width:42ch; margin:0 auto 24px;}
.gift-note .btn-line{color:var(--vellum); border-color:var(--vellum);}
.gift-note .btn-line:hover{background:var(--vellum); color:var(--ink);}

/* ---- faq ---- */
.faq{max-width:760px; margin:0 auto; padding:54px 28px 20px;}
.faq-list{margin-top:24px;}
.faq-item{padding:20px 0; border-top:1px solid var(--rule);}
.faq-item:last-child{border-bottom:1px solid var(--rule);}
.faq-item h3{font-family:var(--display); font-weight:600; font-size:23px; margin:0 0 6px; color:var(--ink);}
.faq-item p{font-size:17.5px; line-height:1.55; margin:0; color:#2c333b;}

/* ---- final cta ---- */
.final-cta{text-align:center; padding:46px 28px 10px;}
.final-line{font-family:var(--display); font-style:italic; font-size:24px; color:var(--sepia); margin:0 0 20px;}

/* ---- articles index ---- */
.articles{max-width:760px; margin:0 auto; padding:54px 28px;}
.art-list{margin-top:30px;}
.art-card{display:block; padding:24px 0; border-top:1px solid var(--rule); color:var(--ink);}
.art-card:last-of-type{border-bottom:1px solid var(--rule);}
.art-card:hover{text-decoration:none;}
.art-card h2{font-family:var(--display); font-weight:600; font-size:28px; margin:0 0 6px; color:var(--ink);}
.art-card:hover h2{color:var(--madder);}
.art-card p{font-size:17px; line-height:1.5; margin:0 0 8px; color:#2c333b;}
.art-more{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--madder);}
.articles-cta{text-align:center; padding-top:36px;}

/* ---- single article ---- */
.article{max-width:680px; margin:0 auto; padding:48px 28px 20px;}
.art-kicker{font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sepia); margin:0 0 12px;}
.art-kicker a{color:var(--sepia);}
.art-title{font-family:var(--display); font-weight:600; font-size:48px; line-height:1.04; margin:0;}
.art-standfirst{font-family:var(--display); font-style:italic; font-size:22px; line-height:1.4;
  color:var(--sepia); margin:14px 0 0;}
.art-body{font-size:20px; line-height:1.62; margin-top:26px;}
.art-body h2{font-family:var(--display); font-weight:600; font-size:27px; margin:34px 0 8px;}
.art-body p{margin:0 0 18px;}
.art-body em{font-style:italic;}
.art-body hr{border:none; border-top:1px solid var(--rule); margin:30px 0;}
.art-body > p:last-child{font-size:17px; color:var(--sepia);}

.art-cta{background:var(--slip); border:1px solid var(--rule); border-radius:3px; text-align:center;
  padding:34px 28px; margin:44px 0 10px;}
.art-cta .ast.big{font-family:var(--display); font-size:30px; color:var(--madder);}
.art-cta h2{font-family:var(--display); font-weight:600; font-size:28px; margin:4px 0 10px;}
.art-cta p{font-size:18px; max-width:44ch; margin:0 auto 22px; color:#2c333b;}
.art-cta-btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.art-back{text-align:center; padding:18px 0 10px;}
.art-back a{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--sepia);}

@media (max-width:480px){
  .art-title{font-size:34px;}
  .art-body{font-size:18px;}
}

/* ---- footer ---- */
.site-foot{text-align:center; padding:46px 28px 60px;}
.foot-mark{font-family:var(--display); font-size:26px; color:var(--madder);}
.foot-line{font-family:var(--display); font-weight:600; font-size:24px; color:var(--ink); margin:6px 0 12px;}
.foot-nav{margin:0 0 14px;}
.foot-nav a{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sepia); margin:0 12px;}
.foot-fine{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--sepia);}

/* ---- responsive ---- */
@media (max-width:820px){
  .hero-title{font-size:52px;}
  .what-grid{grid-template-columns:1fr; gap:26px;}
  .sample-grid{grid-template-columns:repeat(2,1fr);}
  .price-grid{grid-template-columns:1fr;}
  .section-title{font-size:32px;}
}
@media (max-width:480px){
  body{font-size:18px;}
  .site-nav{display:none;}
  .sample-grid{grid-template-columns:1fr 1fr;}
}