/* =========================================================
   ROADBLOCKS & RELATIONSHIPS — COMPLETE SITE STYLESHEET
   Includes the original site styles, two-row navigation,
   and Book Videos / Previous-Next video controls.
   ========================================================= */

:root{
  --ink:#20333a;
  --muted:#5f7075;
  --paper:#fbfaf5;
  --cream:#f2eee2;
  --accent:#b9783e;
  --accent-dark:#8c5429;
  --sage:#536c60;
  --line:#d9d5c9;
  --white:#fff
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.65
}

a{color:inherit}

.wrap{
  width:min(1120px,92%);
  margin:auto
}

.narrow{max-width:850px}

/* =========================================================
   HEADER / TWO-ROW NAVIGATION
   The rabbit + title is the Home link.
   The eight navigation items are displayed as two rows of four.
   ========================================================= */

.site-header{
  background:rgba(251,250,245,.97);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:20
}

.nav{
  min-height:92px;
  display:grid;
  grid-template-columns:270px 1fr;
  align-items:center;
  gap:22px
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:700;
  line-height:1.05;
  font-size:1.12rem
}

.brand small{
  font-size:.85rem;
  font-weight:400;
  letter-spacing:.08em
}

.rabbit{font-size:2rem}

.nav nav{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:10px;
  row-gap:0;
  align-items:center;
  font-family:Arial,sans-serif;
  font-size:.91rem
}

.nav nav a{
  text-decoration:none;
  text-align:center;
  white-space:nowrap;
  padding:2px 4px;
  line-height:1.1
}

.nav nav a:hover,
.nav nav .active{
  color:var(--accent-dark)
}

.nav-button{
  background:var(--ink);
  color:#fff!important;
  padding:8px 10px!important;
  border-radius:5px
}

.menu{display:none}

/* =========================================================
   HOME / HERO
   ========================================================= */

.hero{
  padding:82px 0 75px;
  background:linear-gradient(135deg,#f4efe1,#fbfaf5)
}

.hero-grid{
  display:grid;
  grid-template-columns:1.18fr .82fr;
  gap:70px;
  align-items:center
}

.eyebrow{
  font:700 .76rem/1.2 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--accent-dark);
  margin:0 0 16px
}

.hero h1,
.page-hero h1{
  font-size:clamp(2.5rem,5vw,4.55rem);
  line-height:1.02;
  margin:0 0 24px;
  font-weight:500
}

.hero h1 em{
  color:var(--accent-dark);
  font-style:normal
}

.lead{
  font-size:1.25rem;
  color:var(--muted);
  line-height:1.55
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:30px 0 12px
}

.button{
  display:inline-block;
  text-decoration:none;
  border:1px solid var(--ink);
  padding:12px 19px;
  border-radius:5px;
  font-family:Arial,sans-serif;
  font-size:.88rem;
  font-weight:700
}

.button.primary{
  background:var(--ink);
  color:#fff
}

.button.primary:hover{background:#101e22}

.button.secondary{background:transparent}

.small-note{
  font:.78rem/1.5 Arial,sans-serif;
  color:var(--muted)
}

.hero-card{
  display:flex;
  justify-content:center
}

.book-placeholder{
  width:min(320px,100%);
  aspect-ratio:2/3;
  background:#e4dbc7;
  box-shadow:16px 18px 0 #c9bea7;
  padding:42px 30px;
  position:relative;
  overflow:hidden;
  text-align:center
}

.book-placeholder:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:15px;
  background:#8c7254
}

.book-kicker{
  font:700 .7rem Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.16em
}

.book-placeholder h2{
  font-size:2.4rem;
  line-height:1.05;
  font-weight:500;
  margin:55px 0 12px
}

.book-placeholder h2 span{font-size:1.65rem}

.book-placeholder p{
  font:1rem Arial,sans-serif;
  margin-top:120px
}

.road{
  position:absolute;
  height:45px;
  width:160%;
  background:#7d7b70;
  bottom:60px;
  left:-30%;
  transform:rotate(-13deg)
}

.hero-book{
  margin:0;
  width:min(360px,100%);
  filter:drop-shadow(15px 18px 0 rgba(60,45,30,.18))
}

.hero-book img{
  display:block;
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:contain
}

/* =========================================================
   GENERAL CONTENT SECTIONS
   ========================================================= */

.intro{padding:80px 0}

.intro h2,
.download-strip h2,
.discussion h2,
.teacher-box h2{
  font-size:2.3rem;
  line-height:1.15;
  font-weight:500;
  margin-top:0
}

.intro p{font-size:1.13rem}

.three-cards{padding:0 0 80px}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}

.card{
  background:#fff;
  border:1px solid var(--line);
  padding:34px;
  min-height:260px
}

.card.featured{border-top:4px solid var(--accent)}

.icon{
  font-size:1.8rem;
  color:var(--accent-dark)
}

.card h3{
  font-size:1.45rem;
  margin:12px 0
}

.card a{
  font:700 .86rem Arial,sans-serif;
  text-decoration:none
}

.quote{
  background:var(--sage);
  color:#fff;
  padding:70px 0
}

.quote-inner{
  max-width:850px;
  text-align:center
}

.quote-mark{
  font-size:4rem;
  line-height:.5
}

.quote blockquote{
  font-size:1.65rem;
  line-height:1.45;
  margin:20px 0;
  font-style:italic
}

.quote p{
  font:700 .82rem Arial,sans-serif
}

.download-strip{
  background:var(--cream);
  padding:55px 0
}

.strip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px
}

.format-list{
  display:flex;
  gap:10px
}

.format-list a{
  background:#fff;
  border:1px solid var(--line);
  padding:16px 20px;
  text-decoration:none;
  min-width:105px
}

.format-list strong,
.format-list span{display:block}

.format-list strong{
  font:700 .85rem Arial,sans-serif
}

.format-list span{
  font:.75rem Arial,sans-serif;
  color:var(--muted);
  margin-top:5px
}

/* =========================================================
   PAGE HERO / ARTICLES
   ========================================================= */

.page-hero{
  padding:75px 0 65px;
  background:linear-gradient(135deg,#f4efe1,#fbfaf5)
}

.article{padding:75px 0}

.article-grid{
  display:grid;
  grid-template-columns:1fr 310px;
  gap:75px
}

.article article{font-size:1.13rem}

.article article p{margin:0 0 22px}

.side-card{
  align-self:start;
  background:var(--cream);
  padding:30px
}

.side-card h3{
  font-size:1.5rem;
  line-height:1.2
}

.rabbit-large{font-size:3rem}

.signature{
  font-size:1.2rem;
  margin-top:40px
}

.topic-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:35px 0 60px
}

.topic-grid article{
  background:#fff;
  border:1px solid var(--line);
  padding:24px
}

.topic-grid h3{
  margin:0 0 8px;
  font-size:1.2rem
}

.topic-grid p{
  margin:0;
  color:var(--muted)
}

.discussion{
  background:var(--cream);
  padding:42px;
  margin:30px 0 55px
}

.discussion ol{
  columns:2;
  column-gap:50px;
  padding-left:25px
}

.discussion li{
  padding:0 0 12px;
  break-inside:avoid
}

.teacher-box{
  border:1px solid var(--line);
  padding:40px
}

.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}

.steps div{
  display:flex;
  gap:12px
}

.steps b{
  background:var(--ink);
  color:#fff;
  border-radius:50%;
  min-width:28px;
  height:28px;
  text-align:center;
  line-height:28px;
  font-family:Arial,sans-serif
}

.steps span{font-size:.95rem}

.cta{
  text-align:center;
  margin:55px 0 0;
  padding:50px;
  background:var(--sage);
  color:#fff
}

.cta h2{
  font-size:2rem;
  margin:0 0 8px
}

.cta p{margin:0 0 22px}

.cta .button{border-color:#fff}

/* =========================================================
   DOWNLOAD PAGE
   ========================================================= */

.downloads{padding:75px 0}

.format-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}

.format-card{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  padding:35px;
  text-decoration:none;
  transition:transform .15s,box-shadow .15s
}

.format-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 25px rgba(0,0,0,.08)
}

.file-type{
  font:700 .78rem Arial,sans-serif;
  color:var(--accent-dark);
  letter-spacing:.14em
}

.format-card h2{
  font-size:2rem;
  margin:10px 0
}

.format-card p{color:var(--muted)}

.download-link{
  font:700 .85rem Arial,sans-serif
}

.usage{
  margin-top:55px;
  text-align:center;
  background:var(--cream);
  padding:45px
}

.usage h2{
  font-size:2rem;
  margin:0
}

.usage p{
  max-width:700px;
  margin:12px auto 20px
}

.usage .button{margin:5px}

.usage .small-note{margin-top:20px}

.guide-download{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  background:#f2eee2;
  border:1px solid #d9d5c9;
  padding:30px;
  margin:0 0 35px
}

.guide-download h2{
  margin:0 0 8px;
  font-size:1.7rem
}

.guide-download p{
  margin:0;
  max-width:690px;
  color:#5f7075
}

.download-intro{
  display:flex;
  align-items:center;
  gap:40px;
  max-width:850px;
  margin-bottom:45px;
  background:#f2eee2;
  padding:28px
}

.download-intro img{
  width:145px;
  max-height:220px;
  object-fit:contain;
  box-shadow:7px 8px 0 rgba(60,45,30,.14)
}

.download-intro h2{
  font-size:2rem;
  line-height:1.15;
  margin:0 0 8px
}

.download-intro p{color:#5f7075}

.audio-card .audio-cover{
  display:block;
  width:150px;
  height:210px;
  object-fit:contain;
  margin:0 auto 22px;
  box-shadow:7px 8px 0 rgba(60,45,30,.12)
}

.audio-card audio{
  width:100%;
  margin:10px 0 14px
}

.audio-card .download-link{display:block}

/* =========================================================
   AUTHOR / TEACHER AREAS
   ========================================================= */

.teacher-home{
  padding:78px 0;
  background:#fff
}

.teacher-home-grid{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:65px;
  align-items:center
}

.teacher-photo{
  background:#f2eee2;
  padding:12px;
  border:1px solid #d9d5c9
}

.teacher-photo img{
  display:block;
  width:100%;
  height:auto
}

.teacher-home h2{
  font-size:2.35rem;
  line-height:1.12;
  font-weight:500;
  margin:0 0 18px
}

.teacher-home p{
  font-size:1.08rem;
  color:#5f7075
}

.teacher-home ul{
  padding-left:22px;
  color:#5f7075
}

.teacher-home li{margin:0 0 10px}

.author-profile{
  display:flex;
  align-items:center;
  gap:22px;
  background:#f2eee2;
  padding:18px;
  margin-bottom:30px;
  border:1px solid #d9d5c9
}

.author-profile img{
  width:105px;
  height:105px;
  object-fit:cover;
  border-radius:50%
}

.author-profile h2{
  font-size:1.65rem;
  margin:0
}

.author-profile .eyebrow{margin-bottom:5px}

/* =========================================================
   BOOK VIDEOS
   ========================================================= */

.video-library{padding:65px 0 80px}

.video-intro{
  text-align:center;
  margin-bottom:35px
}

.video-intro .lead{
  max-width:760px;
  margin-left:auto;
  margin-right:auto
}

.video-player-wrap{
  max-width:1000px;
  margin:0 auto 22px
}

.video-player{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#111;
  border-radius:10px;
  overflow:hidden;
  box-shadow:12px 14px 0 rgba(60,45,30,.10)
}

.video-player iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0
}

.current-video{
  text-align:center;
  max-width:900px;
  margin:0 auto 28px
}

.current-video .eyebrow{margin-bottom:7px}

.current-video h2{
  margin:0;
  font-size:2rem;
  line-height:1.2;
  font-weight:500
}

/* Previous / Next video controls */

.video-nav{
  max-width:1000px;
  margin:0 auto 38px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:15px;
  align-items:center
}

.video-nav-button{
  display:block;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  padding:12px 16px;
  border-radius:5px;
  text-decoration:none;
  font:700 .82rem/1.3 Arial,sans-serif;
  cursor:pointer;
  min-height:48px
}

.video-nav-button:hover:not(.disabled){
  border-color:var(--accent);
  color:var(--accent-dark);
  background:var(--cream)
}

.video-nav-button.next{text-align:right}

.video-nav-button.disabled{
  visibility:hidden;
  pointer-events:none
}

.video-nav-current{
  text-align:center;
  color:var(--muted);
  font:700 .72rem/1.2 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.12em;
  min-width:110px
}

.video-section{
  max-width:1000px;
  margin:0 auto 38px
}

.video-section h3{
  font-size:1.65rem;
  line-height:1.2;
  margin:0 0 15px
}

.video-links{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px
}

.video-link{
  display:block;
  width:100%;
  text-align:left;
  padding:15px 17px;
  border:1px solid var(--line);
  border-radius:5px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  cursor:pointer;
  transition:transform .15s,box-shadow .15s,border-color .15s,background .15s
}

.video-link:hover{
  transform:translateY(-2px);
  box-shadow:0 7px 18px rgba(0,0,0,.08);
  border-color:var(--accent)
}

.video-link.active{
  background:var(--cream);
  border-color:var(--accent);
  box-shadow:0 4px 12px rgba(0,0,0,.07);
  font-weight:700
}

.video-number{
  display:inline-block;
  min-width:112px;
  margin-right:8px;
  color:var(--accent-dark);
  font-family:Arial,sans-serif;
  font-size:.78rem;
  font-weight:700
}

.video-note{
  max-width:1000px;
  margin:15px auto 0;
  background:var(--cream);
  border:1px solid var(--line);
  padding:25px 30px
}

.video-note p{
  margin:0;
  color:var(--muted)
}

.video-cta{
  margin-top:45px;
  text-align:center;
  background:var(--sage);
  color:#fff;
  padding:40px 30px
}

.video-cta h2{
  font-size:2rem;
  margin:0 0 8px
}

.video-cta p{margin:0 0 22px}

.video-cta .button{border-color:#fff}

/* =========================================================
   FOOTER
   ========================================================= */

footer{
  background:#18262b;
  color:#dbe1df;
  padding:45px 0;
  font-family:Arial,sans-serif
}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:35px;
  font-size:.82rem
}

.footer-grid a{
  display:block;
  text-decoration:none;
  margin-bottom:8px
}

.footer-grid p{
  margin:5px 0;
  color:#b8c3c0
}

/* =========================================================
   RESPONSIVE LAYOUT
   ========================================================= */

/* Medium desktop / tablet */
@media(max-width:1050px){
  .nav{
    grid-template-columns:220px 1fr;
    gap:14px
  }

  .nav nav{
    font-size:.75rem;
    gap:5px 6px
  }

  .nav nav a{padding:5px 2px}

  .hero-grid{gap:45px}
}

/* Tablet */
@media(max-width:850px){
  .hero-grid,
  .article-grid{
    grid-template-columns:1fr
  }

  .hero-card{order:-1}

  .hero-card .book-placeholder{width:230px}

  .cards,
  .topic-grid,
  .format-cards{
    grid-template-columns:1fr
  }

  .strip{
    flex-direction:column;
    align-items:flex-start
  }

  .format-list{flex-wrap:wrap}

  .steps{grid-template-columns:1fr 1fr}

  .discussion ol{columns:1}

  .footer-grid{grid-template-columns:1fr 1fr}
}

/* Smaller tablets / phones */
@media(max-width:700px){
  .nav{
    width:94%;
    min-height:82px;
    grid-template-columns:1fr;
    gap:8px;
    padding:10px 0 12px
  }

  .brand{
    justify-content:center;
    font-size:1rem
  }

  .rabbit{font-size:1.65rem}

  .nav nav{
    width:100%;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px 3px;
    font-size:.67rem
  }

  .nav nav a{
    white-space:normal;
    line-height:1.15;
    min-height:28px;
    display:flex;
    align-items:center;
    justify-content:center
  }

  .nav-button{padding:6px 3px!important}

  .menu{display:none}

  .hero{
    padding:55px 0
  }

  .page-hero{padding:55px 0}

  .hero h1,
  .page-hero h1{
    font-size:2.5rem
  }

  .actions{flex-direction:column}

  .actions .button{
    width:100%;
    text-align:center
  }

  .steps{grid-template-columns:1fr}

  .guide-download{
    flex-direction:column;
    align-items:flex-start
  }

  .teacher-home-grid{
    grid-template-columns:1fr;
    gap:35px
  }

  .teacher-photo{max-width:260px}

  .download-intro{
    flex-direction:column;
    align-items:flex-start
  }

  .video-library{padding:45px 0 60px}

  .video-links{grid-template-columns:1fr}

  .video-number{min-width:105px}

  .current-video h2{font-size:1.65rem}

  .video-nav{
    grid-template-columns:1fr 1fr;
    gap:10px
  }

  .video-nav-current{
    grid-column:1 / -1;
    grid-row:1
  }

  .video-nav-button{font-size:.75rem}
}

/* Small phones */
@media(max-width:520px){
  .hero{padding:55px 0}

  .page-hero{padding:55px 0}

  .hero h1,
  .page-hero h1{
    font-size:2.5rem
  }

  .footer-grid{grid-template-columns:1fr}

  .format-list{width:100%}

  .format-list a{flex:1}

  .book-placeholder{
    box-shadow:8px 10px 0 #c9bea7
  }
}

@media(max-width:430px){
  .nav nav{
    font-size:.61rem;
    gap:3px 2px
  }

  .nav nav a{padding:4px 1px}

  .video-nav-button{
    padding:10px 9px;
    font-size:.68rem
  }
}