/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{min-height:100vh;background:#0a0f0a;color:#e0e0e0;font-family:'Noto Serif SC',Georgia,'Times New Roman',serif;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea{font:inherit}
ul{list-style:none}
:focus-visible{outline:2px solid #3a86ff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}}

/* CSS Variables */
:root{
  --color-primary:#1a7a2e;
  --color-primary-dark:#0d1b0e;
  --color-accent-red:#e63946;
  --color-accent-silver:#c0c0c0;
  --color-data-blue:#3a86ff;
  --color-bg:#0a0f0a;
  --color-surface:#141e14;
  --color-text-primary:#e0e0e0;
  --color-text-secondary:#a0a0a0;
  --color-highlight:#2d8f4e;
  --font-heading:'Bebas Neue',Impact,'Arial Black',sans-serif;
  --font-body:'Noto Serif SC',Georgia,'Times New Roman',serif;
  --scale:1.25;
  --header-width:280px;
  --content-max-width:1200px;
  --border-radius-lg:16px;
  --border-radius-sm:8px;
  --transition-fast:0.2s ease;
  --transition-slow:0.4s ease;
}

/* Skip Link */
.skip-link{
  position:absolute;top:-100%;left:8px;z-index:9999;padding:8px 16px;background:var(--color-data-blue);color:#fff;border-radius:4px;font-family:var(--font-heading);font-size:0.875rem;transition:top var(--transition-fast)
}
.skip-link:focus{top:8px}

/* Header (Sidebar) */
.header{
  position:fixed;top:0;left:0;width:var(--header-width);height:100vh;background:var(--color-surface);border-right:2px solid var(--color-primary);display:flex;flex-direction:column;padding:24px 16px;z-index:100;overflow-y:auto
}
.header__brand{
  margin-bottom:32px;padding-bottom:16px;border-bottom:1px solid var(--color-primary)
}
.header__logo{
  display:block;font-family:var(--font-heading);font-size:1.75rem;color:var(--color-primary);letter-spacing:1px;line-height:1.2
}
.header__tagline{
  display:block;font-family:var(--font-body);font-size:0.75rem;color:var(--color-text-secondary);margin-top:4px
}
.header__nav-toggle{display:none}
.header__nav-wrapper{}
.header__nav-list{display:flex;flex-direction:column;gap:4px}
.header__nav-link{
  display:block;padding:10px 12px;border-radius:var(--border-radius-sm);font-family:var(--font-heading);font-size:1.125rem;letter-spacing:1px;color:var(--color-text-secondary);transition:background var(--transition-fast),color var(--transition-fast)
}
.header__nav-link:hover,.header__nav-link:focus-visible{background:var(--color-primary-dark);color:var(--color-primary)}
.header__nav-link[aria-current="page"]{background:var(--color-primary);color:#fff}

/* Footer */
.footer{
  background:var(--color-surface);border-top:2px solid var(--color-primary);padding:32px 24px;margin-top:64px
}
.footer__inner{
  max-width:var(--content-max-width);margin:0 auto;display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between;align-items:flex-start
}
.footer__brand .footer__logo{font-family:var(--font-heading);font-size:1.5rem;color:var(--color-primary)}
.footer__brand .footer__tagline{font-size:0.75rem;color:var(--color-text-secondary)}
.footer__links{display:flex;gap:16px;flex-wrap:wrap}
.footer__link{color:var(--color-accent-silver);font-size:0.875rem;transition:color var(--transition-fast)}
.footer__link:hover{color:var(--color-primary)}
.footer__info{display:flex;flex-direction:column;gap:4px;font-size:0.8rem;color:var(--color-text-secondary)}
.footer__meta{width:100%;display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid var(--color-primary-dark);font-size:0.75rem;color:var(--color-text-secondary)}

/* Layout Helper */
.main-content{min-height:calc(100vh - 80px);margin-left:var(--header-width);padding:32px 24px}
@media (max-width:1024px){
  :root{--header-width:240px}
  .main-content{padding:24px 16px}
}

/* Mobile Header */
@media (max-width:768px){
  .header{
    width:100%;height:auto;position:relative;flex-direction:row;align-items:center;padding:12px 16px;border-right:none;border-bottom:2px solid var(--color-primary)
  }
  .header__brand{flex:1;margin-bottom:0;padding-bottom:0;border-bottom:none}
  .header__logo{font-size:1.375rem}
  .header__tagline{display:none}
  .header__nav-toggle{
    display:block;background:none;border:none;cursor:pointer;width:40px;height:40px;position:relative;z-index:110
  }
  .header__nav-icon,.header__nav-icon::before,.header__nav-icon::after{
    display:block;width:24px;height:2px;background:var(--color-text-primary);position:absolute;left:8px;transition:transform var(--transition-fast),opacity var(--transition-fast)
  }
  .header__nav-icon{top:19px}
  .header__nav-icon::before{content:'';top:-7px}
  .header__nav-icon::after{content:'';top:7px}
  .header__nav-toggle[aria-expanded="true"] .header__nav-icon{background:transparent}
  .header__nav-toggle[aria-expanded="true"] .header__nav-icon::before{transform:rotate(45deg);top:0}
  .header__nav-toggle[aria-expanded="true"] .header__nav-icon::after{transform:rotate(-45deg);top:0}
  .header__nav-wrapper{
    position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(10,15,10,0.95);z-index:105;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--transition-slow)
  }
  .header__nav-wrapper[data-open="true"]{opacity:1;pointer-events:auto}
  .header__nav-list{flex-direction:column;align-items:center;gap:8px}
  .header__nav-link{font-size:1.5rem}
  .main-content{margin-left:0;padding-top:80px}
}

/* Button */
.btn{
  display:inline-block;padding:10px 24px;border:none;border-radius:var(--border-radius-sm);font-family:var(--font-heading);font-size:1rem;letter-spacing:1px;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)
}
.btn--primary{background:var(--color-primary);color:#fff}
.btn--primary:hover{background:var(--color-highlight)}
.btn--outline{background:transparent;border:2px solid var(--color-primary);color:var(--color-primary)}
.btn--outline:hover{background:var(--color-primary);color:#fff}
.btn--ghost{background:transparent;border:2px solid transparent;color:var(--color-text-primary)}
.btn--ghost:hover{color:var(--color-data-blue)}

/* Card */
.card{
  background:var(--color-surface);border:1px solid var(--color-primary-dark);border-radius:var(--border-radius-lg);padding:20px;transition:box-shadow var(--transition-fast),transform var(--transition-fast)
}
.card:hover{box-shadow:0 4px 20px rgba(26,122,46,0.3);transform:translateY(-2px)}
.card--highlight{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}
.card--stat{text-align:center;padding:24px}

/* Tag */
.tag{
  display:inline-block;padding:4px 12px;border-radius:20px;background:var(--color-primary-dark);color:var(--color-primary);font-family:var(--font-heading);font-size:0.75rem;letter-spacing:0.5px
}

/* Section */
.section{max-width:var(--content-max-width);margin:0 auto;padding:48px 0}
.section--narrow{max-width:720px}
.section--wide{max-width:100%;padding-left:24px;padding-right:24px}

/* Scroll Progress Bar */
[data-scroll-progress]{
  position:fixed;top:0;left:0;height:4px;background:var(--color-accent-red);z-index:200;width:0%;transition:width 0.1s linear
}
@media (prefers-reduced-motion:reduce){[data-scroll-progress]{display:none}}

/* Utility */
.text-center{text-align:center}
.text-primary{color:var(--color-primary)}
.text-accent{color:var(--color-accent-red)}
.text-data{color:var(--color-data-blue)}