/* Dr. Tiffany Keenan — preview v0.1.0
   Thesis: a well-set book for the reader's next chapter.
   Tokens: shell ground / ink text / atlantic (her logo blue) / hydrangea tint / daylily (heart, one accent). */
:root{
  --shell:#FAF6F2;
  --shell-deep:#F3ECE5;
  --ink:#22303A;
  --ink-soft:#4E5C66;
  --atlantic:#2A5A78;
  --atlantic-deep:#1E4258;
  --hydrangea:#EDF2F7;
  --crimson:#A93E4C;--crimson-deep:#8E3340;
  --rule:#D8CFC6;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--shell);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--atlantic)}
a:focus-visible,button:focus-visible{outline:2px solid var(--atlantic);outline-offset:3px;border-radius:2px}

/* header */
.top{max-width:1120px;margin:0 auto;padding:1.3rem 1.5rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.wordmark{font-family:var(--serif);font-size:1.28rem;font-weight:600;letter-spacing:.01em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:.5rem}
.wordmark svg{flex:0 0 auto}
.top nav{margin-left:auto;display:flex;gap:1.15rem;align-items:center;flex-wrap:wrap}
.top nav a.btn{padding:.62rem 1.05rem;font-size:.88rem;color:#FDFBF9;border-bottom:none;white-space:nowrap}
.top nav a.btn:hover{color:#FDFBF9}
.top nav a{font-size:.9rem;white-space:nowrap;text-decoration:none;color:var(--ink-soft);padding:.55rem 0;border-bottom:2px solid transparent}
.top nav a:hover{color:var(--ink)}
.top nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--crimson)}
.btn{display:inline-block;background:var(--crimson);color:#FDFBF9;text-decoration:none;font-weight:600;font-size:.95rem;
  padding:.8rem 1.5rem;border-radius:3px;border:1px solid var(--crimson-deep);transition:background .18s ease}
.btn:hover{background:var(--crimson-deep)}
.btn.quiet{background:transparent;color:var(--atlantic);border:1px solid var(--atlantic)}
.btn.quiet:hover{background:var(--hydrangea)}

/* chapter label — the running-head device */
.chapter{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--atlantic);display:flex;align-items:center;gap:.9rem;font-weight:600}
.chapter::after{content:"";height:1px;background:var(--rule);flex:1}

/* hero */
.hero{max-width:1120px;margin:0 auto;padding:3.2rem 1.5rem 4.5rem;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:3.5rem;align-items:center}
h1{font-family:var(--serif);font-weight:450;font-size:clamp(2.5rem,5.6vw,4.1rem);line-height:1.08;letter-spacing:-.01em;text-wrap:balance;margin:1.2rem 0 1.4rem}
h1 em{font-style:italic;font-weight:550;color:var(--atlantic)}
.lede{font-size:1.14rem;color:var(--ink-soft);max-width:34em}
.hero-actions{display:flex;gap:.9rem;margin-top:2rem;flex-wrap:wrap}
.portrait{position:relative}
.portrait img{width:100%;height:560px;object-fit:cover;object-position:42% 22%;outline:1px solid var(--rule);outline-offset:12px}
.portrait figcaption{margin-top:2.1rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:600}
.portrait figcaption span{display:block;color:var(--ink-soft);font-weight:400;letter-spacing:.1em;margin-top:.25rem}

/* staged hero reveal — the one orchestrated moment */
.rise{opacity:0;transform:translateY(14px);animation:rise .7s ease forwards}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.18s}.rise.d3{animation-delay:.3s}.rise.d4{animation-delay:.44s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rise{opacity:1;transform:none}}

/* sections */
.band{border-top:1px solid var(--rule)}
.band.tint{background:var(--hydrangea);border-top:none}
.band.deep{background:var(--shell-deep);border-top:none}
.inner{max-width:1080px;margin:0 auto;padding:4rem 1.5rem}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.15;letter-spacing:-.005em;text-wrap:balance;margin:1.1rem 0 1rem}
h3{font-family:var(--serif);font-weight:550;font-size:1.28rem;margin:0 0 .45rem}
.prose{max-width:64ch}
.prose p+p{margin-top:1em}
.muted{color:var(--ink-soft)}

/* the pathway — numbered because it is her real order of engagement */
.path{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule);background:var(--shell)}
.path a{display:block;padding:1.9rem 1.7rem 2.1rem;text-decoration:none;color:var(--ink);border-left:1px solid var(--rule);transition:background .18s ease}
.path a:first-child{border-left:none}
.path a:hover{background:var(--hydrangea)}
.path .n{font-family:var(--serif);font-style:italic;font-size:2.1rem;color:var(--crimson);line-height:1}
.path h3{margin-top:.9rem}
.path p{font-size:.95rem;color:var(--ink-soft);margin-top:.4rem}
.path .go{display:inline-block;margin-top:1.1rem;font-size:.9rem;font-weight:600;color:var(--atlantic)}
.path a:hover .go{text-decoration:underline;text-underline-offset:3px}

/* definition rows (details on offer pages) */
.rows{border-top:1px solid var(--rule);max-width:760px}
.row{display:grid;grid-template-columns:200px 1fr;gap:1.5rem;padding:1.35rem 0;border-bottom:1px solid var(--rule)}
.row dt{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--atlantic);font-weight:600;padding-top:.2rem}
.row dd{color:var(--ink)}
.price{font-family:var(--serif);font-size:2.4rem;font-weight:500}
.price small{font-family:var(--sans);font-size:1rem;color:var(--ink-soft);font-weight:400}

/* bio set piece */
.callwords{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3vw,2.1rem);color:var(--atlantic);line-height:1.35}
.creds{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:.6rem}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3.5rem;align-items:start}

/* footer */
footer{border-top:1px solid var(--rule);background:var(--shell-deep)}
footer .inner{padding:2.6rem 1.5rem;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;font-size:.88rem;color:var(--ink-soft)}
footer a{color:var(--ink-soft)}
.fineprint{max-width:52ch}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;padding-top:1.6rem;gap:1.9rem}
  .portrait{max-width:none;order:-1}
  .portrait img{height:310px;object-position:42% 18%;outline-offset:8px}
  .portrait figcaption{margin-top:1.2rem;font-size:.72rem}
  .path{grid-template-columns:1fr}
  .path a{border-left:none;border-top:1px solid var(--rule)}
  .path a:first-child{border-top:none}
  .split{grid-template-columns:1fr;gap:2rem}
  .row{grid-template-columns:1fr;gap:.3rem}
}

/* social row */
.social{display:flex;gap:1rem;margin-top:.8rem}
.social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--rule);border-radius:50%;color:var(--atlantic)}
.social a:hover{background:var(--hydrangea)}
.note{border:1px solid var(--rule);background:var(--shell);padding:1.1rem 1.3rem;font-size:.92rem;color:var(--ink-soft);max-width:64ch}

/* header CTA + mobile header */
.top-cta{margin-left:auto;order:3}
.top nav{margin-left:0;order:2}
@media (max-width:860px){
  .top{display:grid;grid-template-columns:1fr auto;row-gap:.55rem;padding-bottom:.9rem}
  .wordmark{grid-row:1}
  .top-cta{grid-row:1;grid-column:2;margin-left:0;padding:.55rem .9rem;font-size:.85rem}
  .top nav{grid-row:2;grid-column:1 / -1;flex-wrap:nowrap;overflow-x:auto;gap:1.25rem;scrollbar-width:none}
  .top nav::-webkit-scrollbar{display:none}
  h1{font-size:clamp(2.1rem,8.5vw,2.6rem)}
}

/* wide photo band */
.photo-band{max-width:1120px;margin:0 auto;padding:0 1.5rem}
.photo-band img{width:100%;height:min(52vw,430px);object-fit:cover;outline:1px solid var(--rule);outline-offset:12px}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:2.2rem}
.quotes blockquote{margin:0;border-top:2px solid var(--crimson);padding-top:1.3rem}
.quotes blockquote p{font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.55}
.quotes cite{display:block;font-style:normal;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:1rem;font-weight:600}
@media (max-width:820px){.quotes{grid-template-columns:1fr;gap:1.8rem}}

/* internal preview flag — deliberately not part of the site's design language */
.review-flag{border:2px dashed var(--crimson);background:#FDF1F0;color:#6E2530;padding:1rem 1.2rem;font-size:.88rem;line-height:1.55;margin-top:2.2rem}
.review-flag strong{letter-spacing:.08em}

/* forms */
.form-wrap{max-width:560px}
.cform .field{margin-bottom:1.15rem;display:flex;flex-direction:column;gap:.35rem}
.cform label{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--atlantic)}
.cform input,.cform textarea{font:inherit;color:var(--ink);background:#FFFDFB;border:1px solid var(--rule);border-radius:3px;padding:.7rem .8rem}
.cform input:focus-visible,.cform textarea:focus-visible{outline:2px solid var(--atlantic);outline-offset:1px;border-color:var(--atlantic)}
.cform .helper{font-size:.8rem;color:var(--ink-soft);margin-top:.25rem}
.hp{position:absolute;left:-9999px;top:auto}
.form-error{color:#8E2F1F;background:#FAEDE8;border:1px solid #E3C4BA;padding:.7rem .9rem;font-size:.9rem;margin:0 0 1rem}
.form-ok{border:1px solid var(--rule);background:var(--hydrangea);padding:1.2rem 1.4rem;line-height:1.6}
.form-ok strong{display:block;font-family:var(--serif);font-size:1.15rem;margin-bottom:.3rem}