/* =============================================
   Utopian Studies — Main Stylesheet
   ============================================= */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --gold:#C9A84C;
  --gold-light:#E8D5A0;
  --gold-dark:#8A6E2F;
  --ink:#1A1612;
  --ink-mid:#3D3328;
  --ink-soft:#6B5E4E;
  --parchment:#FAF6EE;
  --parchment-dark:#F0E9D8;
  --parchment-border:#DDD0B8;
  --white:#FFFEF9;
}

html{scroll-behavior:smooth}

body{
  background:var(--parchment);
  font-family:'Crimson Pro',Georgia,serif;
  font-weight:300;
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
  font-size:17px;
}

/* ---- NAVIGATION ---- */
nav{
  background:var(--ink);
  padding:0 3rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:1px solid var(--gold-dark);
}

.nav-brand{
  font-family:'Playfair Display',serif;
  font-size:1rem;
  color:var(--gold-light);
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:1.1rem 0;
  font-weight:400;
  text-decoration:none;
  white-space:nowrap;
}

.nav-links{
  display:flex;
  gap:0;
  list-style:none;
}

.nav-links li a{
  display:block;
  padding:1.1rem 1.2rem;
  font-family:'Crimson Pro',serif;
  font-size:0.9rem;
  letter-spacing:0.08em;
  color:var(--parchment-border);
  text-decoration:none;
  text-transform:uppercase;
  transition:color 0.2s,background 0.2s;
  white-space:nowrap;
}

.nav-links li a:hover{
  color:var(--gold-light);
  background:rgba(201,168,76,0.08);
}

.nav-links li a.active{
  color:var(--gold);
  border-bottom:2px solid var(--gold);
}

.nav-enroll{
  background:rgba(201,168,76,0.15);
  color:var(--gold) !important;
}

.nav-enroll:hover{
  background:rgba(201,168,76,0.25) !important;
}

/* Mobile nav toggle */
.nav-toggle{
  display:none;
  background:none;
  border:1px solid rgba(201,168,76,0.3);
  color:var(--gold);
  font-size:1.2rem;
  padding:0.4rem 0.7rem;
  cursor:pointer;
}

/* ---- HERO ---- */
.hero{
  min-height:82vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  background:var(--ink);
}

.hero-bg-pattern{
  position:absolute;
  inset:0;
  opacity:0.04;
  background-image:
    repeating-linear-gradient(45deg,var(--gold) 0,var(--gold) 1px,transparent 0,transparent 50%),
    repeating-linear-gradient(-45deg,var(--gold) 0,var(--gold) 1px,transparent 0,transparent 50%);
  background-size:40px 40px;
}

.hero-ornament{
  position:absolute;
  top:50%;
  right:8%;
  transform:translateY(-50%);
  width:340px;
  height:340px;
  border:1px solid rgba(201,168,76,0.15);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.hero-ornament::before{
  content:'';
  position:absolute;
  width:280px;
  height:280px;
  border:1px solid rgba(201,168,76,0.1);
  border-radius:50%;
}

.hero-ornament::after{
  content:'✦';
  font-size:5rem;
  color:rgba(201,168,76,0.18);
  line-height:1;
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:660px;
  padding:5rem 3rem 5rem 4rem;
}

.hero-eyebrow{
  font-family:'Crimson Pro',serif;
  font-size:0.8rem;
  letter-spacing:0.3em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:1.4rem;
  display:flex;
  align-items:center;
  gap:1rem;
}

.hero-eyebrow::before{
  content:'';
  display:inline-block;
  width:40px;
  height:1px;
  background:var(--gold);
  flex-shrink:0;
}

.hero-amharic{
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-size:1.4rem;
  color:var(--gold-light);
  margin-bottom:0.6rem;
  opacity:0.7;
  line-height:1.4;
}

.hero-title{
  font-family:'Playfair Display',serif;
  font-size:3.4rem;
  font-weight:400;
  color:var(--white);
  line-height:1.15;
  margin-bottom:1.6rem;
  letter-spacing:-0.01em;
}

.hero-title em{
  font-style:italic;
  color:var(--gold-light);
}

.hero-desc{
  font-size:1.15rem;
  color:rgba(250,246,238,0.65);
  line-height:1.8;
  margin-bottom:2.4rem;
  max-width:500px;
  font-weight:300;
}

.hero-author{
  font-size:0.9rem;
  color:var(--gold);
  letter-spacing:0.1em;
  margin-bottom:2.6rem;
  font-style:italic;
}

.hero-ctas{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

/* ---- BUTTONS ---- */
.btn-primary{
  background:var(--gold);
  color:var(--ink);
  border:none;
  padding:0.85rem 2.2rem;
  font-family:'Crimson Pro',serif;
  font-size:0.95rem;
  font-weight:500;
  letter-spacing:0.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background 0.2s,transform 0.15s;
  text-decoration:none;
  display:inline-block;
}

.btn-primary:hover{background:var(--gold-light);transform:translateY(-1px)}

.btn-outline{
  background:transparent;
  color:var(--parchment-border);
  border:1px solid rgba(201,168,76,0.35);
  padding:0.85rem 2.2rem;
  font-family:'Crimson Pro',serif;
  font-size:0.95rem;
  font-weight:400;
  letter-spacing:0.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color 0.2s,color 0.2s,transform 0.15s;
  text-decoration:none;
  display:inline-block;
}

.btn-outline:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px)}

.btn-dark{
  background:var(--ink);
  color:var(--gold-light);
  border:none;
  padding:0.95rem 2.8rem;
  font-family:'Crimson Pro',serif;
  font-size:1rem;
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background 0.2s,transform 0.15s;
  text-decoration:none;
  display:inline-block;
}

.btn-dark:hover{background:var(--ink-mid);transform:translateY(-1px)}

/* ---- DIVIDER ---- */
.gold-divider{
  height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold-light),var(--gold),transparent);
}

/* ---- SECTIONS ---- */
.section{
  padding:5rem 4rem;
  max-width:1100px;
  margin:0 auto;
}

.section-label{
  font-size:0.75rem;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--gold-dark);
  margin-bottom:0.9rem;
  display:flex;
  align-items:center;
  gap:0.8rem;
}

.section-label::before{content:'⬥';font-size:0.6rem}

.section-title{
  font-family:'Playfair Display',serif;
  font-size:2.2rem;
  font-weight:400;
  color:var(--ink);
  line-height:1.2;
  margin-bottom:1rem;
}

.section-title em{font-style:italic;color:var(--gold-dark)}

/* ---- LEARN GRID ---- */
.learn-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5px;
  margin-top:3rem;
  background:var(--parchment-border);
  border:1.5px solid var(--parchment-border);
}

.learn-card{
  background:var(--white);
  padding:2rem 2.2rem;
  transition:background 0.2s;
}

.learn-card:hover{background:var(--parchment)}

.learn-num{
  font-family:'Playfair Display',serif;
  font-size:3rem;
  font-weight:400;
  color:var(--parchment-dark);
  line-height:1;
  margin-bottom:1rem;
}

.learn-card h3{
  font-family:'Playfair Display',serif;
  font-size:1.15rem;
  font-weight:400;
  color:var(--ink-mid);
  margin-bottom:0.6rem;
  line-height:1.3;
}

.learn-card p{
  font-size:1rem;
  color:var(--ink-soft);
  line-height:1.7;
}

/* ---- FORMAT SECTION ---- */
.format-section{
  background:var(--parchment-dark);
  border-top:1px solid var(--parchment-border);
  border-bottom:1px solid var(--parchment-border);
}

.format-section-inner{padding-top:5rem;padding-bottom:5rem}

.format-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:3rem;
  border:1px solid var(--parchment-border);
  background:var(--parchment-border);
}

.format-card{
  background:var(--white);
  padding:2.4rem 2rem;
  text-align:center;
}

.format-icon{
  font-size:1.8rem;
  color:var(--gold-dark);
  margin-bottom:1.2rem;
}

.format-card h3{
  font-family:'Playfair Display',serif;
  font-size:1.1rem;
  font-weight:400;
  color:var(--ink-mid);
  margin-bottom:0.7rem;
}

.format-card p{
  font-size:0.95rem;
  color:var(--ink-soft);
  line-height:1.7;
}

/* ---- REGISTER SECTION ---- */
.register-section{
  background:var(--gold);
  padding:5rem 4rem;
  text-align:center;
}

.register-section h1,
.register-section h2{
  font-family:'Playfair Display',serif;
  font-size:2.4rem;
  font-weight:400;
  color:var(--ink);
  margin-bottom:0.8rem;
}

.register-section p{
  font-size:1.1rem;
  color:var(--ink-mid);
  margin-bottom:2.5rem;
  max-width:480px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.7;
}

/* ---- PAGE HERO DARK ---- */
.page-hero-dark{
  background:var(--ink);
  padding:4rem 0 3rem;
}

.page-hero-title{
  font-family:'Playfair Display',serif;
  font-size:2.8rem;
  font-weight:400;
  color:var(--white);
  line-height:1.2;
  margin-top:0.5rem;
}

.page-hero-desc{
  color:rgba(240,233,216,0.55);
  font-size:1.05rem;
  margin-top:1rem;
  max-width:560px;
  line-height:1.7;
}

/* ---- LESSONS ---- */
.lessons-bg{
  background:var(--ink);
  padding:4rem 0;
}

.lessons-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 4rem;
}

.what-youll-learn{
  margin-bottom:3rem;
}

.learn-bullets{
  list-style:none;
  margin-top:1.2rem;
  display:flex;
  flex-direction:column;
  gap:0.8rem;
}

.learn-bullets li{
  color:rgba(240,233,216,0.65);
  font-size:1.05rem;
  line-height:1.6;
  padding-left:1.5rem;
  position:relative;
}

.learn-bullets li::before{
  content:'⬥';
  position:absolute;
  left:0;
  color:var(--gold);
  font-size:0.7rem;
  top:0.35em;
}

.learn-bullets li em{color:var(--gold-light);font-style:italic}

.lessons-list{
  margin-top:1.5rem;
  display:flex;
  flex-direction:column;
  gap:0;
  border:1px solid rgba(201,168,76,0.2);
}

.lesson-row{
  display:flex;
  align-items:center;
  gap:2rem;
  padding:1.5rem 2rem;
  border-bottom:1px solid rgba(201,168,76,0.12);
  cursor:pointer;
  transition:background 0.2s;
  text-decoration:none;
  color:inherit;
}

.lesson-row:last-child{border-bottom:none}

.lesson-row:hover{background:rgba(201,168,76,0.07)}

.lesson-num{
  font-family:'Playfair Display',serif;
  font-size:1.6rem;
  font-weight:400;
  color:var(--gold);
  min-width:2.5rem;
  opacity:0.7;
}

.lesson-info{flex:1}

.lesson-title{
  font-family:'Playfair Display',serif;
  font-size:1.05rem;
  color:var(--parchment-border);
  font-weight:400;
  margin-bottom:0.2rem;
}

.lesson-sub{
  font-size:0.88rem;
  color:rgba(240,233,216,0.4);
  letter-spacing:0.05em;
}

.lesson-arrow{
  color:var(--gold);
  opacity:0.5;
  font-size:1.2rem;
  transition:opacity 0.2s,transform 0.2s;
}

.lesson-row:hover .lesson-arrow{opacity:1;transform:translateX(4px)}

.lesson-badge{
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:0.3rem 0.8rem;
  color:var(--gold);
  border:1px solid rgba(201,168,76,0.3);
}

/* ---- LESSON DETAIL PAGE ---- */
.lesson-breadcrumb{
  margin-bottom:1.5rem;
}

.lesson-breadcrumb a{
  color:rgba(240,233,216,0.45);
  font-size:0.9rem;
  letter-spacing:0.06em;
  text-decoration:none;
  text-transform:uppercase;
  transition:color 0.2s;
}

.lesson-breadcrumb a:hover{color:var(--gold)}

.lesson-body{padding-top:4rem;padding-bottom:4rem}

.video-placeholder{
  width:100%;
  aspect-ratio:16/9;
  background:var(--ink-mid);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:3rem;
  border:1px solid var(--parchment-border);
}

.video-placeholder iframe{
  width:100%;
  height:100%;
  border:none;
  display:block;
}

.video-inner{
  color:rgba(240,233,216,0.3);
  font-size:1.1rem;
  letter-spacing:0.1em;
  text-align:center;
}

.lesson-notes{
  max-width:720px;
  margin:0 auto;
}

.lesson-notes h2{
  font-family:'Playfair Display',serif;
  font-size:1.6rem;
  font-weight:400;
  color:var(--ink);
  margin-bottom:1.2rem;
  padding-bottom:0.8rem;
  border-bottom:1px solid var(--parchment-border);
}

.lesson-notes h3{
  font-family:'Playfair Display',serif;
  font-size:1.2rem;
  font-weight:400;
  color:var(--ink-mid);
  margin:2rem 0 0.8rem;
}

.lesson-notes p{
  font-size:1.05rem;
  color:var(--ink-soft);
  line-height:1.8;
  margin-bottom:1rem;
}

.lesson-notes ul,.lesson-notes ol{
  margin:0.5rem 0 1.2rem 1.5rem;
  color:var(--ink-soft);
  line-height:1.8;
  font-size:1.05rem;
}

.lesson-notes li{margin-bottom:0.4rem}

.lesson-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:720px;
  margin:3rem auto 0;
  padding-top:2rem;
  border-top:1px solid var(--parchment-border);
  gap:1rem;
}

/* ---- ABOUT PAGE ---- */
.about-layout{
  display:grid;
  grid-template-columns:1fr 1.8fr;
  gap:4rem;
  align-items:start;
  margin-top:3rem;
}

.about-portrait{
  background:var(--parchment-dark);
  border:1px solid var(--parchment-border);
  aspect-ratio:3/4;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
}

.portrait-initials{
  font-family:'Playfair Display',serif;
  font-size:4rem;
  color:var(--gold-dark);
  opacity:0.4;
}

.portrait-caption{
  font-size:0.85rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.about-body h3{
  font-family:'Playfair Display',serif;
  font-size:1.4rem;
  font-weight:400;
  color:var(--ink);
  margin:2rem 0 0.8rem;
}

.about-body h3:first-child{margin-top:0}

.about-body p{
  font-size:1.05rem;
  color:var(--ink-soft);
  line-height:1.8;
  margin-bottom:1rem;
}

.pub-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.pub-list li{
  padding:1.2rem;
  border-left:3px solid var(--gold);
  background:var(--parchment-dark);
}

.pub-title{
  font-family:'Playfair Display',serif;
  font-size:1rem;
  color:var(--ink-mid);
  margin-bottom:0.3rem;
}

.pub-meta{
  font-size:0.88rem;
  color:var(--ink-soft);
  font-style:italic;
}

/* ---- BOOKS PAGE ---- */
.books-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  margin-top:3rem;
}

.book-card{display:flex;flex-direction:column}

.book-cover{
  aspect-ratio:2/3;
  background:var(--ink-mid);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  margin-bottom:1rem;
  position:relative;
  overflow:hidden;
}

.book-cover::before{
  content:'';
  position:absolute;
  top:0;right:0;bottom:0;
  width:8px;
  background:rgba(201,168,76,0.25);
}

.book-cover-text{
  font-family:'Playfair Display',serif;
  font-size:1rem;
  font-style:italic;
  color:var(--gold-light);
  text-align:center;
  line-height:1.5;
  opacity:0.7;
}

.book-title{
  font-family:'Playfair Display',serif;
  font-size:1rem;
  color:var(--ink-mid);
  margin-bottom:0.3rem;
}

.book-meta{
  font-size:0.88rem;
  color:var(--ink-soft);
  font-style:italic;
}

/* ---- FOOTER ---- */
footer{
  background:var(--ink);
  padding:3rem 4rem;
  text-align:center;
  border-top:1px solid var(--gold-dark);
}

footer p{
  font-size:0.85rem;
  color:rgba(240,233,216,0.35);
  letter-spacing:0.06em;
  line-height:1.8;
}

.footer-brand{
  font-family:'Playfair Display',serif;
  font-size:1rem;
  color:var(--gold);
  margin-bottom:0.8rem;
  letter-spacing:0.12em;
}

/* ---- RESPONSIVE ---- */
@media(max-width:900px){
  nav{padding:0 1.5rem}
  .nav-toggle{display:block}
  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;right:0;
    background:var(--ink);
    flex-direction:column;
    border-top:1px solid var(--gold-dark);
    border-bottom:1px solid var(--gold-dark);
  }
  .nav-links.open{display:flex}
  .nav-links li a{padding:1rem 2rem;border-bottom:1px solid rgba(201,168,76,0.1)}
  .nav-links li a.active{border-bottom:1px solid rgba(201,168,76,0.1)}

  .hero{min-height:auto}
  .hero-content{padding:3.5rem 1.5rem}
  .hero-title{font-size:2.4rem}
  .hero-ornament{display:none}

  .section{padding:3.5rem 1.5rem}
  .learn-grid{grid-template-columns:1fr}
  .format-grid{grid-template-columns:1fr}
  .books-grid{grid-template-columns:repeat(2,1fr)}
  .about-layout{grid-template-columns:1fr}
  .about-portrait{max-width:280px;aspect-ratio:1/1}

  .lessons-inner{padding:0 1.5rem}
  .lesson-row{padding:1.2rem 1rem;gap:1rem}
  .lesson-badge{display:none}

  .register-section{padding:4rem 1.5rem}
  footer{padding:3rem 1.5rem}

  .page-hero-dark .section{padding:3rem 1.5rem}
  .page-hero-title{font-size:2rem}
  .lesson-body{padding:3rem 1.5rem}
  .lesson-nav{flex-direction:column;align-items:stretch;text-align:center}
}

@media(max-width:540px){
  .hero-title{font-size:2rem}
  .section-title{font-size:1.8rem}
  .books-grid{grid-template-columns:1fr}
  .hero-ctas{flex-direction:column}
  .hero-ctas .btn-primary,
  .hero-ctas .btn-outline{text-align:center}
}