/* === ENGLISH BAC - SHARED STYLES === */
:root{
  --bg:#0a0d12;
  --bg2:#0f131a;
  --bg3:#141a24;
  --navy:#1a3a5c;
  --navy-dark:#0f2540;
  --navy-light:#2a5180;
  --teal:#1e4d52;
  --teal-light:#4a8580;
  --copper:#b87333;
  --copper-soft:#a36529;
  --copper-light:#d49152;
  --cream:#e8e0d0;
  --cream-dim:#a89e88;
  --cream-faint:#6a6358;
  --line:#1f2a36;
  --red:#7a2424;
  --red-light:#9a3434;
  --purple:#3a2a52;
  --purple-light:#6b4a90;
  --green:#2d5a3d;
  --green-light:#4a8560;
  --gold:#c9a961;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:'Inter',sans-serif;
  line-height:1.75;
  padding:40px 20px;
  min-height:100vh;
  background-image:
    radial-gradient(ellipse at top right, rgba(42,81,128,0.12), transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(184,115,51,0.06), transparent 50%);
}
.wrapper{max-width:1100px;margin:0 auto}

/* HERO */
.hero{
  background:linear-gradient(135deg,#0a141f 0%, #112842 60%, #1a3a5c 100%);
  border:1px solid var(--navy-light);
  border-radius:14px;
  padding:32px 36px;
  margin-bottom:26px;
  text-align:center;
}
.hero.navy{background:linear-gradient(135deg,#0a141f 0%, #112842 60%, #1a3a5c 100%);border-color:var(--navy-light)}
.hero.copper{background:linear-gradient(135deg,#0a141f 0%, #2a1a0c 60%, #52341a 100%);border-color:var(--copper-light)}
.hero.teal{background:linear-gradient(135deg,#0a141f 0%, #14302e 60%, #1e4d52 100%);border-color:var(--teal-light)}
.hero.green{background:linear-gradient(135deg,#0a141f 0%, #1a2a1c 60%, #2d5a3d 100%);border-color:var(--green-light)}
.hero.purple{background:linear-gradient(135deg,#0a141f 0%, #1c1428 60%, #3a2a52 100%);border-color:var(--purple-light)}
.hero.red{background:linear-gradient(135deg,#0a141f 0%, #2a1414 60%, #7a2424 100%);border-color:var(--red-light)}

.hero .label{
  color:var(--copper-light);
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:14px;
  margin-bottom:6px;
  letter-spacing:1px;
}
.hero h1{
  font-family:'Playfair Display',serif;
  font-size:32px;
  color:var(--cream);
  margin-bottom:10px;
  font-weight:700;
}
.hero p{
  color:var(--cream-dim);
  font-size:15px;
  max-width:780px;
  margin:0 auto;
  line-height:1.85;
}
.hero p em{color:var(--copper-light);font-style:italic}
.hero p b{color:var(--copper)}

/* CARDS */
.card{
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:26px 30px;
  margin-bottom:22px;
}
.card-title{
  display:flex;align-items:center;gap:12px;
  padding-bottom:14px;margin-bottom:18px;
  border-bottom:1px solid var(--navy-dark);
}
.card-title .num{
  background:var(--navy);
  color:var(--cream);
  width:34px;height:34px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:16px;
  flex-shrink:0;
  border:1px solid var(--navy-light);
}
.card-title h2{
  font-family:'Playfair Display',serif;
  color:var(--copper);
  font-size:21px;
  font-weight:700;
}
.card h3{
  font-family:'Playfair Display',serif;
  color:var(--copper-light);
  font-size:17px;
  font-weight:600;
  margin:14px 0 8px;
}
.card p{margin-bottom:10px;font-size:14.5px}
.card p b{color:var(--copper-light)}
.card p em{color:var(--cream);font-style:italic}

/* DEFINITION CARDS GRID */
.def-grid{
  display:grid;
  gap:14px;
  margin:14px 0;
}
.def-grid.two-cols{grid-template-columns:1fr 1fr}
.def-grid.three-cols{grid-template-columns:repeat(3,1fr)}
.def-card{
  background:#0a0d12;
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px 18px;
}
.def-card .ico{
  display:inline-block;
  color:var(--copper);
  font-size:24px;
  margin-bottom:6px;
}
.def-card h3{
  font-family:'Playfair Display',serif;
  color:var(--copper);
  font-size:15px;
  margin:0 0 6px;
  font-weight:600;
}
.def-card .latin{
  color:var(--cream-dim);
  font-style:italic;
  font-size:13px;
  font-family:'Cormorant Garamond',serif;
  margin-bottom:8px;
}
.def-card p{
  color:var(--cream);
  font-size:13.5px;
  line-height:1.75;
}
.def-card p b{color:var(--copper-light)}

/* REFORM / KEY BOX */
.reform{
  background:linear-gradient(135deg, #14302e, #0f131a);
  border:1px solid var(--teal-light);
  border-left:4px solid var(--teal-light);
  border-radius:8px;
  padding:14px 18px;
  margin:16px 0;
}
.reform .label{
  color:var(--teal-light);
  font-family:'Playfair Display',serif;
  font-size:14.5px;
  font-weight:700;
  margin-bottom:6px;
}
.reform p{
  font-size:14px;
  color:var(--cream);
  line-height:1.85;
}
.reform p b{color:var(--teal-light)}
.reform p em{color:var(--copper-light);font-style:italic}

/* RULE BOX (grammar rules, etc.) */
.rule{
  background:#0a0d12;
  border:1px solid var(--navy);
  border-left:4px solid var(--copper);
  border-radius:8px;
  padding:14px 18px;
  margin:12px 0;
}
.rule .rule-title{
  color:var(--copper);
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:15px;
  margin-bottom:8px;
}
.rule .formula{
  background:#0f131a;
  border:1px dashed var(--copper-soft);
  padding:8px 12px;
  border-radius:6px;
  font-family:'Inter',sans-serif;
  font-size:13.5px;
  color:var(--cream);
  margin:8px 0;
  letter-spacing:0.3px;
}
.rule .formula b{color:var(--copper-light)}
.rule .example{
  background:rgba(184,115,51,0.06);
  border-left:2px solid var(--copper-soft);
  padding:6px 12px;
  margin:6px 0;
  font-size:13.5px;
  color:var(--cream);
}
.rule .example em{color:var(--copper-light);font-style:italic}
.rule .example b{color:var(--copper)}

/* EXAMPLE BOX */
.example-box{
  background:rgba(74,133,96,0.08);
  border:1px solid var(--green);
  border-radius:8px;
  padding:14px 18px;
  margin:12px 0;
}
.example-box .label{
  color:#6ba577;
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:14px;
  margin-bottom:8px;
}
.example-box p{
  font-size:14px;
  color:var(--cream);
  margin-bottom:6px;
}
.example-box p b{color:#6ba577}

/* TABLES */
.table-wrap{overflow-x:auto;margin:12px 0}
table{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
  background:#0a0d12;
  border-radius:8px;
  overflow:hidden;
}
table th{
  background:var(--navy);
  color:var(--cream);
  padding:10px 12px;
  text-align:left;
  font-family:'Playfair Display',serif;
  font-size:14px;
  border-bottom:1px solid var(--navy-light);
}
table td{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  color:var(--cream);
  vertical-align:top;
}
table tr:hover td{background:rgba(184,115,51,0.04)}
table td b{color:var(--copper-light)}
table td em{color:var(--cream-dim);font-style:italic}

/* LISTS */
.bullet-list{
  list-style:none;
  margin:10px 0;
  padding:0;
}
.bullet-list li{
  position:relative;
  padding:6px 0 6px 22px;
  color:var(--cream);
  font-size:14.5px;
  line-height:1.7;
}
.bullet-list li::before{
  content:"❖";
  position:absolute;
  left:0;
  top:6px;
  color:var(--copper-soft);
  font-size:12px;
}
.bullet-list li b{color:var(--copper-light)}
.bullet-list li em{color:var(--cream-dim);font-style:italic}

/* NUMBERED LIST */
.num-list{
  list-style:none;
  counter-reset:n;
  margin:10px 0;
  padding:0;
}
.num-list li{
  counter-increment:n;
  position:relative;
  padding:8px 0 8px 36px;
  color:var(--cream);
  font-size:14.5px;
  line-height:1.7;
}
.num-list li::before{
  content:counter(n);
  position:absolute;
  left:0;
  top:6px;
  background:var(--navy);
  color:var(--copper-light);
  width:24px;height:24px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Playfair Display',serif;
  font-size:12px;
  font-weight:700;
  border:1px solid var(--navy-light);
}

/* EXERCISE BOX */
.exercise{
  background:#0a0d12;
  border:1px solid var(--line);
  border-left:3px solid var(--copper);
  border-radius:8px;
  padding:16px 20px;
  margin:14px 0;
}
.exercise .ex-title{
  color:var(--copper);
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:15px;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px dashed var(--navy-dark);
}
.exercise .instructions{
  color:var(--cream-dim);
  font-style:italic;
  font-size:13.5px;
  margin-bottom:10px;
}
.exercise ol{
  list-style:none;
  counter-reset:item;
  padding:0;
}
.exercise ol li{
  counter-increment:item;
  position:relative;
  padding:6px 0 6px 28px;
  color:var(--cream);
  font-size:14px;
  line-height:1.7;
}
.exercise ol li::before{
  content:counter(item)".";
  position:absolute;
  left:0;
  top:6px;
  color:var(--copper-light);
  font-weight:700;
  font-family:'Playfair Display',serif;
}
.exercise .blank{
  display:inline-block;
  border-bottom:1.5px dotted var(--copper-soft);
  min-width:80px;
  height:16px;
  margin:0 4px;
}
.exercise .answer{
  color:var(--green-light);
  font-weight:700;
  border-bottom:1.5px solid var(--green-light);
  padding:0 4px;
}

/* TEXT READING BOX */
.reading-text{
  background:#0a0d12;
  border:1px solid var(--copper-soft);
  border-radius:10px;
  padding:22px 28px;
  margin:16px 0;
  position:relative;
}
.reading-text::before{
  content:"❝";
  position:absolute;
  top:6px;left:14px;
  font-family:'Playfair Display',serif;
  font-size:36px;
  color:var(--copper-soft);
  opacity:0.4;
}
.reading-text p{
  color:var(--cream);
  font-size:14.5px;
  line-height:1.85;
  margin-bottom:10px;
  font-family:'Inter',sans-serif;
}
.reading-text .para-num{
  color:var(--copper);
  font-weight:700;
  font-family:'Playfair Display',serif;
  margin-right:4px;
}
.reading-text .underline{
  text-decoration:underline;
  text-decoration-color:var(--copper-soft);
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
}
.reading-text .source{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  color:var(--cream-dim);
  font-size:13px;
  text-align:right;
  margin-top:8px;
}

/* COMPARISON BOX (two columns) */
.compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:14px 0;
}
.compare .col{
  background:#0a0d12;
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px 16px;
}
.compare .col h3{
  font-family:'Playfair Display',serif;
  font-size:15px;
  margin-bottom:8px;
  font-weight:600;
}
.compare .col.left{border-left:3px solid var(--navy-light)}
.compare .col.left h3{color:var(--navy-light)}
.compare .col.right{border-left:3px solid var(--copper-light)}
.compare .col.right h3{color:var(--copper-light)}
.compare .col p{font-size:13.5px;line-height:1.75}
.compare .col p b{color:var(--copper-light)}
.compare .col p em{color:var(--cream-dim);font-style:italic}

/* SYNTHESIS BOX */
.synthesis{
  background:linear-gradient(135deg,#0a141f,#112842);
  border:2px solid var(--copper);
  border-radius:12px;
  padding:24px 28px;
  margin-top:22px;
}
.synthesis h2{
  font-family:'Playfair Display',serif;
  color:var(--copper);
  font-size:20px;
  margin-bottom:14px;
  text-align:center;
  font-weight:700;
}
.synthesis .key-point{
  background:#0a0d12;
  border-left:3px solid var(--copper);
  padding:12px 16px;
  margin-bottom:10px;
  border-radius:6px;
}
.synthesis .key-point b{
  color:var(--copper);
  display:block;
  margin-bottom:4px;
  font-family:'Playfair Display',serif;
  font-weight:600;
}
.synthesis .key-point p{font-size:13.5px;color:var(--cream);line-height:1.85}

/* EXAM TIP */
.exam-tip{
  background:linear-gradient(135deg, #2a1a0c, #0a141f);
  border:1px solid var(--copper-soft);
  border-radius:10px;
  padding:18px 22px;
  margin-top:18px;
}
.exam-tip .title{
  color:var(--copper);
  font-family:'Playfair Display',serif;
  font-size:16px;
  font-weight:700;
  margin-bottom:10px;
}
.exam-tip p{
  font-size:13.5px;
  color:var(--cream);
  line-height:1.85;
}
.exam-tip b{color:var(--copper-light)}
.exam-tip em{color:var(--copper);font-style:italic}

/* DIALOGUE BOX */
.dialogue{
  background:#0a0d12;
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px 16px;
  margin:10px 0;
}
.dialogue .turn{
  padding:6px 0;
  font-size:14px;
  color:var(--cream);
  line-height:1.7;
}
.dialogue .speaker{
  color:var(--copper);
  font-weight:700;
  font-family:'Playfair Display',serif;
  margin-right:6px;
}
.dialogue .turn b{color:var(--copper-light)}

/* FOOTER */
.footer-note{
  text-align:center;
  color:var(--cream-faint);
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:13px;
  margin-top:30px;
  padding:10px;
}

/* RESPONSIVE */
@media(max-width:820px){
  .def-grid.two-cols, .def-grid.three-cols{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr}
  .hero h1{font-size:22px}
  body{padding:20px 10px}
  .card{padding:18px 16px}
  .reading-text{padding:18px 18px 18px 22px}
  table th, table td{padding:8px 10px;font-size:12.5px}
}

/* NAV LINKS - top fixed */
.nav-top{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-bottom:20px;
}
.nav-top a{
  background:rgba(10,13,18,0.95);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--copper);
  color:var(--copper);
  padding:7px 14px;
  border-radius:8px;
  text-decoration:none;
  font-family:'Playfair Display',serif;
  font-size:13px;
  font-weight:700;
  transition:all 0.2s;
}
.nav-top a:hover{background:var(--copper);color:#0a0d12}
.nav-top a.green{border-color:var(--green-light);color:#6ba577}
.nav-top a.green:hover{background:var(--green-light);color:#0a0d12}
.nav-top a.copper{border-color:var(--copper-soft);color:var(--copper-soft)}
.nav-top a.copper:hover{background:var(--copper-soft);color:#0a0d12}