@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Playfair+Display:wght@400;700&display=swap');

:root{
  --bg: #F5EFE6; /* warm parchment */
  --card: #ffffff; /* card / foreground */
  --text: #111214; /* deep charcoal */
  --accent: #6B4466; /* muted plum */
  --accent-2: #B08B4F; /* smoky gold */
  --muted: #6a655e; /* general muted text */
  --muted-dark: #4a453f; /* darker muted for links/icons */
  --dark: #2a2623; /* deep ink for accents */
  --header-bg: #f8f6f2; /* header / footer background */
  --header-border: #e0dad0; /* header / footer border */
  --card-bg-variant: #fffdf9; /* subtle off-white for cards */
  --social-border: #d6d0c6; /* social icon border */
  --soft-cream: #f8efe0; /* hero highlight */
  --featured-bg: #f6efe6; /* featured section bg */
  --muted-border: rgba(16,14,12,0.04); /* subtle borders/shadows */
  --muted-shadow: rgba(16,14,12,0.06); /* slightly stronger shadow */
  --radius: 12px;
}

html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system,Segoe UI, Roboto, Arial, sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}

h1,h2,h3,h4{font-family:'Playfair Display', Georgia, serif;color:var(--text);line-height:1.05}

header{background:transparent;padding:28px 20px;text-align:center;border-bottom:1px solid var(--muted-border)}
.site-brand a{font-family:'Playfair Display',serif;font-size:1.5rem;text-decoration:none}

main{max-width:900px;margin:48px auto;padding:28px;background:var(--card);border-radius:var(--radius);box-shadow:0 10px 30px var(--muted-shadow)}

/* Buttons and links: gentle hover, subtle fades */
button{background:var(--accent);color:var(--card);border:0;padding:10px 16px;border-radius:10px;cursor:pointer;transition:opacity .22s ease, transform .18s ease}
button:hover{opacity:0.95;transform:translateY(-2px)}

a{color:var(--accent);transition:color .18s ease,opacity .12s ease;}
a:hover{color:var(--accent-2);opacity:0.95}

/* Utility container */
.container{max-width:900px;margin:0 auto;padding:1rem}

/* Root level styles */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;color:var(--text);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none;transition:color .18s ease}
a:hover{color:var(--accent-2)}

.hero{padding:6rem 1.5rem 5rem;background:radial-gradient(circle at top,var(--soft-cream) 0%,var(--bg) 60%)}
.hero-inner{max-width:900px;margin:auto}
.hero h1{font-family:'Playfair Display',serif;font-size:clamp(2.5rem,4vw,3.5rem);font-weight:700;letter-spacing:-0.02em;margin-bottom:1.5rem}
.hero-sub{max-width:700px;font-size:1.15rem;color:var(--muted);margin-bottom:2.5rem}
.btn{padding:0.75rem 1.6rem;border-radius:999px;font-weight:600;font-size:0.95rem}
.primary{background:var(--text);color:var(--card)}
.secondary{border:2px solid var(--text);background:transparent}

.intro{max-width:900px;margin:4rem auto;padding:0 1.5rem;font-size:1.05rem}
.intro p{margin-bottom:1.5rem}
.intro-emphasis{font-style:italic;color:var(--muted)}

.pathways{max-width:1100px;margin:4rem auto;padding:0 1.5rem}
.path-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem}
.path-card{background:var(--card);border-radius:14px;padding:2rem;border:1px solid var(--muted-border);transition:transform .2s ease,box-shadow .2s ease}
.path-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px var(--muted-shadow)}
.path-card h2{font-size:1.3rem;margin-bottom:0.3rem;font-family:'Playfair Display',serif}
.path-subtitle{display:block;font-size:0.85rem;color:var(--muted);margin-bottom:1rem;letter-spacing:0.05em;text-transform:uppercase}
.path-card p{font-size:0.95rem;margin-bottom:1.5rem}
.path-link{font-weight:600;font-size:0.9rem}

.featured{background:var(--featured-bg);padding:4rem 1.5rem;text-align:center}
.featured h3{margin-bottom:1.5rem}
.featured ul{list-style:none}
.featured li{margin:0.75rem 0}
.featured-note{margin-top:1.5rem;font-size:0.9rem;color:var(--muted)}

.leadership{max-width:800px;margin:4rem auto;padding:0 1.5rem;text-align:center;font-style:italic;color:var(--muted)}

.footer{
  background:var(--header-bg);
  padding: 3rem 1.5rem;
  border-top: 1px solid var(--header-border);
  text-align: center;
}
.footer-nav{margin-bottom:1.2rem}
.footer-nav a{margin:0 0.75rem;font-size:0.9rem;color:var(--muted)}
.footer-tagline{font-weight:600;margin-bottom:0.5rem}
.footer-copy{font-size:0.8rem;color:var(--muted)}

/* subtle motion helper */
.fade-in{animation:fadeIn .45s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* HEADER */
.site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
}

.nav {
  max-width: 1100px;
  margin: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

.nav-links a {
  margin-left: 1.5rem;
  font-size: 0.9rem;
  color: var(--muted-dark);
}
.nav-links a:hover {
  color: var(--accent-2);
}

/* SOCIAL LINKS */
.social-links {
  margin: 1.25rem 0;
  display: flex;
  justify-content: center;
  gap: 1.25rem;
}

.social-links a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--social-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.social-links a:hover {
  background: var(--dark);
  transform: translateY(-2px);
}

.social-links svg {
  width: 18px;
  height: 18px;
  fill: var(--muted-dark);
  transition: fill 0.2s ease;
}

.social-links a:hover svg {
  fill: var(--card);
}

/* SYSTEMS PAGE */
.systems-page .page-hero {
  text-align: center;
  padding: 4rem 1rem 2rem;
}

.hero-subtitle {
  max-width: 720px;
  margin: 1rem auto 0;
  color: var(--muted);
  font-size: 1.1rem;
}

.content-section {
  padding: 3rem 1rem;
  max-width: 1100px;
  margin: 0 auto;
}

.content-section.narrow {
  max-width: 800px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.card {
  border: 1px solid var(--header-border);
  padding: 1.5rem;
  border-radius: 6px;
  background: var(--card-bg-variant);
}

.card h3 {
  margin-bottom: 0.5rem;
}

.experience-list {
  margin-top: 1.5rem;
  padding-left: 1.25rem;
}

.experience-list li {
  margin-bottom: 0.75rem;
}

.tech-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 1.5rem;
}

.closing-statement {
  text-align: center;
  font-weight: 500;
}
.closing-statement p {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
}

/* RESUME DOWNLOAD */
.resume-download {
  text-align: center;
  padding-top: 1.5rem;
  padding-bottom: 0;
}

.resume-button {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  border: 2px solid var(--dark);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dark);
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.resume-button:hover {
  background: var(--dark);
  color: var(--card);
  transform: translateY(-2px);
}

/* SIMPLE LINK LIST */
.link-list {
  margin-top: 1rem;
  padding-left: 1.25rem;
}

.link-list li {
  margin-bottom: 0.5rem;
}
.link-list a {
  font-size: 1rem;
  color: var(--accent);
}

/* BOOK GRID */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.book-card {
  text-align: center;
  padding: 1rem;
}


.book-card:hover img {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}


.book-card img {
  width: 100%;
  max-width: 140px;   /*thumbnail max width*/
  height: auto;
  border-radius: 6px;
  margin: 0 auto 1rem;
  display: block;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.book-card h4 {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

/* Follow & Shop Section */
.follow-shop-container {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  margin-top: 1.5rem;
}

.follow-shop-container .link-list {
  flex: 1;
}

.witcheasy-logo {
  max-width: 150px;
  height: auto;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .follow-shop-container {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .witcheasy-logo {
    max-width: 120px;
  }
}

/* Stories follow container (small right-side logo) */
.stories-follow-container {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 1rem;
}

.stories-follow-container .link-list {
  flex: 1;
}

.stories-logo {
  max-width: 120px;
  height: auto;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .stories-follow-container {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .stories-logo {
    max-width: 100px;
  }
}

.voice-samples {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.audio-placeholder {
  padding: 0.75rem 1rem;
  border: 1px dashed #c9c2b8;
  border-radius: 6px;
  color: #6a645d;
  font-style: italic;
}
.audio-placeholder:hover {
  background: var(--featured-bg);
}

.about-page p {
  margin-bottom: 1.25rem;
}