:root {
  --gold-soft:   #B8972A;
  --gold-light:  #D4AC3A;
  --gold-dim:    #8A6E1C;
  --deep-red:    #8B2020;
  --deep-red-dark:#651414;
  --ink:         #1A1612;
  --ink-mid:     #3D3326;
  --ink-soft:    #6B5D4A;
  --parchment:   #FAF7F2;
  --parchment-2: #F2EDE4;
  --parchment-3: #E8DFD0;
  --white:       #FFFFFF;
  --alt-bg:      #F5F0E8;
  --teal-soft:   #2A7A74;
  --border:      rgba(139,105,40,0.18);
  --border-mid:  rgba(139,105,40,0.30);
  --shadow-sm:   0 1px 4px rgba(26,22,18,0.08);
  --shadow-md:   0 4px 16px rgba(26,22,18,0.10);
  --shadow-lg:   0 8px 32px rgba(26,22,18,0.12);
  --radius:      4px;
  --radius-md:   8px;
  --ff-serif:    Georgia, "Times New Roman", serif;
  --ff-sans:     -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --max-w:       960px;
  --max-narrow:  720px;
  --safe-gutter: 56px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  overflow-x: hidden;
  font-family: var(--ff-sans);
  background: var(--parchment);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold-dim); }
a:hover { color: var(--gold-soft); }
.skip-link {
  position: absolute; left: -9999px; top: auto;
  background: var(--ink); color: var(--white);
  padding: 0.5rem 1rem; z-index: 9999;
  font-size: 0.875rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.nav-wrap {
  width: min(calc(100% - var(--safe-gutter)), var(--max-w));
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px; gap: 2rem;
}
.brand {
  text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column;
  line-height: 1.2; flex-shrink: 0;
}
.brand strong { font-family: var(--ff-serif); font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; }
.brand span { font-size: 0.7rem; color: var(--ink-soft); letter-spacing: 0.06em; text-transform: uppercase; }
.nav { display: flex; gap: 0; align-items: center; flex-wrap: wrap; }
.nav a {
  color: var(--ink-soft); text-decoration: none;
  font-size: 0.8rem; padding: 0.5rem 0.75rem;
  letter-spacing: 0.02em;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.nav a[aria-current] { font-weight: 600; }
.nav a.nav-app {
  color: var(--gold-soft); font-weight: 600;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  padding: 0.35rem 0.75rem;
  margin-left: 0.5rem;
}
.nav a.nav-app:hover { background: var(--gold-soft); color: var(--white); border-color: var(--gold-soft); }

.container { width: min(calc(100% - var(--safe-gutter)), var(--max-w)); margin: 0 auto; }
.container.narrow { width: min(calc(100% - var(--safe-gutter)), var(--max-narrow)); }

.page-hero {
  background: var(--parchment);
  border-bottom: 1px solid var(--border);
  padding: 2rem 0 2.75rem;
}
.breadcrumb {
  font-size: 0.75rem; color: var(--ink-soft);
  margin-bottom: 1rem; letter-spacing: 0.03em;
}
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-soft); }
.hero-art {
  width: min(96%, 900px);
  aspect-ratio: 960 / 422;
  margin: 0 auto 0.55rem;
  border-radius: 16px;
  background:
    linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.04)),
    url('../../images/abundant-alchemy-header.png') center center / cover no-repeat;
  box-shadow: 0 18px 48px rgba(26,22,18,.18);
  border: 2px solid var(--gold-soft);
  outline: 1px solid rgba(184,151,42,0.35);
  outline-offset: 6px;
}
.hero-caption {
  font-size: 0.72rem;
  color: var(--gold-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0.85rem auto 1.1rem;
  font-weight: 700;
  text-align: center;
}
.hero-copy { max-width: 740px; margin: 0 auto; text-align: center; }
.eyebrow {
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 0.45rem; font-weight: 700;
}
h1, h2, h3 { font-family: var(--ff-serif); color: var(--ink); line-height: 1.18; }
.page-hero h1 {
  font-size: clamp(1.95rem, 4vw, 2.85rem);
  font-weight: 700;
  margin: 0 auto 0.55rem;
}
.lede { font-size: 1rem; color: var(--ink-soft); max-width: 680px; line-height: 1.65; margin: 0 auto; }

.section { padding: 2.75rem 0; }
.section.alt { background: var(--alt-bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { margin-bottom: 1.5rem; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; max-width: 720px; }
.section-head h2 { font-size: 1.45rem; margin-bottom: 0.45rem; }
.section-head p { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.7; }

.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  padding: 1.35rem;
  box-shadow: var(--shadow-md);
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}
.card h2 { font-size: 1.28rem; margin-bottom: 0.7rem; }
.card h3 { font-size: 1.08rem; margin-bottom: 0.45rem; }
.card p, .card li { color: var(--ink-soft); font-size: 0.92rem; }
.card p + p { margin-top: 0.65rem; }
.number {
  color: var(--gold-soft);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 0.55rem;
}
.button {
  display: inline-block;
  padding: 0.6rem 1.15rem;
  background: var(--ink); color: var(--white);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--ff-sans); font-size: 0.8rem;
  font-weight: 600; letter-spacing: 0.03em;
  cursor: pointer; text-decoration: none;
  transition: all 0.18s; line-height: 1.4;
  white-space: nowrap;
  margin-top: 0.85rem;
}
.button:hover { background: var(--ink-mid); border-color: var(--ink-mid); color: var(--white); }
.button.secondary { background: transparent; color: var(--ink); border-color: var(--border-mid); }
.button.secondary:hover { border-color: var(--ink-soft); background: var(--parchment-2); color: var(--ink); }

.audio-list { display: grid; gap: 0.8rem; }
.audio-item {
  padding: 0.85rem;
  background: var(--parchment);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.audio-item strong { display: block; font-size: 0.82rem; margin-bottom: 0.5rem; color: var(--ink); }
.audio-item audio { width: 100%; }

.lesson-flow { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .55rem; margin-top: 1rem; }
.flow-pill {
  background: var(--parchment-2);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: .35rem .5rem;
  font-size: .72rem;
  color: var(--ink-soft);
  text-align: center;
}

.callout {
  background: var(--parchment-2);
  border-left: 3px solid var(--gold-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem;
  font-size: 0.92rem; color: var(--ink-soft);
  line-height: 1.7;
}
.callout strong { color: var(--ink); }

.study-list { list-style: none; display: grid; gap: .7rem; }
.study-list li { padding-left: 1.4rem; position: relative; }
.study-list li::before {
  content: '◆';
  position: absolute;
  left: 0;
  top: .05rem;
  color: var(--gold-soft);
  font-size: .75rem;
}

.lesson-nav { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }

.hero-actions { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.process .card, .material-card, .lesson-card { min-height: 100%; }
.process .card h3, .material-card h3, .lesson-card h3 { font-family: var(--ff-serif); color: var(--ink); font-size: 1.05rem; line-height: 1.2; margin-bottom: .45rem; }
.process-emphasis { background: var(--parchment-2); }
.pill-row { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .85rem; }
.pill { display: inline-block; padding: .25rem .55rem; border-radius: 999px; border: 1px solid var(--border-mid); background: var(--parchment); color: var(--ink-soft); font-size: .68rem; line-height: 1.2; }
.faq-list { display: grid; gap: .7rem; }
.faq-item { background: var(--white); border: 1px solid var(--border-mid); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 1rem 1.15rem; }
.faq-item summary { cursor: pointer; font-family: var(--ff-serif); font-weight: 700; color: var(--ink); }
.faq-item p { margin-top: .75rem; color: var(--ink-soft); font-size: .92rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: .75rem; align-items: center; }
.form-row input { width: 100%; padding: .72rem .8rem; border: 1px solid var(--border-mid); border-radius: var(--radius); font: inherit; background: var(--white); color: var(--ink); }
.form-row .button { margin-top: 0; }
.hero-home h1 { font-size: clamp(2.15rem, 5vw, 3.45rem); }
.hero-subtitle { font-family: var(--ff-serif); color: var(--gold-soft); font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.15; margin-bottom: .75rem; }

/* Lesson page red label treatment */
.lesson-page .page-hero .eyebrow,
.lesson-page .section-head .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--deep-red);
  color: var(--white);
  border: 1px solid rgba(101,20,20,0.26);
  border-radius: 999px;
  padding: 0.34rem 0.88rem;
  margin-bottom: 0.72rem;
  box-shadow:
    0 7px 18px rgba(139,32,32,0.24),
    0 2px 5px rgba(26,22,18,0.10),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
.lesson-page .number {
  color: var(--deep-red);
}
.lesson-page .card::before {
  background: linear-gradient(90deg, transparent, rgba(139,32,32,.75), transparent);
}

.footer {
  background: var(--ink); color: rgba(250,247,242,0.65);
  padding: 2.5rem 0;
  font-size: 0.82rem; line-height: 1.7;
  border-top: 3px solid var(--gold-soft);
}
.footer-grid {
  width: min(calc(100% - var(--safe-gutter)), var(--max-w));
  margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem;
}
.footer strong { color: var(--gold-soft); }
.footer a { color: rgba(250,247,242,0.7); text-decoration: none; }
.footer a:hover { color: var(--gold-light); }
.footer p { margin-bottom: 0.5rem; }

@media (max-width: 900px) {
  .grid.four, .grid.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --safe-gutter: 36px; }
  .nav-wrap { height: auto; min-height: 60px; padding: .7rem 0; flex-wrap: wrap; justify-content: center; }
  .brand { align-items: center; }
  .nav { justify-content: center; }
  .page-hero { padding-top: 1.5rem; }
  .hero-art { width: 100%; outline-offset: 4px; }
  .grid.two, .grid.three, .grid.four, .grid.five, .lesson-flow { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Home page refinement pass */
.home-page .hero-copy .eyebrow,
.home-page .section-head .eyebrow {
  font-size: 0.84rem;
  letter-spacing: 0.105em;
  font-weight: 800;
  margin-bottom: 0.58rem;
}

.home-page .hero-copy .eyebrow {
  font-size: 0.92rem;
}

.home-page .section-head h2 {
  font-size: clamp(1.55rem, 2.6vw, 1.95rem);
}

.home-page #materials .grid.five {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.home-page #materials .material-card {
  padding: 1.6rem 1.45rem;
  display: flex;
  flex-direction: column;
}

.home-page #materials .material-card p {
  margin-bottom: 0.85rem;
}

.home-page #materials .material-card .button {
  width: 100%;
  white-space: normal;
  text-align: center;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  margin-top: auto;
}

@media (max-width: 900px) {
  .home-page #materials .grid.five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .home-page #materials .grid.five {
    grid-template-columns: 1fr;
  }
}

/* Home page red accent test */
.home-page {
  --accent-red: #8B2020;
  --accent-red-dark: #651414;
}

.home-page .hero-copy .eyebrow,
.home-page .section-head .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-red);
  color: var(--white);
  border: 1px solid rgba(101,20,20,0.26);
  border-radius: 999px;
  padding: 0.34rem 0.88rem;
  box-shadow:
    0 7px 18px rgba(139,32,32,0.20),
    0 2px 5px rgba(26,22,18,0.08),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

.home-page .hero-copy .eyebrow {
  margin-bottom: 0.82rem;
}

.home-page .section-head .eyebrow {
  margin-bottom: 0.76rem;
}

.home-page .button:not(.secondary) {
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: var(--white);
  box-shadow: 0 7px 18px rgba(139,32,32,0.18);
}

.home-page .button:not(.secondary):hover {
  background: var(--accent-red-dark);
  border-color: var(--accent-red-dark);
}

.home-page .card::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(139,32,32,.72),
    rgba(184,151,42,.48),
    transparent
  );
}

.home-page .material-card .number,
.home-page .lesson-card .number {
  color: var(--accent-red);
}

.home-page .study-list li::before {
  color: var(--accent-red);
}

.home-page .callout {
  border-left-color: var(--accent-red);
}

.home-page .pill {
  border-color: rgba(139,32,32,0.22);
}

.home-page .hero-subtitle {
  color: var(--accent-red);
}


/* ===== Abundant Alchemy patch: new hero image, responsive nav, About hero ===== */
.hero-art {
  background:
    linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.04)),
    url('../../images/hero/web/hero-1920x1080.webp') center center / cover no-repeat !important;
}

/* responsive top navigation */
.site-header { position: sticky; top: 0; z-index: 1000; }
.nav-wrap { height: auto; min-height: 60px; flex-wrap: wrap; row-gap: .45rem; }
.nav { min-width: 0; }
@media (max-width: 1120px) {
  .nav-wrap { justify-content: center; gap: .55rem 1rem; padding-top: .55rem; padding-bottom: .55rem; }
  .brand { align-items: center; text-align: center; }
  .nav { flex: 0 1 100%; justify-content: center; gap: .08rem; }
  .nav a { font-size: .76rem; padding: .42rem .58rem; }
  .nav a.nav-app { margin-left: .2rem; padding: .35rem .68rem; }
}
@media (max-width: 760px) {
  .nav-wrap { width: min(calc(100% - 24px), var(--max-w)); padding-top: .62rem; padding-bottom: .4rem; }
  .brand { width: 100%; align-items: center; text-align: center; }
  .nav { width: 100%; flex: 0 0 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; gap: .35rem; padding: .28rem 0 .45rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar { height: 4px; }
  .nav::-webkit-scrollbar-thumb { background: rgba(184,151,42,.45); border-radius: 999px; }
  .nav a { flex: 0 0 auto; font-size: .74rem; padding: .42rem .68rem; border: 1px solid rgba(139,105,40,.20); border-radius: 999px; background: rgba(255,255,255,.72); white-space: nowrap; }
  .nav a[aria-current], .nav a:hover { color: var(--ink); border-color: rgba(139,32,32,.35); background: rgba(250,247,242,.95); }
  .nav a.nav-app { margin-left: 0; border-color: rgba(184,151,42,.55); color: var(--gold-soft); }
}

/* clean About page hero */
.about-page .about-hero-clean .hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8,12,30,.90) 0%, rgba(8,12,30,.62) 42%, rgba(8,12,30,.12) 76%),
    url('../../images/hero/web/hero-1920x1080.webp') center center / cover no-repeat !important;
}
.about-page .about-hero-overlay {
  position: relative;
  z-index: 2;
  padding: clamp(1.4rem, 4vw, 3rem);
  max-width: 560px;
  color: #fff;
  text-align: left;
}
.about-page .about-hero-overlay span {
  display: inline-flex;
  margin-bottom: .7rem;
  padding: .34rem .88rem;
  border-radius: 999px;
  background: var(--deep-red);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.about-page .about-hero-overlay strong {
  display: block;
  font-family: var(--ff-serif);
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: 1.04;
  color: #FFD65A;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.about-page .about-hero-overlay em {
  display: block;
  margin-top: .65rem;
  font-style: normal;
  color: rgba(250,247,242,.92);
  font-size: clamp(1rem, 2vw, 1.3rem);
}
.about-page .about-hero-summary .hero-actions .button,
.about-page .about-hero-summary .hero-actions .button.secondary {
  background: var(--deep-red) !important;
  border-color: var(--deep-red) !important;
  color: var(--white) !important;
}
.about-page .about-hero-summary .hero-actions .button:hover,
.about-page .about-hero-summary .hero-actions .button.secondary:hover {
  background: var(--deep-red-dark) !important;
  border-color: var(--deep-red-dark) !important;
  color: var(--white) !important;
}

/* contained home hero card */
.hero-home.cinematic-hero {
  padding: clamp(1.25rem, 3vw, 2.25rem) 0;
  background: var(--parchment);
}
.hero-home.cinematic-hero .container {
  width: min(calc(100% - 40px), 960px);
  max-width: 960px;
  aspect-ratio: 16 / 9;
  min-height: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-radius: 22px;
  border: 1px solid rgba(184,151,42,0.28);
  box-shadow: 0 26px 70px rgba(16,22,45,0.18);
  background: #10162d;
}
.hero-home.cinematic-hero .container::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,12,30,.96) 0%, rgba(12,17,38,.88) 28%, rgba(12,17,38,.46) 51%, rgba(12,17,38,.10) 75%),
    url('../../images/hero/web/hero-1920x1080.webp') center center / cover no-repeat;
  z-index: 0;
}
.hero-home.cinematic-hero .breadcrumb,
.hero-home.cinematic-hero .hero-art,
.hero-home.cinematic-hero .hero-caption { display: none; }
.hero-home.cinematic-hero .hero-copy {
  position: relative;
  z-index: 3;
  max-width: 520px;
  padding: clamp(2rem, 4vw, 3.25rem);
  text-align: left;
  margin: 0;
}
.hero-home.cinematic-hero h1 { color: #fff; font-size: 2.5rem; line-height: 1.08; }
.hero-home.cinematic-hero .hero-subtitle { color: #FFD65A; font-size: clamp(1.75rem,4vw,2.75rem); }
.hero-home.cinematic-hero .lede { color: rgba(250,247,242,.9); text-align: left; }
.hero-home.cinematic-hero .hero-actions { justify-content: flex-start; }
@media (max-width: 760px) {
  .hero-home.cinematic-hero .container { aspect-ratio: auto; min-height: 610px; align-items: flex-start; }
  .hero-home.cinematic-hero .container::before {
    background:
      linear-gradient(180deg, rgba(8,12,30,.96) 0%, rgba(8,12,30,.88) 48%, rgba(8,12,30,.38) 100%),
      url('../../images/hero/web/hero-1920x1080.webp') 62% center / cover no-repeat;
  }
  .hero-home.cinematic-hero .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-home.cinematic-hero .button { width: 100%; text-align: center; }
}


/* ===== Tweaks 2026-06-14: buttons + H2 sizing ===== */
.button,
.button.secondary,
.home-page .button,
.home-page .button.secondary,
.about-page .button,
.about-page .button.secondary,
.lesson-page .button,
.lesson-page .button.secondary {
  background: var(--deep-red) !important;
  border-color: var(--deep-red) !important;
  color: var(--white) !important;
}
.button:hover,
.button.secondary:hover,
.home-page .button:hover,
.home-page .button.secondary:hover,
.about-page .button:hover,
.about-page .button.secondary:hover,
.lesson-page .button:hover,
.lesson-page .button.secondary:hover {
  background: var(--white) !important;
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}
.home-page .section-head h2,
.section-head h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.95rem) !important;
}