/* George Winborn, Astrologer — design tokens lifted from the Squarespace site,
   with the Squarespace-licensed Typekit faces replaced by Google Fonts. */
:root{
  --blush:        hsl(8.28, 67.44%, 91.57%);  /* page background  rgb(248,223,219) */
  --red:          hsl(1.61, 97.39%, 54.9%);   /* accent / buttons rgb(252,34,28)   */
  --red-dark:     hsl(1.61, 72%, 44%);
  --ink:          hsl(6.12, 62.03%, 15.49%);  /* darkAccent                        */
  --rule:         hsl(8.28, 40%, 80%);
  --black:        #000;
  --white:        #fff;

  --font-head: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --font-body: "EB Garamond", Garamond, "Times New Roman", serif;

  --measure: 46rem;     /* text column        */
  --wide:    74rem;     /* image / page frame */
  --gap:     clamp(3.5rem, 9vw, 8rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--blush);
  color:var(--black);
  font-family:var(--font-body);
  font-size:clamp(1.2rem,1.65vw,1.48rem);
  line-height:1.6;
  font-synthesis-weight:none;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ---------- header ---------- */
.site-header{
  max-width:var(--wide);margin:0 auto;
  padding:2rem clamp(1.25rem,4vw,2.5rem);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;
  align-items:baseline;justify-content:space-between;
}
.site-title{
  font-family:var(--font-head);
  font-size:clamp(1.3rem,2.1vw,1.75rem);
  color:var(--red);text-decoration:none;letter-spacing:.01em;
}
/* the name and its tagline stack as one lockup; only the name links home */
.site-brand{display:flex;flex-direction:column;gap:.2em}
.site-tagline{
  margin:0;font-family:var(--font-body);
  font-size:clamp(.8rem,1.1vw,.95rem);
  letter-spacing:.02em;color:var(--ink);opacity:.75;
}
.site-nav{display:flex;flex-wrap:wrap;gap:clamp(.9rem,2.5vw,2rem);font-family:var(--font-head);font-size:1.05rem}
.site-nav a{color:var(--red);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
.site-nav a:hover,.site-nav a[aria-current=page]{border-bottom-color:currentColor}

/* ---------- sections ---------- */
main{max-width:var(--wide);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
.section{padding-block:var(--gap)}
.section:first-child{padding-top:clamp(1.5rem,4vw,3rem)}
.section + .section{padding-top:0}
.prose{max-width:var(--measure);margin-inline:auto;text-align:center}
.prose p{margin:0 0 1.6em}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--red)}

h1,h2,h3{font-family:var(--font-head);font-weight:400;line-height:1.15;margin:0 0 .6em}
h1{font-size:clamp(2.2rem,5vw,3.4rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.lede{font-size:1.06em}

figure{margin:var(--gap) 0 0}
figure img{width:100%;border-radius:2px}
figure.portrait img{max-width:34rem;margin-inline:auto}
figcaption{margin-top:.75rem;text-align:center;font-size:.8em;opacity:.7}

/* ---------- buttons ---------- */
.cta{text-align:center;padding-block:clamp(1rem,3vw,2rem)}
/* two buttons side by side, stacking at narrow widths */
.cta-pair{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
a.btn{
  display:inline-block;
  background:var(--red);color:var(--white);
  font-family:var(--font-head);font-size:1.05rem;letter-spacing:.04em;
  text-decoration:none;
  padding:.85em 2em;border-radius:6.4px;
  transition:background .18s ease, transform .18s ease;
}
a.btn:hover{background:var(--red-dark);transform:translateY(-1px)}
.btn-row{
  margin-top:2.5rem;
  display:flex;flex-wrap:wrap;gap:1.25rem 2rem;
  align-items:center;justify-content:center;
}
a.btn-quiet{
  font-family:var(--font-head);font-size:1.05rem;letter-spacing:.04em;
  color:var(--red);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px;
}
a.btn-quiet:hover{color:var(--red-dark)}
.prose + .cta{padding-top:clamp(2rem,4vw,3rem)}

/* ---------- bulleted lists ---------- */
.bullets{
  max-width:var(--measure);margin:0 auto;
  padding-left:1.2em;text-align:left;
  list-style:none;
}
.bullets li{position:relative;margin-bottom:1.1em}
.bullets li:last-child{margin-bottom:0}
.bullets li::before{
  content:"\2022";position:absolute;left:-1.1em;
  color:var(--red);
}
.bullets strong{font-weight:500}
/* a qualifying line after a list needs the same air as a paragraph gap */
.bullets + p{margin-top:1.6em}

/* ---------- testimonials ---------- */
.quotes{display:grid;gap:clamp(2rem,4vw,3.5rem);max-width:var(--measure);margin:var(--gap) auto 0}
.quotes-tight{margin-top:clamp(2rem,5vw,3.5rem)}
blockquote{margin:0;text-align:center}
blockquote p{margin:0 0 1em;font-style:italic}
blockquote cite{font-style:normal;font-family:var(--font-head);font-size:.9em;opacity:.75}

/* ---------- FAQ accordion ---------- */
.faq{max-width:var(--measure);margin:clamp(2rem,5vw,3.5rem) auto 0;text-align:left}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;
  font-family:var(--font-head);font-size:1.18em;
  padding:1.1em 2.5em 1.1em 0;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:.25em;top:50%;transform:translateY(-50%);
  color:var(--red);font-size:1.2em;line-height:1;
}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--red)}
.faq .answer{margin:0 0 1.6em;padding-right:2.5em}

/* ---------- services ---------- */
.service{
  max-width:var(--measure);margin:0 auto;
  padding-block:clamp(2.25rem,4.5vw,3.25rem);
  border-top:1px solid var(--rule);
  text-align:center;
}
.service:first-of-type{border-top:0;padding-top:0}
.service h3{margin-bottom:.35em}
.service .meta{
  font-style:italic;opacity:.75;font-size:.92em;
  margin:0 0 1.4em;
}
.service p{margin:0 0 1.4em}
.service .bullets{margin-bottom:1.4em}
.service .cta{padding-block:0;margin-top:1.8rem}
.service :last-child{margin-bottom:0}

/* ---------- contact ---------- */
.contact-grid{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(3,1fr);
  align-items:start;
  margin-top:clamp(1.5rem,3vw,2.5rem);
}
.box{
  background:var(--white);
  border-radius:6.4px;
  padding:clamp(1.25rem,2vw,1.75rem);
  text-align:center;
}
.box h2{font-size:clamp(1.35rem,1.9vw,1.6rem);margin-bottom:.5em}
.box p{margin:0 0 1em}
.box :last-child{margin-bottom:0}
.box .price{font-family:var(--font-head);color:var(--red);font-size:1.1em}
.box .cta{padding-block:0;margin-top:1.25rem}
.box .btn{font-size:1rem;padding:.75em 1.5em}

.field{text-align:left;margin-bottom:.85rem}
.field label{display:block;font-family:var(--font-head);font-size:.95em;margin-bottom:.2em}
.field input,.field textarea{
  width:100%;
  font-family:var(--font-body);font-size:.95rem;
  color:var(--black);background:var(--blush);
  border:1px solid var(--rule);border-radius:4px;
  padding:.5em .65em;
}
.field input:focus,.field textarea:focus{outline:2px solid var(--red);outline-offset:1px}
.field textarea{resize:vertical;min-height:3.5em}
.field .help{display:block;font-size:.8em;font-style:italic;opacity:.7;margin-top:.3em}
.contact-form button{
  font-family:var(--font-head);font-size:1rem;letter-spacing:.04em;
  background:var(--red);color:var(--white);border:0;
  padding:.75em 1.5em;border-radius:6.4px;cursor:pointer;
  transition:background .18s ease;
}
.contact-form button:hover{background:var(--red-dark)}

.contact-details{text-align:center;margin-top:0;line-height:1.9;font-size:.95em}
.contact-details a{color:var(--red);text-decoration:none;border-bottom:1px solid currentColor}

/* Contact fits one screen: tighter type and spacing, no big section gaps. */
body.page-contact{font-size:clamp(1rem,1.1vw,1.12rem)}
.page-contact main{padding-bottom:0}
.page-contact .site-header{padding-block:1.25rem 0}
/* the tagline costs the contact page vertical room it does not have */
.page-contact .site-brand{gap:.05em}
.page-contact .site-tagline{font-size:.8rem}
.page-contact .section{padding-block:clamp(.5rem,1.1vw,.85rem)}
.page-contact .site-footer{padding-block:.35rem .45rem;font-size:.78rem}
.page-contact h1{font-size:clamp(1.9rem,3.2vw,2.4rem);margin-bottom:.3em}
.page-contact .prose p{margin-bottom:0}
.page-contact .box h2{font-size:clamp(1.2rem,1.6vw,1.35rem)}
.page-contact .box{padding:clamp(.85rem,1.3vw,1.15rem)}
.page-contact .field{margin-bottom:.5rem}
.page-contact .closing{margin:clamp(.6rem,1.2vw,1rem) auto 0;text-align:center;max-width:var(--measure)}

/* ---------- footer ---------- */
.site-footer{
  max-width:var(--wide);margin:0 auto;
  padding:var(--gap) clamp(1.25rem,4vw,2.5rem) 3rem;
  text-align:center;font-size:.85rem;opacity:.65;
}

/* ---------- mobile ---------- */
@media (max-width:52rem){
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:34rem){
  .site-header{padding-block:1.5rem 1rem;gap:.6rem}
  .site-nav{font-size:1rem}
  .btn{padding:.85em 1.6em}
  .btn-row{gap:1rem 1.25rem}
  .faq summary{padding-right:2em}
  .faq .answer{padding-right:0}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- contact form state ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:.75rem 0 0;font-size:.88em;min-height:1.2em}
.form-status.good{color:var(--ink)}
.form-status.bad{color:var(--red)}