:root{
  --brand-red:#b2171f;
  --text:#1f1f1f;
  --muted:#666;
  --maxw:980px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--text);
  background:#fff;
  font-size:16px;
  line-height:1.7;
  font-family: "Noto Sans TC","PingFang TC","Microsoft JhengHei","Heiti TC",
               "Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
}
.container{max-width:var(--maxw); margin:0 auto; padding:0 16px}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;padding:8px 12px;background:#000;color:#fff}
.site-header .top-border,
.site-header .bottom-border{height:3px;background:var(--brand-red)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:150px;height:auto;object-fit:contain}
.brand-text{font-size:28px;color:var(--brand-red);font-weight:800;letter-spacing:1px}
/* Hamburger button */
.menu-toggle{display:none;position:relative;width:40px;height:32px;border:0;background:transparent;cursor:pointer}
.menu-toggle .bar{position:absolute;left:6px;right:6px;height:3px;background:var(--brand-red);border-radius:2px;transition:transform .25s ease, opacity .2s}
.menu-toggle .bar:nth-child(1){top:7px}
.menu-toggle .bar:nth-child(2){top:14px}
.menu-toggle .bar:nth-child(3){top:21px}
.menu-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;flex-wrap:wrap}
.site-nav a{text-decoration:none;color:var(--brand-red);font-weight:600;letter-spacing:.5px;font-style: italic}
.site-nav a:hover,.site-nav a:focus{opacity:.8;text-decoration:underline}

.hero{margin:24px auto}
.hero-img{width:100%;height:auto;border:0;display:block}

.about{margin:18px auto 56px}
.about h2{font-size:22px;margin:12px 0;color:#000;font-weight:800;letter-spacing:.5px}
.about p{margin:10px 0;color:#222}

.site-footer{border-top:1px solid #eee;padding:24px 0;color:var(--muted);font-size:14px;text-align:left}
.site-footer p{margin:0}

/* Responsive nav */
@media (max-width: 900px){
  .header-inner{gap:12px}
}
@media (max-width: 768px){
  .brand-text{font-size:22px}
  .menu-toggle{display:inline-block}
  .site-nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid #eee}
  .site-header{position:sticky;top:0;background:#fff;z-index:100}
  .site-nav ul{flex-direction:column;gap:0;padding:8px 16px}
  .site-nav li{padding:10px 0;border-bottom:1px solid #f0f0f0}
  .site-nav li:last-child{border-bottom:0}
  /* collapsed by default */
  .site-nav[hidden]{display:none}
}