:root{
    --radius: 2px;
    --maxw: 1920px;

    --text-color-black:#2c3c46;
    --text-color-grey:#808080;
    --gold:#cc9f5e;
    --gold-deep:#d9a962;
    --taupe:#d8cbaa;
    --green:#0e4436;
    --brown:#61401f;
    --maroon:#8e2430;
    --navy:#26333c;
    --black:#000000;
    --line-color-black: #b3b3b3;
    --line-color-gold: #cc9f5e;
    --background-color: #f7f5ed;
    --cream:#faf8f3;
    --cream-deap:#efe9dd;
    /*
    --heritage:#d3c0b0;
    --landmark-beige:#efe8dd;
    --victoria-harbour-blue:#37709e;
    --grey:#2c3c45;
    --landmark-gold:#d4a962;
    --central-red:#891F22;
    --magical-pink:#e8b4a7;
    --tram-green:#005746;
    --cencrete-gungle:#a7aeb4;
    --city-night:#1b1b1d;
    */
  }

  * {
      box-sizing:border-box;
  }
  html, body {
    margin:0;padding:0;
  }
  video {display:block;}
  
  body{
    background:var(--background-color);
    color:var(--text-color-black);
    font-size:14px;
    font-weight:400;
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body.tc { font-family: "Noto Sans TC", sans-serif;}
  body.sc { font-family: "Noto Sans SC", sans-serif;}

  img {
    display:block;max-width:100%;
  }
  
  a {
    color:inherit;text-decoration:none;
  }
  
  button {
    cursor:pointer;
  }

  .wrap {
    max-width: var(--maxw);
    margin:0 auto;
  }

  /* ---------- HEADER ---------- */
  body {padding-top:90px;}
  @media (min-width: 1170px){
    body {padding-top:97px;}
  }
  header {
    position: fixed;top:0;left:0;
    background:#f7f5ed;
    z-index:100;
    width:100%;
  }
  header .wrapper{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    padding: 16px 24px;    
    position:relative;
    z-index:40;
  }

  @media (min-width: 1170px){
    header .wrapper{grid-template-columns: auto 1fr;}
  }

  .menu-btn{
    background:none;border:none;display:flex;flex-direction:column;gap:5px;padding:4px;
  }
  .menu-btn span{width:24px;height:2px;background:var(--line-color-black);display:block;}

  .logo{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    line-height:1;
    min-width:116px;
    max-width:116px;
    margin:0 20px;
  }
  @media (min-width: 1170px){
    .logo{position: relative;top:-10px}
  }
  .home header .logo img {opacity:0;}
  .home.scroll header .logo img {opacity:1;}

  .lang {display:flex;gap:16px;align-items:center;font-size:13px;letter-spacing:0.04em; justify-content: end; }
  .lang-btn{
    display:flex;gap:16px;align-items:center;font-size:13px;line-height:1;
   
  }

  .lang-btn::before{
    content:" ";
    display:block;
    background:var(--line-color-black);
    width:1px;height:20px;
  }
  
  .lang-btn a.active{
    color:var(--gold-deep);font-weight:600;
  }
  
  nav.desktop-nav{
    display:none;
    gap:15px;
    font-size:13px;line-height:1;
    letter-spacing:0.1em;
    font-weight:500;
    border-width:0 1px 0 0;
  }

  body.en nav.desktop-nav{
    font-size:13px;
    letter-spacing:0;
    align-items: center;
  }

   @media (min-width: 1170px){
    header .wrapper{
      padding: 16px 127px;    
    }

    nav.desktop-nav{
      display:flex;
    }

    .menu-btn{display:none;}
    .logo .main{font-size:30px;}
  }


  nav.desktop-nav a{text-align:center;position:relative;padding-top:4px;padding-bottom:4px;white-space:nowrap;color:#2c3c46;text-transform: uppercase;}
  nav.desktop-nav a.active::after{
    content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--green);
  }

  /* mobile drawer */
  .drawer{
    position:fixed;inset:0;background:rgba(14,68,54,0.97);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
    transform:translateY(-100%);transition:transform .35s ease;z-index:150;
  }
  .drawer.open{transform:translateY(0);}
  .drawer a{color:#f2ede2;font-size:20px;letter-spacing:0.08em;font-weight:500;text-transform: uppercase;}
  .drawer-close{position:absolute;top:20px;right:24px;background:none;border:none;color:#f2ede2;font-size:28px;}


  @media (min-width: 1170px){
    header .wrapper{
      padding:24px 84px 14px;max-width:1920px;margin:0 auto;
    }
  }
  
  .footnotes{
    max-width:1500px;margin:14px auto 0;
    text-align:right;font-size:10.5px;color:var(--ink-soft);line-height:1.8;
  }

  .footer-band{
    margin-top:70px;
    padding:44px 24px;
    text-align:center;
    color:#005746;
  }
  .footer-band p { font-size:12px;}
  .footer-band a {font-weight:bold;color:#005746;text-decoration: underline;}
  .footer-band p.licence {color:var(--black)}

  @media (min-width: 1170px){
    .footer-band p { font-size:14px;}
  }
  
  .footer-logo {margin-bottom:18px;}
  .footer-logo img {margin:0 auto;}
  .footer-band p {max-width:900px;margin:6px auto;}

  .desktop {display:none}

  @media (min-width: 1170px){
    .mobile {display:none}
    .desktop {display:block}
  }

.bold {font-weight:bold;}