/* =====================================================
   Taal13A Clean Typography CSS
   版本：无补丁整合版
   用途：字体系统 / 顶部导航 / 轮动条 / 首页 Hero / 数据区 / 栏目编号
===================================================== */


/* =====================================================
   0. Font Import
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Electrolize&family=Inter:wght@400;500;600;700;800;900&family=Noto+Serif+SC:wght@500;700;800;900&display=swap');


/* =====================================================
   1. Variables
===================================================== */

:root{
  --font-display: "Noto Serif SC", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  --font-number: "Electrolize", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
   --font-logo: "Inter", "Helvetica Neue", Arial, sans-serif;
  --black: #17130f;
  --gray: #6f7069;
  --gray-light: #8f8f8a;
  --blue: #0F5E8C;
  --blue-light: #A9D7EC;
  --yellow: #F4DF7A;
  --cream: #FFFDF8;
}


/* =====================================================
   2. Global Typography
===================================================== */

body{
  font-family: var(--font-body) !important;
}

button,
input,
select,
textarea,
label{
  font-family: var(--font-body) !important;
}

.hero h1,
.stit,
.co-hero h1,
.shop-hero h1,
.shop-page-hero h1,
.ep-hero h1,
.ph2 h1,
.about-quote h1,
.about-bio-inner h2,
.contact-title,
#pg-contact .contact-title{
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  letter-spacing: -0.055em !important;
}

.stit{
  font-size: clamp(42px, 5vw, 72px) !important;
  line-height: 1.08 !important;
}

.ssub,
.fd,
.cdesc,
.scard-desc,
.pd-desc,
.about-bio-text,
.fa,
.tbio,
.legal-card p,
.legal-card li{
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* =====================================================
   3. Header / Toolbar — CLEAN FINAL
===================================================== */

/* 注册按钮 */
.register-btn,
.cta{
  border-radius:0 !important;
  background:var(--blue) !important;
  color:#fff !important;
  border:2px solid var(--blue) !important;
  height:42px !important;
  padding:0 18px !important;
  font-family:var(--font-body) !important;
  font-size:14px !important;
  font-weight:900 !important;
  box-shadow:none !important;
}

.register-btn:hover,
.cta:hover{
  background:#0B486D !important;
  border-color:#0B486D !important;
  transform:none !important;
}

/* 电脑端顶部导航 */
@media(min-width:769px){

  .tb{
    height:68px !important;
    padding:0 24px !important;
    background:var(--cream) !important;
    border-bottom:1px solid var(--black) !important;
    box-shadow:none !important;
    overflow:hidden !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:24px !important;
  }

  .logo-main{
    height:42px !important;
    width:auto !important;
    max-width:190px !important;
    flex:0 0 auto !important;
  }

  .nc{
    flex:1 1 auto !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:34px !important;
    overflow:hidden !important;
  }

  .nl{
    font-family:var(--font-body) !important;
    font-size:18px !important;
    line-height:1 !important;
    font-weight:950 !important;
    letter-spacing:-.02em !important;
    color:var(--black) !important;

    padding:0 !important;
    margin:0 !important;
    border:none !important;
    background:transparent !important;
    white-space:nowrap !important;

    display:inline-flex !important;
    align-items:center !important;
  }

  /* 关键：彻底取消旧的伪元素导航 */
  .nl::before,
  .nl::after{
    display:none !important;
    content:none !important;
  }

  .nl:hover,
  .nl.on{
    color:var(--blue) !important;
  }

  .nr{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:12px !important;
  }

  .lang-icon-btn svg{
    width:21px !important;
    height:21px !important;
  }

  .lang-text,
  #auth-btns .login-link,
  #auth-btns .register-btn{
    font-size:14px !important;
    font-weight:900 !important;
  }

  #auth-btns .register-btn{
    height:42px !important;
    padding:0 16px !important;
  }

  .news-ticker{
    top:68px !important;
  }
}

/* 中等宽度电脑：再缩一点，避免挤爆 */
@media(min-width:769px) and (max-width:1280px){

  .tb{
    padding:0 18px !important;
    gap:16px !important;
  }

  .nc{
    gap:24px !important;
  }

  .nl{
    font-size:16px !important;
  }

  .logo-main{
    height:38px !important;
    max-width:170px !important;
  }

  .lang-text,
  #auth-btns .login-link,
  #auth-btns .register-btn{
    font-size:13px !important;
  }

  #auth-btns .register-btn{
    height:38px !important;
    padding:0 14px !important;
  }
}

/* =====================================================
   4. News Ticker
===================================================== */

.news-ticker{
  height: 52px !important;
  background: var(--yellow) !important;
  border-top: 1px solid var(--black) !important;
  border-bottom: 1px solid var(--black) !important;
  box-shadow: none !important;
}

.news-title{
  font-family: var(--font-number) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  letter-spacing: .22em !important;
  color: var(--black) !important;
}

.news-item.news-single{
  padding: 0 28px !important;
}


/* =====================================================
   5. Mobile Fixed Header
===================================================== */

@media(max-width:700px){

  .tb{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: var(--cream) !important;
    border-bottom: 1px solid var(--black) !important;
    box-shadow: none !important;
  }

  .news-ticker{
    position: fixed !important;
    top: 92px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9998 !important;
    height: 36px !important;
    background: var(--yellow) !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--black) !important;
    box-shadow: none !important;
  }

  .news-title{
    font-size: 13px !important;
    letter-spacing: .18em !important;
  }

  body{
    padding-top: 128px !important;
  }

  .register-btn,
  .cta,
  .mobile-register,
  .m-register,
  .drawer .register-btn,
  .drawer .cta,
  .mobile-menu .register-btn,
  .mobile-menu .cta{
    border-radius: 0 !important;
    background: var(--blue) !important;
    color: #fff !important;
    border: 2px solid var(--blue) !important;
    box-shadow: none !important;
  }
}


/* =====================================================
   6. Home Hero
===================================================== */

.hero .hc{
  width: min(1120px, calc(100% - 64px)) !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 120px 0 70px !important;
  text-align: left !important;
}

.hero-kicker,
.hero .hero-kicker,
.hero .magazine-kicker,
.hero .section-kicker{
  font-family: var(--font-number) !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: rgba(20,20,20,.48) !important;
  margin: 0 0 14px 0 !important;
  text-align: left !important;
}

.magazine-hero-title,
.hero #hero-h1,
.hero h1{
  font-family: var(--font-display) !important;
  font-size: clamp(72px, 9vw, 142px) !important;
  line-height: .92 !important;
  font-weight: 900 !important;
  color: var(--black) !important;
  letter-spacing: -0.08em !important;
  margin: 0 0 44px 0 !important;
  text-align: left !important;
  max-width: 980px !important;
}

.title-blue-square{
  display: inline-block !important;
  width: .28em !important;
  height: .28em !important;
  background: var(--blue-light) !important;
  vertical-align: middle !important;
  margin: 0 .08em !important;
}

.hero-subtitle-main,
.hero .hero-lead{
  font-family: var(--font-display) !important;
  font-size: 26px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  color: var(--black) !important;
  margin: 0 0 24px 0 !important;
  text-align: left !important;
  max-width: 900px !important;
}

.hero-subtitle-muted,
.hero .hsub{
  font-family: var(--font-display) !important;
  font-size: 21px !important;
  line-height: 1.7 !important;
  font-weight: 500 !important;
  color: #666 !important;
  margin: 0 0 0 0 !important;
  text-align: left !important;
  max-width: 1050px !important;
}

.hero .hbtns,
.magazine-hero-actions{
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 22px !important;
  margin-top: 46px !important;
  margin-bottom: 58px !important;
}

.hero .hbtns button,
.hero .hbtns .hb1,
.hero .hbtns .hb2,
.magazine-hero-actions button{
  width: 230px !important;
  height: 58px !important;
  min-width: 230px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

.hero .hb1,
.hb1{
  background: var(--blue) !important;
  color: #fff !important;
  border: 1.5px solid var(--blue) !important;
}

.hero .hb2,
.hb2{
  background: rgba(255,255,255,.82) !important;
  color: var(--black) !important;
  border: 1.5px solid var(--black) !important;
}


/* =====================================================
   7. Home Stats
===================================================== */

.hero .hstats{
  width: 100% !important;
  max-width: 1040px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 34px !important;
  align-items: start !important;
  margin-top: 44px !important;
}

.hero .hstats > div{
  min-width: 0 !important;
  width: auto !important;
  padding: 0 !important;
  text-align: left !important;
  overflow: visible !important;
}

.hn,
.hero .hstats .hn{
  font-family: var(--font-number) !important;
  font-size: clamp(52px, 4.8vw, 74px) !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: -0.04em !important;
  white-space: nowrap !important;
  display: block !important;
  color: var(--black) !important;
}

.hl,
.hero .hstats .hl{
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: var(--black) !important;
  white-space: nowrap !important;
}

.hl::after,
.hero .hstats .hl::after{
  display: block !important;
  margin-top: 8px !important;
  font-family: var(--font-number) !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  letter-spacing: .28em !important;
  color: var(--gray) !important;
  white-space: nowrap !important;
}

.hstats > div:nth-child(1) .hl::after{
  content: "STUDENTEN";
}

.hstats > div:nth-child(2) .hl::after{
  content: "SLAGINGSPERCENTAGE";
}

.hstats > div:nth-child(3) .hl::after{
  content: "WEERGAVEN";
}

.hstats > div:nth-child(4) .hl::after{
  content: "TEVREDENHEID";
}


/* =====================================================
   8. Section Labels
===================================================== */

.eye{
  font-family: var(--font-number) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #7A7A74 !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
  margin-bottom: 1.2rem !important;
}

#pg-home .bg-sky .eye{
  font-size: 0 !important;
}

#pg-home .bg-sky .eye::before{
  content: "Nº 002 · WAAROM TAAL13A";
  font-family: var(--font-number) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #7A7A74 !important;
  letter-spacing: .28em !important;
}

#home-course-section .eye{
  font-size: 0 !important;
}

#home-course-section .eye::before{
  content: "Nº 003 · CURSUSSEN";
  font-family: var(--font-number) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #7A7A74 !important;
  letter-spacing: .28em !important;
}

#pg-home > .bg-sand .eye{
  font-size: 0 !important;
}

#pg-home > .bg-sand .eye::before{
  content: "Nº 004 · ERVARINGEN";
  font-family: var(--font-number) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #FCF8D8 !important;
  letter-spacing: .28em !important;
}


/* =====================================================
   9. Why Taal13A Cards
===================================================== */

.fcard .ficon::before,
.fcard:nth-child(1) .ficon::before,
.fcard:nth-child(2) .ficon::before,
.fcard:nth-child(3) .ficon::before,
.fcard:nth-child(4) .ficon::before{
  font-family: var(--font-number) !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  letter-spacing: -.02em !important;
}

#pg-home .bg-sky .ft{
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

#pg-home .bg-sky .ft::after{
  content: attr(data-nl);
  font-family: var(--font-number) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #9A9A94 !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}


/* =====================================================
   10. Mobile Hero Only
===================================================== */

@media(max-width:768px){

  .hero .hc{
    width: calc(100% - 52px) !important;
    max-width: none !important;
    margin-left: 26px !important;
    margin-right: 26px !important;
    padding: 78px 0 48px !important;
    text-align: left !important;
  }

  .hero-kicker,
  .hero .hero-kicker,
  .hero .magazine-kicker,
  .hero .section-kicker{
    font-size: 13px !important;
    line-height: 1.3 !important;
    letter-spacing: .18em !important;
    margin: 0 0 18px 0 !important;
    text-align: left !important;
  }

  .magazine-hero-title,
  .hero #hero-h1,
  .hero h1{
    font-size: clamp(54px, 16.5vw, 78px) !important;
    line-height: .98 !important;
    letter-spacing: -0.075em !important;
    margin: 0 0 48px 0 !important;
    text-align: left !important;
    max-width: 100% !important;
  }

  .hero-subtitle-main,
  .hero .hero-lead{
    font-size: 22px !important;
    line-height: 1.45 !important;
    margin: 0 0 24px 0 !important;
    text-align: left !important;
    max-width: 100% !important;
  }

  .hero-subtitle-muted,
  .hero .hsub{
    font-size: 18px !important;
    line-height: 1.9 !important;
    margin: 0 !important;
    text-align: left !important;
    max-width: 100% !important;
  }

  .hero .hbtns,
  .magazine-hero-actions{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    margin-top: 54px !important;
    margin-bottom: 132px !important;
  }

  .hero .hbtns button,
  .hero .hbtns .hb1,
  .hero .hbtns .hb2,
  .magazine-hero-actions button{
    width: 235px !important;
    min-width: 235px !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 18px !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    display: grid !important;
    grid-template-columns: 1fr 22px !important;
    column-gap: 12px !important;
    align-items: center !important;
    justify-items: stretch !important;

    font-family: var(--font-display) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-align: left !important;
  }

  .hero .hbtns .hb1::before{
    content: "查看适合我的课程" !important;
    font-size: 16px !important;
    justify-self: start !important;
  }

  .hero .hbtns .hb2::before{
    content: "获取学习资料" !important;
    font-size: 16px !important;
    justify-self: start !important;
  }

  .hero .hbtns .hb1::after,
  .hero .hbtns .hb2::after{
    content: "→" !important;
    font-size: 18px !important;
    justify-self: end !important;
    line-height: 1 !important;
  }

  .hero .hstats{
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 38px 26px !important;
    margin-top: 124px !important;
    padding-bottom: 46px !important;
  }

  .hero .hstats > div{
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
    text-align: left !important;
    overflow: visible !important;
  }

  .hero .hstats .hn{
    font-size: 42px !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    white-space: nowrap !important;
  }

  .hero .hstats .hl{
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .hero .hstats .hl::after{
    font-size: 12px !important;
    letter-spacing: .20em !important;
    white-space: nowrap !important;
  }

  .stit{
    font-size: 38px !important;
    line-height: 1.14 !important;
  }

  #pg-home .bg-sky .eye::before,
  #home-course-section .eye::before,
  #pg-home > .bg-sand .eye::before{
    font-size: 12px !important;
    letter-spacing: .22em !important;
  }

  #pg-home .bg-sky .ft{
    display: block !important;
  }

  #pg-home .bg-sky .ft::after{
    display: block !important;
    margin-top: 7px !important;
    font-size: 11px !important;
    letter-spacing: .24em !important;
  }

  #pg-home .bg-sky .fcard:nth-child(1) .ficon::before,
  #pg-home .bg-sky .fcard:nth-child(2) .ficon::before,
  #pg-home .bg-sky .fcard:nth-child(3) .ficon::before,
  #pg-home .bg-sky .fcard:nth-child(4) .ficon::before{
    font-size: 30px !important;
  }
}


/* =====================================================
   11. Extra Small Mobile
===================================================== */

@media(max-width:430px){

  .hero .hc{
    width: calc(100% - 50px) !important;
    margin-left: 25px !important;
    margin-right: 25px !important;
  }

  .magazine-hero-title,
  .hero #hero-h1,
  .hero h1{
    font-size: clamp(52px, 16vw, 72px) !important;
  }

  .hero .hbtns button,
  .hero .hbtns .hb1,
  .hero .hbtns .hb2{
    width: 235px !important;
    min-width: 235px !important;
    height: 50px !important;
  }

  .hero .hstats{
    gap: 36px 22px !important;
  }

  .hero .hstats .hn{
    font-size: 38px !important;
  }

  .hero .hstats .hl::after{
    font-size: 11px !important;
    letter-spacing: .18em !important;
  }
}

/* =====================================================
   HOME HERO MOBILE FINAL OVERRIDE
   只修首页手机端 Hero，不影响电脑端和其他页面
===================================================== */

@media(max-width:700px){

  /* 首页 Hero 高度不要被旧规则拉爆 */
  #pg-home .hero{
    height:auto !important;
    min-height:0 !important;
    padding:58px 0 42px !important;
    display:block !important;
    overflow:hidden !important;
  }

  /* 背景保持覆盖，但不要 fixed，避免手机端错位 */
  #pg-home .gfb{
    background-attachment:scroll !important;
    background-position:center center !important;
  }

  /* Hero 内容统一左边界 */
  #pg-home .hero .hc{
    width:auto !important;
    max-width:none !important;
    margin:0 24px !important;
    padding:0 !important;
    text-align:left !important;
  }

  /* 顶部编号 */
  #pg-home .hero-kicker{
    display:block !important;
    margin:0 0 28px !important;
    padding:0 !important;
    text-align:left !important;
    font-size:12px !important;
    line-height:1.3 !important;
    letter-spacing:.16em !important;
    color:rgba(20,20,20,.46) !important;
  }

  /* 手机端主标题：保留海报感，但不要过大 */
  #pg-home .magazine-hero-title,
  #pg-home .hero #hero-h1,
  #pg-home .hero h1{
    width:100% !important;
    max-width:none !important;
    margin:0 0 34px !important;
    padding:0 !important;

    text-align:left !important;
    font-size:48px !important;
    line-height:1.02 !important;
    letter-spacing:-.075em !important;
    font-weight:900 !important;
    color:#171717 !important;
    white-space:normal !important;
  }

  /* 蓝色小方块 */
  #pg-home .title-blue-square{
    display:inline-block !important;
    width:.24em !important;
    height:.24em !important;
    margin:0 .08em !important;
    vertical-align:middle !important;
    background:#A9D7EC !important;
  }

  /* 黑色副标题 */
  #pg-home .hero-subtitle-main{
    width:100% !important;
    max-width:none !important;
    margin:0 0 20px !important;
    padding:0 !important;

    text-align:left !important;
    font-size:21px !important;
    line-height:1.48 !important;
    font-weight:800 !important;
    color:#171717 !important;
  }

  /* 灰色说明 */
  #pg-home .hero-subtitle-muted,
  #pg-home .hero .hsub{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;

    text-align:left !important;
    font-size:16px !important;
    line-height:1.85 !important;
    font-weight:500 !important;
    color:#686868 !important;
  }

  /* 按钮区域：不要被推太远 */
  #pg-home .hero .hbtns,
  #pg-home .magazine-hero-actions{
    width:100% !important;
    margin:38px 0 70px !important;
    padding:0 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:14px !important;
  }

  /* 按钮尺寸统一，左对齐 */
  #pg-home .hero .hb1,
  #pg-home .hero .hb2{
    width:238px !important;
    min-width:238px !important;
    max-width:238px !important;
    height:52px !important;
    min-height:52px !important;
    padding:0 18px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    border-radius:0 !important;
    box-shadow:none !important;
    font-size:0 !important;
    line-height:1 !important;
    font-weight:900 !important;
    text-align:left !important;
  }

  #pg-home .hero .hb1{
    background:#0F5E8C !important;
    color:#fff !important;
    border:1.5px solid #0F5E8C !important;
  }

  #pg-home .hero .hb2{
    background:rgba(255,255,255,.78) !important;
    color:#171717 !important;
    border:1.5px solid #171717 !important;
  }

  /* 重新写按钮文字，避免原 HTML 里的箭头影响排版 */
  #pg-home .hero .hb1::before{
    content:"查看适合我的课程" !important;
    font-size:15px !important;
  }

  #pg-home .hero .hb2::before{
    content:"获取学习资料" !important;
    font-size:15px !important;
  }

  #pg-home .hero .hb1::after,
  #pg-home .hero .hb2::after{
    content:"→" !important;
    display:block !important;
    font-size:18px !important;
    line-height:1 !important;
    background:none !important;
    width:auto !important;
    height:auto !important;
    position:static !important;
    transform:none !important;
  }

  /* 统计区：两列，紧凑，不再用 120px 硬推 */
  #pg-home .hero .hstats{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 0 20px !important;
    border-top:none !important;

    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    column-gap:28px !important;
    row-gap:42px !important;
    justify-items:start !important;
    text-align:left !important;
  }

  #pg-home .hero .hstats > div{
    width:auto !important;
    min-width:0 !important;
    padding:0 !important;
    border-top:1px solid rgba(130,130,130,.26) !important;
    padding-top:12px !important;
    text-align:left !important;
    align-items:flex-start !important;
  }

  #pg-home .hero .hn{
    font-size:42px !important;
    line-height:1 !important;
    letter-spacing:-.04em !important;
    font-weight:400 !important;
    color:#171717 !important;
    white-space:nowrap !important;
    text-align:left !important;
  }

  #pg-home .hero .hl{
    margin-top:8px !important;
    font-size:13px !important;
    line-height:1.2 !important;
    font-weight:900 !important;
    color:#171717 !important;
    white-space:nowrap !important;
    text-align:left !important;
  }

  #pg-home .hero .hl::after{
    display:block !important;
    margin-top:8px !important;
    font-size:11px !important;
    line-height:1.2 !important;
    letter-spacing:.18em !important;
    color:#7A7A74 !important;
    white-space:nowrap !important;
    text-align:left !important;
  }
}


/* 小屏 iPhone 再稍微压缩 */
@media(max-width:430px){

  #pg-home .hero .hc{
    margin-left:22px !important;
    margin-right:22px !important;
  }

  #pg-home .magazine-hero-title,
  #pg-home .hero #hero-h1,
  #pg-home .hero h1{
    font-size:45px !important;
    line-height:1.03 !important;
  }

  #pg-home .hero-subtitle-main{
    font-size:20px !important;
  }

  #pg-home .hero-subtitle-muted,
  #pg-home .hero .hsub{
    font-size:15.5px !important;
  }

  #pg-home .hero .hb1,
  #pg-home .hero .hb2{
    width:232px !important;
    min-width:232px !important;
    max-width:232px !important;
  }

  #pg-home .hero .hn{
    font-size:38px !important;
  }

  #pg-home .hero .hl::after{
    font-size:10px !important;
    letter-spacing:.15em !important;
  }
}

/* === HOME COURSE CTA LINK === */

.home-course-cta{
  margin-top:34px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.home-course-cta-link{
  border:none;
  background:transparent;
  color:#171717;
  font-family:inherit;
  font-size:16px;
  font-weight:950;
  padding:8px 4px 9px;
  cursor:pointer;
  position:relative;
  line-height:1.4;
}

.home-course-cta-link::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:100%;
  height:3px;
  background:#E96F3C;
  transform:translateX(-50%);
  transition:width .18s ease, background .18s ease;
}

.home-course-cta-link:hover{
  color:#0F5E8C;
}

.home-course-cta-link:hover::after{
  width:112%;
  background:#0F5E8C;
}

@media(max-width:700px){
  .home-course-cta{
    margin-top:28px;
    justify-content:flex-start;
  }

  .home-course-cta-link{
    font-size:14.5px;
    text-align:left;
    padding-left:0;
    padding-right:0;
  }
}
/* === NEWS BAR ARROW ICON === */

.news-item.news-single{
  gap:14px !important;
}

.news-arrow{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:24px !important;
  line-height:1 !important;
  font-weight:500 !important;
  color:#171717 !important;
  transform:translateY(-1px) !important;
  transition:transform .18s ease, color .18s ease;
}

.news-item.news-single:hover .news-arrow{
  transform:translate(3px,-4px) !important;
  color:#0F5E8C !important;
}

@media(max-width:700px){
  .news-item.news-single{
    gap:9px !important;
  }

  .news-arrow{
    font-size:18px !important;
  }
}

/* =====================================================
   HOME TEXT CTA CLEAN FINAL
   了解老师 / 咨询课程 统一样式
===================================================== */

.why-teacher-cta,
.home-course-cta{
  margin-top:42px !important;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
}

.why-teacher-btn,
.home-course-cta-link{
  border:none !important;
  outline:none !important;
  background:transparent !important;
  color:#171717 !important;
  font-family:var(--font-body) !important;
  font-size:16px !important;
  line-height:1.45 !important;
  font-weight:950 !important;
  padding:8px 0 9px !important;
  margin:0 !important;
  cursor:pointer !important;
  position:relative !important;
  box-shadow:none !important;
  border-radius:0 !important;
  text-align:left !important;
}

.why-teacher-btn::after,
.home-course-cta-link::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:3px !important;
  background:#E96F3C !important;
  transform:none !important;
  transition:width .18s ease, background .18s ease !important;
}

.why-teacher-btn:hover,
.home-course-cta-link:hover{
  color:#0F5E8C !important;
}

.why-teacher-btn:hover::after,
.home-course-cta-link:hover::after{
  width:112% !important;
  background:#0F5E8C !important;
}

@media(max-width:700px){

  .why-teacher-cta,
  .home-course-cta{
    margin-top:30px !important;
    padding-left:24px !important;
    padding-right:24px !important;
    justify-content:flex-start !important;
  }

  .why-teacher-btn,
  .home-course-cta-link{
    font-size:14.5px !important;
    line-height:1.55 !important;
    max-width:92% !important;
  }
}

/* =====================================================
   NAV MUSEUM STYLE RESTORE
   中文黑字 + 小号灰色荷兰语，无斜杠
===================================================== */

@media(min-width:769px){

  .nc{
    gap:48px !important;
  }

  .nl{
    font-size:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:none !important;
    background:transparent !important;
    white-space:nowrap !important;

    display:inline-flex !important;
    align-items:baseline !important;
    gap:14px !important;

    color:#171717 !important;
    font-family:var(--font-body) !important;
    font-weight:900 !important;
    letter-spacing:0 !important;
  }

  .nl::before{
    display:inline-block !important;
    font-family:"Noto Serif SC","Noto Sans SC",serif !important;
    font-size:22px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:-.04em !important;
    color:#171717 !important;
  }

  .nl::after{
    display:inline-block !important;
    position:static !important;
    width:auto !important;
    height:auto !important;
    background:none !important;
    transform:none !important;

    font-family:var(--font-number) !important;
    font-size:14px !important;
    line-height:1 !important;
    font-weight:400 !important;
    letter-spacing:.34em !important;
    color:#8f8f8a !important;
    text-transform:uppercase !important;
  }

  .nl[data-zh="主页 / Home"]::before{
    content:"主页" !important;
  }

  .nl[data-zh="主页 / Home"]::after{
    content:"HOME" !important;
  }

  .nl[data-zh="课程 / Cursussen"]::before{
    content:"课程" !important;
  }

  .nl[data-zh="课程 / Cursussen"]::after{
    content:"CURSUSSEN" !important;
  }

  .nl[data-zh="书店 / Winkel"]::before{
    content:"书店" !important;
  }

  .nl[data-zh="书店 / Winkel"]::after{
    content:"WINKEL" !important;
  }

  .nl[data-zh="关于 / Over ons"]::before{
    content:"关于" !important;
  }

  .nl[data-zh="关于 / Over ons"]::after{
    content:"OVER ONS" !important;
  }

  .nl[data-zh="联系 / Contact"]::before{
    content:"联系" !important;
  }

  .nl[data-zh="联系 / Contact"]::after{
    content:"CONTACT" !important;
  }

  .nl:hover::before,
  .nl.on::before{
    color:#171717 !important;
  }

  .nl:hover::after,
  .nl.on::after{
    color:#8f8f8a !important;
    background:none !important;
    width:auto !important;
  }
}


/* 窄一点的电脑屏幕：防止导航挤爆 */
@media(min-width:769px) and (max-width:1280px){

  .nc{
    gap:30px !important;
  }

  .nl{
    gap:10px !important;
  }

  .nl::before{
    font-size:19px !important;
  }

  .nl::after{
    font-size:12px !important;
    letter-spacing:.28em !important;
  }
}

/* =====================================================
   FINAL RESPONSIVE MENU
   1. 隐藏中荷切换
   2. 宽度不够时，把导航和登录注册收进 menu
   ===================================================== */


/* 先隐藏中荷切换功能 */
.lang-icon-btn,
.language-tool,
.lang-text{
  display:none !important;
}


/* menu 按钮默认隐藏，大屏不显示 */
.menu-toggle-btn{
  display:none;
  border:none;
  background:transparent;
  color:#171717;
  padding:0;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}

.menu-toggle-btn .material-symbols-outlined{
  font-family:"Material Symbols Outlined";
  font-size:32px;
  font-weight:400;
  line-height:1;
}


/* 菜单遮罩 */
.site-menu-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.28);
  z-index:99998;
}

.site-menu-backdrop.open{
  display:block;
}


/* 右侧菜单面板 */
.site-menu-panel{
  position:fixed;
  top:0;
  right:0;
  width:min(380px, 86vw);
  height:100vh;
  background:#FFFDF8;
  z-index:99999;
  transform:translateX(105%);
  transition:transform .22s ease;
  border-left:1px solid #E6DED2;
  padding:26px 28px 32px;
  display:flex;
  flex-direction:column;
}

.site-menu-panel.open{
  transform:translateX(0);
}

.site-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:24px;
  border-bottom:1px solid #E6DED2;
}

.site-menu-title{
  font-family:var(--font-logo) !important;
  font-size:27px !important;
  font-weight:900 !important;
  line-height:1 !important;
  color:#171717 !important;
  letter-spacing:-.055em !important;
}

.site-menu-close{
  border:none;
  background:transparent;
  color:#171717;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  padding:0;
}

.site-menu-links{
  display:flex;
  flex-direction:column;
  gap:0;
  padding-top:22px;
}

.site-menu-links button{
  border:none;
  background:transparent;
  padding:18px 0;
  text-align:left;
  display:flex;
  align-items:baseline;
  gap:14px;
  cursor:pointer;
  border-bottom:1px solid rgba(230,222,210,.72);
}

.site-menu-links button span{
  font-family:var(--font-display, "Noto Serif SC", serif);
  font-size:30px;
  line-height:1.1;
  font-weight:900;
  color:#171717;
  letter-spacing:-.06em;
}

.site-menu-links button em{
  font-family:var(--font-number, "Electrolize", sans-serif);
  font-style:normal;
  font-size:14px;
  font-weight:400;
  color:#8f8f8a;
  letter-spacing:.28em;
  text-transform:uppercase;
}

.site-menu-links button:hover span{
  color:#0F5E8C;
}

.site-menu-actions{
  margin-top:auto;
  padding-top:24px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.site-menu-actions button{
  height:46px;
  border:1.5px solid #171717;
  background:transparent;
  color:#171717;
  font-size:15px;
  font-weight:950;
  cursor:pointer;
}

.site-menu-actions .site-menu-register{
  background:#0F5E8C;
  border-color:#0F5E8C;
  color:#fff;
}


/* 屏幕开始挤的时候：隐藏导航和登录注册，只显示 menu */
@media(max-width:1180px){

  .tb{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    height:68px !important;
    padding:0 18px !important;
  }

  .logo-main{
    height:42px !important;
    flex-shrink:0 !important;
  }

  .nc,
  #auth-btns,
  #user-btns{
    display:none !important;
  }

  .nr{
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:0 !important;
  }

  .menu-toggle-btn{
    display:inline-flex !important;
  }

  .news-ticker{
    top:68px !important;
  }
}


/* 手机端也使用同一个 menu */
@media(max-width:700px){

  body{
    padding-top:104px !important;
  }

  .tb{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:9999 !important;
    height:68px !important;
    min-height:68px !important;
    padding:0 18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    background:#FFFDF8 !important;
    border-bottom:1px solid #171717 !important;
  }

  .logo-main{
    height:40px !important;
  }

  .nc,
  #auth-btns,
  #user-btns,
  .lang-icon-btn,
  .language-tool,
  .lang-text{
    display:none !important;
  }

  .menu-toggle-btn{
    display:inline-flex !important;
  }

  .news-ticker{
    position:fixed !important;
    top:68px !important;
    height:36px !important;
    z-index:9998 !important;
  }

  .site-menu-panel{
    width:86vw;
    padding:24px 24px 30px;
  }

  .site-menu-links button span{
    font-size:28px;
  }

  .site-menu-links button em{
    font-size:13px;
    letter-spacing:.24em;
  }
}

/* =====================================================
   DESKTOP NARROW HEADER FIX — FINAL
   电脑窄屏：保留登录状态逻辑，只收起中间导航
===================================================== */

@media(min-width:701px) and (max-width:1180px){

  .tb{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    height:68px !important;
    padding:0 18px !important;
  }

  .logo-main{
    height:42px !important;
    flex-shrink:0 !important;
  }

  /* 中间导航收进菜单 */
  .nc{
    display:none !important;
  }

  /* 右侧区域继续显示 */
  .nr{
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:16px !important;
  }

  /*
    关键修正：
    不要强行同时显示 auth 和 user。
    只允许“没有被隐藏”的那个显示。
  */
  /* 默认：两个都不要由 typography.css 强行决定显示 */
#auth-btns.hidden,
#user-btns.hidden,
#auth-btns[hidden],
#user-btns[hidden]{
  display:none !important;
}

/* 只调整已经显示出来的按钮样式，不负责登录逻辑 */
#auth-btns,
#user-btns{
  align-items:center !important;
  gap:12px !important;
}

  #auth-btns.hidden,
  #user-btns.hidden,
  #auth-btns[hidden],
  #user-btns[hidden]{
    display:none !important;
  }

  /* menu 按钮显示 */
  .menu-toggle-btn{
    display:inline-flex !important;
    width:42px !important;
    height:42px !important;
    padding:0 !important;
    border:none !important;
    background:transparent !important;
    color:#171717 !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    line-height:1 !important;
    flex-shrink:0 !important;
  }

  /* 隐藏“目录”文字 */
  .menu-toggle-btn span:not(.material-symbols-outlined),
  .menu-toggle-btn .menu-text,
  .menu-toggle-btn .menu-label{
    display:none !important;
  }

  /* 如果原本有 material icon，就显示三条线 */
  .menu-toggle-btn .material-symbols-outlined{
    display:block !important;
    font-family:"Material Symbols Outlined" !important;
    font-size:34px !important;
    line-height:1 !important;
    color:#171717 !important;
  }

  /*
    备用方案：
    如果你的按钮里没有真正的三条线 icon，
    这里强行生成一个 ☰，避免按钮透明看不到。
  */
  .menu-toggle-btn::before{
    content:"☰" !important;
    display:block !important;
    font-family:Arial, sans-serif !important;
    font-size:32px !important;
    line-height:1 !important;
    font-weight:400 !important;
    color:#171717 !important;
  }

  .menu-toggle-btn .material-symbols-outlined + *{
    display:none !important;
  }

  .news-ticker{
    top:68px !important;
  }
}