/* Saints by Mail, website styles. Echoes the print house style. */
:root{
  --vellum:#EFEBDF; --ink:#22282E; --sepia:#5C4B3A;
  --rubric:#5A3B6E;   /* liturgical violet, headings, prices, rubrics */
  --gold:#9C7A3C;     /* antique gold, the ✠ cross-fleuron and ornament */
  --rule:#C9C1AB; --slip:#F6F3EA; --faint:#DED8C6;
  --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(--gold);}
em{font-style:italic;}
a{color:var(--rubric); 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 .ast{font-size:22px; margin:0 3px;}
.brand-name{font-weight:600; font-size:28px; 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(--rubric); border-color:var(--rubric);}
.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; font-size:66px;}
.hero-title .ast{font-size:.6em; vertical-align:baseline;}
.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:40ch; margin:26px auto 30px;}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.hero-media{margin:40px auto 0; max-width:640px;}
.hero-media img{display:block; width:100%; height:auto; border-radius:6px;
  box-shadow:0 16px 38px rgba(42,36,28,.26);}

/* stamp motif in place of a hero photo until a real mockup exists */
.hero-stamp{margin:44px auto 0; width:230px; height:150px; border:2px solid var(--ink);
  border-radius:4px; background:var(--slip); display:flex; flex-direction:column;
  align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(42,36,28,.20);
  position:relative;}
.hero-stamp::after{content:""; position:absolute; inset:5px; border:1px solid var(--gold); border-radius:3px;}
.hero-stamp .ast{font-family:var(--display); font-size:40px;}
.hero-stamp .st-name{font-family:var(--display); font-weight:600; font-size:20px; color:var(--ink); margin-top:4px;}
.hero-stamp .st-sub{font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--sepia); margin-top:6px;}

/* ---- 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(--rubric); 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:48ch; 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 (three plans) ---- */
.pricing{max-width:1000px; margin:0 auto; padding:40px 28px 54px;}
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px;}
.price-card{background:var(--slip); border:1px solid var(--rule); border-radius:3px; padding:30px 26px;
  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(--rubric); color:var(--vellum); font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; padding:4px 12px; border-radius:2px; white-space:nowrap;}
.price-name{font-family:var(--display); font-weight:600; font-size:25px; margin:0 0 4px;}
.price-amt{font-family:var(--display); font-size:44px; font-weight:600; color:var(--rubric); margin:6px 0;}
.price-blurb{font-size:16px; color:#2c333b; min-height:4.5em; margin:8px 0 20px;}
.price-how{text-align:center; font-size:16px; line-height:1.5; color:#2c333b; max-width:54ch;
  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;}
.price-terms{text-align:center; font-size:15px; line-height:1.5; color:var(--sepia);
  max-width:52ch; margin:8px auto 0; font-style:italic;}

/* 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(--gold);}
.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;}

/* ---- gift note ---- */
.gift-note{background:var(--ink); color:var(--vellum); margin-top:20px;}
.gift-inner{max-width:640px; margin:0 auto; padding:54px 28px; text-align:center;}
.gift-note .ast.big{font-family:var(--display); font-size:34px; color:var(--gold);}
.gift-note h2{font-family:var(--display); font-weight:600; font-size:34px; margin:6px 0 12px;}
.gift-note p{color:#e7e2d4; max-width:44ch; 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;}

/* ---- prose pages (about / terms / privacy) ---- */
.prose-page{max-width:680px; margin:0 auto; padding:48px 28px 20px;}
.prose-page h1{font-family:var(--display); font-weight:600; font-size:44px; line-height:1.04; margin:0 0 6px;}
.prose-page .lede{font-family:var(--display); font-style:italic; font-size:21px; color:var(--sepia); margin:0 0 24px;}
.prose-page h2{font-family:var(--display); font-weight:600; font-size:26px; margin:30px 0 8px;}
.prose-page p, .prose-page li{font-size:18px; line-height:1.6; color:#2c333b;}
.prose-page .tag{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; border:1px solid var(--rule); border-radius:2px; padding:1px 7px; margin-right:6px; color:var(--sepia);}
.prose-page .tag.official{color:var(--rubric); border-color:var(--rubric);}

/* ---- footer ---- */
.site-foot{text-align:center; padding:46px 28px 60px;}
.foot-mark{font-family:var(--display); font-size:26px; color:var(--rubric);}
.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 10px;}
.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:48px;}
  .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;}
}