/* _base.css */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --forest:#1a3d2b;--forest2:#2d5a3f;
  --gold:#c9903a;--gold2:#e8b96a;
  --cream:#f7f4ef;--cream2:#ede9e1;
  --text:#1a1a18;--muted:#5a5a52;
}
body{font-family:'Source Sans 3',sans-serif;background:var(--cream);color:var(--text);animation:fadeIn .35s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
body.fade-out{animation:fadeOut .25s ease forwards}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}

/* NAV */
nav{
  position:sticky;top:0;z-index:300;height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;background:var(--forest);
  border-bottom:1px solid rgba(201,144,58,.22);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{
  width:38px;height:38px;border-radius:9px;
  background:rgba(201,144,58,.18);border:1px solid rgba(201,144,58,.4);
  display:flex;align-items:center;justify-content:center;
  font-family:'Noto Serif SC',serif;font-size:17px;color:var(--gold);font-weight:600;
}
.brand-words .en{font-family:'Playfair Display',serif;font-size:14px;color:#fff;letter-spacing:.5px}
.brand-words .zh{font-size:10px;color:rgba(255,255,255,.45);letter-spacing:3px}
.nav-links{display:flex;gap:32px;list-style:none}
.nav-links a{
  color:rgba(255,255,255,.7);text-decoration:none;font-size:13px;letter-spacing:.8px;
  padding-bottom:3px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.nav-links a:hover,.nav-links a.on{color:var(--gold2);border-bottom-color:var(--gold)}

/* Hamburger */
.hamburger{
  display:none;flex-direction:column;gap:5px;cursor:pointer;
  background:none;border:none;padding:6px;
}
.hamburger span{display:block;width:24px;height:2px;background:rgba(255,255,255,.85);border-radius:2px;transition:transform .3s,opacity .3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile drawer */
.mobile-menu{
  display:none;position:sticky;top:64px;z-index:299;
  background:rgba(18,40,26,0.98);
  border-bottom:1px solid rgba(201,144,58,.15);
  padding:4px 0 12px;
  transform:translateY(-6px);opacity:0;
  transition:transform .25s ease,opacity .25s ease;
  pointer-events:none;
}
.mobile-menu.open{transform:translateY(0);opacity:1;pointer-events:all}
.mobile-menu a{
  display:block;padding:13px 24px;
  color:rgba(255,255,255,.75);text-decoration:none;font-size:15px;
  border-bottom:1px solid rgba(255,255,255,.05);transition:color .2s,background .2s;
}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu a:hover{color:var(--gold2);background:rgba(201,144,58,.06)}
.mobile-menu a.on{color:var(--gold2)}

/* PAGE HEADER */
.page-hd{
  background:var(--forest);padding:56px 48px 48px;
  position:relative;overflow:hidden;
}
.page-hd::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(to right,transparent,var(--gold),transparent);
}
.breadcrumb{font-size:12px;color:rgba(255,255,255,.38);letter-spacing:1px;margin-bottom:12px}
.breadcrumb a{color:rgba(255,255,255,.38);text-decoration:none}
.breadcrumb a:hover{color:var(--gold2)}
.page-hd h1{font-family:'Noto Serif SC',serif;font-size:clamp(28px,5vw,40px);font-weight:600;color:#fff;margin-bottom:8px}
.page-hd .sub{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(14px,2.5vw,18px);color:var(--gold2)}

/* BODY */
.body{max-width:960px;margin:0 auto;padding:56px 40px 100px}
.sec-tag{font-size:11px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;margin-bottom:6px}
.sec-h{font-family:'Noto Serif SC',serif;font-size:clamp(20px,3.5vw,24px);color:var(--forest);margin-bottom:4px}
.sec-s{font-family:'Playfair Display',serif;font-style:italic;font-size:14px;color:var(--muted);margin-bottom:28px}

/* FOOTER */
footer{
  background:var(--forest);padding:28px 48px;
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(201,144,58,.15);
}
.ft-brand{font-family:'Playfair Display',serif;font-size:14px;color:rgba(255,255,255,.5)}
.ft-motto{font-size:12px;color:rgba(255,255,255,.28);letter-spacing:1px}

/* MOBILE */
@media(max-width:768px){
  nav{padding:0 20px}
  .nav-links{display:none}
  .hamburger{display:flex}
  .mobile-menu{display:block}
  .page-hd{padding:40px 20px 36px}
  .body{padding:36px 20px 80px}
  footer{padding:24px 20px;flex-direction:column;gap:8px;text-align:center}
  .ft-motto{display:none}
}