/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Noto Sans SC','PingFang SC',sans-serif;line-height:1.6;color:#1a1a1a;background:#fff;-webkit-font-smoothing:antialiased}
a{color:#1a4a3a;text-decoration:none;transition:color 0.2s}
a:hover{color:#d4a843}
ul,ol{list-style:none}
img{max-width:100%;display:block}
button{cursor:pointer;border:none;background:none;font:inherit}

/* CSS Variables */
:root{
  --c-bg:#fff;
  --c-brand:#1a4a3a;
  --c-accent:#d4a843;
  --c-text:#1a1a1a;
  --c-text-secondary:#4a4a4a;
  --c-bg-light:#f2f2f2;
  --c-border:#b3b3b3;
  --c-dark:#333;
  --radius-large:16px;
  --radius-capsule:999px;
  --font-mono:'DM Mono','JetBrains Mono',monospace;
  --font-body:'Noto Sans SC','PingFang SC',sans-serif;
  --nav-height:60px;
  --max-width:1440px;
}

/* Skip link */
.skip-link{position:absolute;top:-100px;left:16px;padding:8px 16px;background:#1a4a3a;color:#fff;z-index:1000;border-radius:8px;font-weight:600}
.skip-link:focus{top:8px}

/* site-header */
.site-header{
  position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--c-border);height:var(--nav-height)
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;max-width:var(--max-width);margin:0 auto;padding:0 24px;height:100%
}
.site-header__logo{
  font-family:var(--font-mono);font-weight:700;font-size:1.4rem;color:var(--c-brand);letter-spacing:-0.02em
}
.site-header__toggle{display:none;width:32px;height:32px;flex-direction:column;justify-content:center;gap:5px}
.site-header__toggle span{display:block;width:24px;height:2px;background:var(--c-text);border-radius:2px;transition:all 0.2s}
.site-header__nav-list{display:flex;gap:0}
.site-header__nav-list li a{
  display:block;padding:0 16px;line-height:var(--nav-height);font-family:var(--font-mono);font-weight:500;font-size:0.9rem;color:var(--c-text-secondary);position:relative;white-space:nowrap;transition:color 0.2s
}
.site-header__nav-list li a:hover{color:var(--c-accent)}
.site-header__nav-list li a[aria-current="page"]{color:var(--c-brand)}
.site-header__nav-list li a[aria-current="page"]::after{
  content:'';position:absolute;bottom:0;left:16px;right:16px;height:3px;background:var(--c-brand);border-radius:3px 3px 0 0
}

/* Mobile nav */
@media (max-width:768px){
  .site-header__toggle{display:flex}
  .site-header__nav{
    position:fixed;top:var(--nav-height);left:0;right:0;background:var(--c-dark);padding:16px 0;max-height:0;overflow:hidden;transition:max-height 0.3s ease,opacity 0.3s;opacity:0
  }
  .site-header[data-open] .site-header__nav{max-height:400px;opacity:1}
  .site-header__nav-list{flex-direction:column}
  .site-header__nav-list li a{line-height:3rem;color:#fff;padding:0 24px}
  .site-header__nav-list li a[aria-current="page"]{color:var(--c-accent)}
  .site-header__nav-list li a[aria-current="page"]::after{display:none}
}

/* site-footer */
.site-footer{
  background:var(--c-brand);color:#fff;padding:48px 24px 24px
}
.site-footer__inner{max-width:var(--max-width);margin:0 auto}
.site-footer__logo{font-family:var(--font-mono);font-weight:700;font-size:1.6rem;color:#fff}
.site-footer__tagline{margin-top:4px;font-size:0.9rem;opacity:0.8}
.site-footer__columns{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:32px}
.site-footer__col-heading{font-family:var(--font-mono);font-size:0.85rem;font-weight:600;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.05em;color:var(--c-accent)}
.site-footer__links li{margin-bottom:8px}
.site-footer__links a{color:rgba(255,255,255,0.85);transition:color 0.2s}
.site-footer__links a:hover{color:var(--c-accent)}
.site-footer__contact{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.2);font-size:0.85rem;line-height:1.8;text-align:center;opacity:0.9}
.site-footer__contact a{color:#fff;text-decoration:underline}
.site-footer__meta{margin-top:16px;text-align:center;font-size:0.8rem;opacity:0.7}
.site-footer__icp,.site-footer__copyright{display:inline}
@media (max-width:600px){
  .site-footer__columns{grid-template-columns:1fr;text-align:center}
}

/* Utility */
.btn{
  display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;background:var(--c-brand);color:#fff;font-family:var(--font-mono);font-weight:500;font-size:0.9rem;border-radius:var(--radius-capsule);transition:background 0.2s,transform 0.2s;line-height:1
}
.btn:hover{background:var(--c-accent);color:#fff;transform:translateY(-2px)}
.capsule{
  display:inline-flex;align-items:center;padding:8px 20px;height:44px;border-radius:var(--radius-capsule);font-family:var(--font-mono);font-size:0.85rem;font-weight:500;border:1px solid var(--c-border);background:var(--c-bg-light);color:var(--c-text);cursor:pointer;transition:all 0.2s
}
.capsule[aria-selected="true"],.capsule.active{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}
.card{
  background:var(--c-bg-light);border-radius:var(--radius-large);padding:24px;transition:transform 0.3s ease,box-shadow 0.3s
}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.08)}
.frame-box{
  border:2px solid var(--c-brand);border-radius:var(--radius-large);padding:24px;position:relative
}
.frame-box::before{
  content:'';position:absolute;top:-8px;left:24px;right:24px;height:4px;background:var(--c-brand);border-radius:4px
}

/* Grid */
.grid-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4col{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media (max-width:1024px){
  .grid-4col{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .grid-3col,.grid-4col{grid-template-columns:1fr}
}

/* Container */
.page-container{max-width:var(--max-width);margin:0 auto;padding:0 24px}

/* Focus visible */
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;scroll-behavior:auto!important}
}

/* Scroll to top */
[data-scroll-top]{
  position:fixed;bottom:32px;right:32px;width:48px;height:48px;border-radius:50%;background:var(--c-brand);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:99;font-size:1.2rem
}
[data-scroll-top].visible{opacity:1;pointer-events:auto}

/* Filter hiding */
[data-filter-container] [data-filter-value].is-hidden{display:none!important}