:root{
  --ink:#202625;
  --muted:#66706e;
  --line:#d9dfdc;
  --paper:#fbfbf8;
  --soft:#f1f4f1;
  --white:#fff;
  --teal:#0c4d51;
  --gold:#a47a49;
  --serif:"Noto Serif TC",Georgia,serif;
  --sans:"Noto Sans TC",Arial,sans-serif;
  --site-header-height:64px;
  --site-logo-width:205px;
  --site-logo-height:48px;
  --header:var(--site-header-height);
  --page-gutter:clamp(18px,8vw,160px);
  --site-focus:0 0 0 3px rgba(12,77,81,.24);
}

.shell{
  width:calc(100% - (var(--page-gutter) * 2));
  max-width:none;
  margin-inline:auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  height:var(--site-header-height);
  border-bottom:1px solid rgba(217,223,220,.9);
  background:rgba(251,251,248,.94);
  backdrop-filter:blur(14px);
  transition:height .2s,box-shadow .2s;
}

.site-header.is-compact{
  box-shadow:0 8px 28px rgba(18,42,40,.07);
}

.nav-shell{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.site-brand,
.brand{
  width:var(--site-logo-width);
  flex:none;
  text-decoration:none;
}

.site-brand img,
.brand img{
  width:100%;
  height:var(--site-logo-height);
  object-fit:contain;
  object-position:left center;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:23px;
  font-family:var(--sans);
  font-size:.78rem;
}

.site-nav a{
  color:inherit;
  text-decoration:none;
  white-space:nowrap;
}

.site-nav a:hover,
.site-nav a:focus-visible{
  color:var(--teal);
}

.site-nav .lang-switch{
  padding-left:17px;
  border-left:1px solid var(--line);
  color:var(--teal);
}

.nav-toggle{
  display:none;
  width:42px;
  height:42px;
  border:1px solid var(--line);
  background:var(--white);
  place-content:center;
  gap:4px;
}

.nav-toggle span:not(.sr-only){
  display:block;
  width:19px;
  height:1px;
  background:var(--teal);
}

body.nav-open{overflow:hidden}

.footer-grid{
  grid-template-columns:minmax(0,1.8fr) repeat(3,minmax(0,1fr));
}

.footer-grid>*{min-width:0}

.site-header a:focus-visible,
.site-header button:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  box-shadow:var(--site-focus);
}

@media(max-width:1024px){
  .site-nav{gap:14px}
}

@media(max-width:900px){
  :root{--page-gutter:clamp(14px,4vw,32px)}
}

@media(max-width:768px){
  :root{--site-header-height:60px}
  :root{--site-logo-width:170px}
  .site-nav{
    position:fixed;
    inset:var(--site-header-height) 0 auto 0;
    display:none;
    align-items:stretch;
    padding:18px 20px 25px;
    border-bottom:1px solid var(--line);
    background:var(--paper);
    box-shadow:0 18px 50px rgba(18,42,40,.1);
  }
  .site-nav.is-open{display:grid}
  .site-nav a{
    padding:10px 0;
    border-bottom:1px solid var(--line);
    font-size:.86rem;
  }
  .site-nav .lang-switch{
    padding-left:0;
    border-left:0;
  }
  .nav-toggle{display:grid}
}

@media(max-width:560px){
  :root{--page-gutter:14px}
}

@media(prefers-reduced-motion:reduce){
  .site-header{transition:none}
}