:root {
  --navy: #07346d;
  --blue: #145da0;
  --red: #d71920;
  --yellow: #f4c430;
  --white: #ffffff;
  --ink: #18324a;
  --soft-blue: #eef6fc;
  --line: #dbe7f1;
  --shadow: 0 8px 24px rgba(7, 52, 109, .10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.55;
}
a { color: inherit; }
.site-header {
  background: var(--navy);
  color: var(--white);
  border-bottom: 4px solid var(--red);
}
.nav-wrap {
  max-width: 1500px;
  margin: 0 auto;
  min-height: 82px;
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.brand { text-decoration: none; display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-size: clamp(1.55rem, 2.5vw, 2.35rem); font-style: italic; }
.brand-tag { font: .7rem/1.3 Arial, sans-serif; letter-spacing: .22em; margin-top: 5px; }
.main-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 26px; }
.main-nav a { text-decoration: none; font-size: 1.06rem; padding: 8px 2px 5px; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav a:focus, .main-nav a.active { border-bottom-color: var(--yellow); }
.hero { width: 100%; background: var(--white); }
.hero img { display: block; width: 100%; height: auto; }
.section { max-width: 1320px; margin: 0 auto; padding: 58px 30px; }
.welcome { text-align: center; }
.eyebrow { color: var(--red); font: 700 1rem/1.2 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; }
h1, .section-heading h2 { color: var(--navy); }
h1 { font-size: clamp(2.2rem, 4vw, 4rem); margin: 0 0 25px; font-style: italic; font-weight: 500; }
.welcome-copy { max-width: 920px; margin: 0 auto; font-size: 1.22rem; }
.welcome-copy p { margin: 0 0 12px; }
.signature { color: var(--red); font-size: 1.45rem; font-style: italic; margin: 25px 0 0; }
.signature strong { font-size: 1.7rem; }
.pathways { padding-top: 20px; }
.pathway-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.pathway-image {
  display: block;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pathway-image img {
  display: block;
  width: 100%;
  height: auto;
}
.pathway-image:hover,
.pathway-image:focus {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(7, 52, 109, .18);
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}
.featured { padding-top: 38px; }
.section-heading { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 10px; }
.section-heading span { width: 80px; height: 3px; background: var(--yellow); }
.section-heading h2 { margin: 0; font-size: clamp(2rem, 3.5vw, 3.2rem); font-style: italic; font-weight: 500; }
.book-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; align-items: start; }
.book { text-decoration: none; text-align: center; }
.book-cover {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: 4px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.book:hover .book-cover, .book:focus .book-cover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(7, 52, 109, .18);
}
.book h3 { margin: 12px 3px 0; color: var(--navy); font-size: 1rem; line-height: 1.25; font-weight: 500; }
.book:hover h3, .book:focus h3 { color: var(--red); }
.closing { padding-top: 30px; }
.closing-box { max-width: 900px; margin: 0 auto; text-align: center; border-top: 3px solid var(--yellow); border-bottom: 3px solid var(--yellow); padding: 30px 20px; font-size: 1.14rem; }
.closing-line { color: var(--red); font-style: italic; font-size: 1.35rem; margin-bottom: 0; }
.site-footer { background: var(--navy); color: var(--white); border-top: 5px solid var(--yellow); }
.footer-inner { max-width: 1320px; margin: 0 auto; padding: 34px 30px; text-align: center; }
.footer-main-nav {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.28);
  font-size: 1.05rem;
}
.footer-main-nav a { font-weight: 600; }

.site-footer p { margin: 5px 0 12px; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 22px; }
.site-footer a { color: var(--white); text-decoration: none; border-bottom: 1px solid transparent; }
.site-footer a:hover, .site-footer a:focus { border-bottom-color: var(--yellow); }
.footer-tagline { margin-top: 22px !important; font-style: italic; }
.footer-tagline span { color: var(--red); }
.copyright { opacity: .75; font: .78rem/1.4 Arial, sans-serif; margin-top: 20px !important; }
@media (max-width: 1050px) {
  .nav-wrap { flex-direction: column; gap: 8px; }
  .main-nav { justify-content: center; }
  .pathway-grid { grid-template-columns: repeat(2, 1fr); }
  .book-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .nav-wrap { padding: 14px 16px; }
  .brand { align-items: center; }
  .main-nav { gap: 3px 15px; }
  .main-nav a { font-size: .95rem; }
  .section { padding: 42px 20px; }
  .welcome-copy { font-size: 1.08rem; }
  .pathway-grid { grid-template-columns: 1fr; }
  .book-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .section-heading span { width: 35px; }
}

/* Main navigation directly below the website header image */
.top-page-nav {
  background: var(--navy);
  border-top: 4px solid var(--red);
  border-bottom: 4px solid var(--red);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 32px;
  padding: 15px 24px;
}
.top-page-nav a {
  color: var(--white);
  text-decoration: none;
  font-size: 1.08rem;
  font-weight: 600;
  padding: 6px 2px 4px;
  border-bottom: 2px solid transparent;
}
.top-page-nav a:hover,
.top-page-nav a:focus,
.top-page-nav a.active {
  border-bottom-color: var(--yellow);
}
@media (max-width: 600px) {
  .top-page-nav { gap: 6px 18px; padding: 12px 16px; }
  .top-page-nav a { font-size: .98rem; }
}


/* =========================================================
   MEET THE AUTHOR PAGE
   ========================================================= */
.page-nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;
  background:var(--navy);border-top:4px solid var(--red);
  border-bottom:4px solid var(--red);padding:15px 24px;font-weight:600
}
.page-nav a{color:#fff;text-decoration:none;padding:7px 2px 4px;border-bottom:2px solid transparent}
.page-nav a:hover,.page-nav a:focus,.page-nav a.active{border-bottom-color:var(--yellow)}

.author{text-align:center}
.author-copy{max-width:900px;margin:auto;font-size:1.17rem;text-align:left}
.author-copy p{margin:0 0 18px}
.pour{margin:32px auto;text-align:center;color:var(--navy);font-size:1.45rem;font-style:italic;border-top:3px solid var(--yellow);border-bottom:3px solid var(--yellow);padding:20px}
.pour strong{display:block;color:var(--red);font-size:2.2rem;margin-top:2px}
.closing-quote{text-align:center!important;color:var(--navy);font-size:1.28rem;font-style:italic;margin-top:32px!important}

.library{padding-top:30px}
.library .intro{text-align:center;max-width:760px;margin:12px auto 40px;font-size:1.12rem}
.cover-strip{
  display:grid;
  grid-template-columns:repeat(3,160px);
  justify-content:center;
  gap:24px;
  margin:35px auto 28px;
  padding:22px;
  background:var(--soft);
  border-top:4px solid var(--yellow);
  border-bottom:4px solid var(--yellow)
}
.cover-strip img{
  display:block;
  width:160px;
  height:240px;
  object-fit:cover;
  background:#fff;
  box-shadow:var(--shadow);
  border-radius:4px
}
.title-group{max-width:880px;margin:28px auto;text-align:center}
.title-group h3{color:var(--red);font-size:1.65rem;margin:0 0 8px}
.title-group p{margin:0;font-size:1.08rem;line-height:1.7}
.title-columns{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:25px;align-items:start}
.title-columns .title-group{margin:10px 0}
.library-note{text-align:center;margin:45px auto 0;padding:24px;border-top:2px solid var(--yellow);font-size:1.12rem}
.library-note a{color:var(--red);font-weight:bold;text-decoration:none}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-section{padding:58px 20px 68px;background:#fff}
.contact-card{
  width:min(760px,100%);margin:0 auto;padding:42px 48px 46px;background:#fff;
  border:1px solid #d9e2ee;border-top:6px solid var(--red);border-radius:10px;
  box-shadow:0 8px 24px rgba(16,47,99,.12)
}
.contact-card .eyebrow{text-align:center}
.contact-card h1{
  margin:0;color:var(--navy);font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2rem,5vw,3rem);line-height:1.15;text-align:center
}
.heart-divider{display:flex;align-items:center;gap:12px;margin:19px auto 24px;color:var(--red)}
.heart-divider:before,.heart-divider:after{content:"";height:2px;flex:1;background:var(--yellow)}
.heart-divider span{font-size:1.1rem}
.contact-intro{max-width:650px;margin:0 auto 18px;font-size:1.08rem;text-align:center}
.author-line{margin:0 0 32px;color:var(--navy);text-align:center}
.contact-form{position:relative;padding-top:6px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-field{margin-bottom:20px}
.contact-form label{display:block;margin-bottom:7px;color:var(--navy);font-weight:700}
.contact-form input,.contact-form textarea{
  width:100%;padding:12px 14px;color:var(--ink);background:#fff;
  border:1px solid #aebed0;border-radius:6px;font:inherit
}
.contact-form textarea{resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{
  outline:3px solid rgba(244,197,66,.45);border-color:#1c5fa8
}
.website-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.send-button{
  display:block;min-width:190px;margin:7px auto 0;padding:13px 24px;color:#fff;
  background:var(--red);border:0;border-radius:999px;font:inherit;font-weight:800;
  cursor:pointer;text-align:center;text-decoration:none
}
.send-button:hover,.send-button:focus{background:var(--navy)}
.thank-you{margin:28px auto 0;color:var(--navy);font-family:Georgia,"Times New Roman",serif;font-style:italic;text-align:center}

/* Contact page uses .site-nav rather than .main-nav/.top-page-nav */
.site-nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;
  padding:15px 20px;background:#fff;border-bottom:1px solid #d9e2ee
}
.site-nav a{color:var(--navy);font-weight:700;text-decoration:none}
.site-nav a:hover,.site-nav a:focus,.site-nav a[aria-current="page"]{color:var(--red)}
.below-header-nav{border-top:1px solid #d9e2ee;border-bottom:3px solid var(--yellow)}
.site-footer .site-nav{background:transparent;border:0}
.site-footer .site-nav a{color:#fff}

@media(max-width:900px){
  .title-columns{grid-template-columns:1fr}
  .title-columns .title-group{margin:18px auto}
}
@media(max-width:650px){
  .cover-strip{grid-template-columns:repeat(3,minmax(0,110px));gap:10px;padding:16px}
  .cover-strip img{width:100%;height:auto;aspect-ratio:2/3}
  .title-group p{font-size:1rem}
  .page-nav{gap:6px 18px;padding:12px 16px}
  .contact-section{padding:35px 14px 45px}
  .contact-card{padding:30px 20px 34px}
  .form-row{grid-template-columns:1fr;gap:0}
  .site-nav{gap:6px 16px}
}


/* =========================================================
   BOOK LIBRARY PAGE
   ========================================================= */
.book-library-intro{
  text-align:center;
  padding-bottom:12px;
}
.book-library-intro h1{
  margin:6px 0 12px;
  color:var(--navy);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.2rem,5vw,3.5rem);
}
.book-library-intro p:last-child{
  max-width:760px;
  margin:0 auto;
  font-size:1.1rem;
}
body > main{
  width:min(1180px,92%);
  margin:0 auto;
  padding:10px 0 64px;
}
body > main > section{
  padding-top:42px;
  scroll-margin-top:20px;
}
body > main > section > h2{
  margin:0 0 22px;
  padding-bottom:10px;
  color:var(--navy);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.65rem,4vw,2.25rem);
  border-bottom:3px solid var(--yellow);
}
.books{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:28px;
}
.books .book{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #d9e2ee;
  border-radius:12px;
  background:#fff;
  box-shadow:var(--shadow);
}
.books .cover{
  position:relative;
  display:grid;
  place-items:center;
  min-height:330px;
  padding:14px;
  background:var(--soft);
}
.books .cover img{
  position:relative;
  z-index:1;
  width:100%;
  height:310px;
  object-fit:contain;
}
.books .book-info{
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  padding:20px;
  text-align:center;
}
.books .book h3{
  margin:0 0 18px;
  color:var(--navy);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.25rem;
  line-height:1.3;
}
.books .button{
  margin-top:auto;
  display:inline-block;
  padding:10px 22px;
  border-radius:999px;
  background:var(--red);
  color:#fff;
  font-family:Arial,sans-serif;
  font-weight:700;
  text-decoration:none;
}
.books .button:hover,.books .button:focus{background:var(--navy)}

@media(max-width:600px){
  .books{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .books .cover{min-height:230px;padding:8px}
  .books .cover img{height:220px}
  .books .book-info{padding:14px 10px}
  .books .book h3{font-size:1rem}
}


/* =========================================================
   CONTACT PAGE — COMPACT EMAIL CARD
   ========================================================= */
.contact-page{max-width:900px;margin:0 auto;text-align:center}
.contact-page .contact-card{
  width:min(760px,100%);margin:0 auto;padding:42px 48px 40px;background:#fff;
  border:1px solid var(--line);border-top:6px solid var(--red);border-radius:10px;
  box-shadow:var(--shadow)
}
.contact-page .contact-intro{max-width:650px;margin:0 auto 16px;font-size:1.12rem}
.contact-page .author-line{margin:0 0 22px;color:var(--navy)}
.email-card-image{
  display:block;width:min(430px,88%);height:auto;margin:22px auto 12px;
}
.email-instruction{margin:6px auto 24px;color:var(--ink);font-size:.96rem}
.contact-social{margin-top:22px}
.contact-social strong{color:var(--navy);font-size:1.12rem}
.contact-social a{color:var(--red);font-weight:600;text-decoration:none}
.contact-social a:hover,.contact-social a:focus{text-decoration:underline}
@media(max-width:620px){
  .contact-page .contact-card{padding:30px 20px 32px}
  .email-card-image{width:min(390px,96%)}
}