/* =================================================================
   永乐教育 · SITE-WIDE STYLES
   shared tokens, nav, footer, buttons, common headers
   ================================================================= */

:root{
  /* sky gradient */
  --night-0:#050B22;
  --night-1:#0E1F4D;
  --night-2:#1A3A7A;
  --blue:#2D4FAF;
  --blue-2:#5984D6;
  --blue-soft:#8FAAD5;
  --dusk:#B59FBE;
  --sunset:#E89970;
  --sunset-2:#F2B58F;
  --dawn:#FAD0B0;

  /* surfaces */
  --paper:#F7F2E8;
  --paper-2:#EFE7D5;
  --paper-3:#E4DBC1;

  /* ink (cool) */
  --ink:#0E1218;
  --ink-soft:#2A3142;
  --ink-mute:#5C6577;
  --line-soft:rgba(14,18,24,.10);
  --line:rgba(14,18,24,.16);

  /* accents */
  --accent:#4A75E5;
  --accent-deep:#1E3A7A;
  --gold:#D4A858;
  --gold-light:#E8C97C;
  --red:#C8472C;

  /* fonts */
  --serif:'Noto Serif SC','Source Han Serif SC',serif;
  --sans:'Noto Sans SC','Source Han Sans SC','PingFang SC','Inter',sans-serif;
  --latin:'Cormorant Garamond','Georgia',serif;
  --mono:'JetBrains Mono','SFMono-Regular',monospace;
  --hand-cn:'Ma Shan Zheng',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;
  line-height:1.75;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#fff}

/* =================================================================
   NAV · pill, frosted (consistent across all pages)
   ================================================================= */
nav.top{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:100;
  display:flex;align-items:center;gap:8px;
  padding:6px 8px 6px 20px;
  background:rgba(14,24,55,.45);
  backdrop-filter:saturate(180%) blur(30px);
  -webkit-backdrop-filter:saturate(180%) blur(30px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:99px;
  box-shadow:0 8px 30px -10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
nav.top.on-paper{
  background:rgba(255,255,255,.7);
  border:1px solid rgba(14,18,24,.1);
  box-shadow:0 8px 30px -10px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6);
}
nav.top.on-paper .wordmark{color:var(--ink)}
nav.top.on-paper .wordmark .by{color:var(--ink-mute)}
nav.top.on-paper ul a{color:var(--ink-soft)}
nav.top.on-paper ul a:hover, nav.top.on-paper ul a.current{color:var(--ink);background:rgba(14,18,24,.06)}
nav.top.on-paper .wordmark{border-right-color:rgba(14,18,24,.15)}

nav .wordmark{
  display:flex;align-items:baseline;gap:10px;
  font-size:14px;color:#fff;font-weight:500;letter-spacing:.04em;
  padding-right:14px;margin-right:6px;
  border-right:1px solid rgba(255,255,255,.16);
  transition:color .25s ease, border-right-color .25s ease;
}
nav .wordmark .by{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  color:rgba(255,255,255,.55);font-weight:400;text-transform:uppercase;
  transition:color .25s ease;
}
nav ul{display:flex;list-style:none;gap:2px;align-items:center}
nav ul a{
  font-size:13px;color:rgba(255,255,255,.72);font-weight:400;
  padding:8px 14px;border-radius:99px;transition:all .25s ease;letter-spacing:.04em;
}
nav ul a:hover{background:rgba(255,255,255,.1);color:#fff}
nav ul a.current{background:rgba(255,255,255,.14);color:#fff}
nav .nav-cta{
  font-size:13px;padding:9px 18px;background:var(--accent);color:#fff;
  border-radius:99px;font-weight:500;letter-spacing:.04em;
  transition:background .25s ease;
}
nav .nav-cta:hover{background:#3D60BD}

/* =================================================================
   COMMON BUTTONS
   ================================================================= */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:99px;
  font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:.05em;
  transition:all .25s ease;cursor:pointer;border:none;
}
.btn.light{background:#fff;color:var(--ink)}
.btn.light:hover{background:var(--gold-light)}
.btn.frosted{
  background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.btn.frosted:hover{background:rgba(255,255,255,.22)}
.btn.accent{background:var(--accent);color:#fff}
.btn.accent:hover{background:#3D60BD}
.btn.ink{background:var(--ink);color:#fff}
.btn.ink:hover{background:var(--accent-deep)}
.btn.gold{background:var(--gold);color:var(--ink)}
.btn.gold:hover{background:var(--gold-light)}
.btn.ghost-ink{border:1px solid var(--ink);color:var(--ink);background:transparent}
.btn.ghost-ink:hover{background:var(--ink);color:#fff}

/* =================================================================
   COMMON SECTION HEADERS
   ================================================================= */
.chap-head{max-width:1400px;margin:0 auto 70px;position:relative;z-index:5}
.chap-num{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--accent);margin-bottom:24px;text-transform:uppercase;font-weight:400}
.chap-num::before{content:"";display:inline-block;width:32px;height:1px;background:currentColor;vertical-align:middle;margin-right:14px;opacity:.7}
h2.chap-title{font-family:var(--sans);font-weight:500;font-size:clamp(38px,5.2vw,84px);line-height:1.1;letter-spacing:.01em;color:var(--ink);max-width:1100px}
h2.chap-title em{font-style:normal;color:var(--accent);font-weight:600}
.chap-sub{font-size:16px;color:var(--ink-soft);max-width:680px;margin-top:32px;line-height:1.9;font-weight:400}

/* =================================================================
   PAGE HERO (subpages)
   ================================================================= */
.page-hero{
  position:relative;
  background:linear-gradient(180deg,
    var(--night-1) 0%,
    var(--night-2) 30%,
    var(--blue) 60%,
    var(--blue-2) 85%,
    var(--blue-soft) 100%
  );
  color:#fff;padding:200px 8vw 120px;overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1, 0 0 0 0 1, 0 0 0 0 1, 0 0 0 0.15 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;opacity:.4;
}
.page-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 28%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 32% 55%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 58% 18%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 80% 65%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 92% 32%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 45% 80%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 18% 88%, rgba(255,255,255,.55), transparent);
}
.page-hero-inner{position:relative;z-index:5;max-width:1400px;margin:0 auto}
.page-hero .crumb{
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.65);
  text-transform:uppercase;margin-bottom:30px;display:flex;align-items:center;gap:14px;
}
.page-hero .crumb a{color:rgba(255,255,255,.55);transition:color .2s}
.page-hero .crumb a:hover{color:#fff}
.page-hero .crumb .sep{color:rgba(255,255,255,.35)}
.page-hero h1{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(48px,7vw,118px);line-height:1.05;letter-spacing:.01em;
  color:#fff;margin-bottom:30px;max-width:1100px;
}
.page-hero h1 em{font-style:normal;color:var(--gold-light);font-weight:600}
.page-hero .lede{
  font-family:var(--serif);font-size:clamp(17px,1.5vw,22px);line-height:1.85;
  color:rgba(255,255,255,.82);max-width:680px;
}
.page-hero .lede em{font-style:normal;color:#fff;font-weight:500}

/* =================================================================
   COMMON SECTION CONTAINERS
   ================================================================= */
section.chap{position:relative;padding:140px 8vw}
section.chap.paper{background:var(--paper);color:var(--ink)}
section.chap.paper-2{background:var(--paper-2);color:var(--ink)}
section.chap.ink{background:var(--ink);color:#fff}
section.chap.ink .chap-title{color:#fff}
section.chap.ink .chap-num{color:var(--gold-light)}
section.chap.ink .chap-sub{color:rgba(255,255,255,.75)}

/* =================================================================
   FOOTER (consistent across all pages)
   ================================================================= */
footer.site{background:var(--night-0);color:rgba(255,255,255,.6);padding:90px 8vw 40px;position:relative}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:50px;max-width:1400px;margin:0 auto}
.ft-brand h4{font-family:var(--sans);font-weight:500;font-size:26px;color:#fff;margin-bottom:6px;line-height:1;letter-spacing:.04em}
.ft-brand .by{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.5);text-transform:uppercase;margin-bottom:24px;display:inline-block}
.ft-brand .by strong{color:var(--gold-light);font-weight:400}
.ft-brand p{font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.75;max-width:340px}
.ft-col h5{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--gold-light);text-transform:uppercase;margin-bottom:22px;font-weight:400}
.ft-col ul{list-style:none;display:grid;gap:11px}
.ft-col a{font-size:13.5px;color:rgba(255,255,255,.65);transition:color .2s;line-height:1.5}
.ft-col a:hover{color:var(--gold-light)}
.ft-col a small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:rgba(255,255,255,.35);margin-top:3px;text-transform:uppercase}
.ft-bottom{
  max-width:1400px;margin:60px auto 0;padding-top:30px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.4);text-transform:uppercase;
}
.ft-bottom .tech{color:var(--gold-light)}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:1024px){
  .ft-grid{grid-template-columns:1fr 1fr;gap:30px}
  .page-hero{padding:160px 24px 100px}
  section.chap{padding:90px 24px}
}
@media (max-width:680px){
  nav.top{padding:5px 6px 5px 14px;max-width:calc(100vw - 24px)}
  nav ul{display:none}
  nav .wordmark{padding-right:8px;margin-right:4px;font-size:13px}
  .ft-grid{grid-template-columns:1fr;gap:24px}
  .page-hero{padding:140px 22px 80px}
  section.chap{padding:80px 22px}
  body{overflow-x:hidden}
}

/* reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}