/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;line-height:1.6;font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;background:#FDF8F0;color:#2C1E13;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video{display:block;max-width:100%}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{cursor:pointer;background:none;font:inherit;color:inherit}
:focus-visible{outline:3px solid #C9A96E;outline-offset:2px;border-radius:2px}

/* ===== CUSTOM PROPERTIES ===== */
:root{
  --color-cream:#FDF8F0;
  --color-dark-brown:#2C1E13;
  --color-red:#E84C22;
  --color-deep-blue:#1A2D4A;
  --color-gold:#C9A96E;
  --color-silver:#A0A8B0;
  --color-flame-red:#D32F2F;
  --color-deep-blue-black:#0D1B2A;
  --font-header:"Noto Sans SC","PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --font-body:"Noto Serif SC","Source Han Serif SC","Georgia","Times New Roman",serif;
  --font-mono:"SF Mono","Fira Code","Cascadia Code","Consolas","Courier New",monospace;
  --border-thick:6px;
  --shadow-heavy:8px 8px 0 rgba(44,30,19,0.15);
  --shadow-medium:4px 4px 0 rgba(44,30,19,0.1);
  --space-xs:0.25rem;
  --space-sm:0.5rem;
  --space-md:1rem;
  --space-lg:2rem;
  --space-xl:3rem;
  --space-2xl:5rem;
  --max-width:1200px;
  --header-h:72px;
  --top-border-h:4px;
  --transition-fast:0.2s ease;
  --transition-slow:0.4s ease
}

/* ===== SKIP LINK ===== */
.skip-link{
  position:fixed;top:0;left:0;z-index:10000;padding:0.75rem 1.5rem;background:#1A2D4A;color:#FDF8F0;font-weight:700;font-size:0.875rem;
  transform:translateY(-120%);transition:transform 0.25s ease
}
.skip-link:focus{transform:translateY(0)}

/* ===== HEADER ===== */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:1000;background:transparent
}
.header-top-border{
  height:var(--top-border-h);background:#1A2D4A;width:100%
}
.header-inner{
  display:flex;align-items:stretch;justify-content:space-between;background:#FDF8F0;
  height:var(--header-h);padding:0 var(--space-lg);border-bottom:4px solid #1A2D4A
}
.header-brand{
  display:flex;align-items:center;background:#0D1B2A;padding:0 var(--space-lg);margin-left:calc(-1 * var(--space-lg));
  flex-shrink:0
}
.brand-logo{
  font-family:var(--font-header);font-weight:900;font-size:1.35rem;letter-spacing:0.04em;
  color:#C9A96E;white-space:nowrap;text-transform:uppercase
}
.header-nav{
  display:flex;align-items:center
}
.nav-list{
  display:flex;gap:var(--space-xs);align-items:center;height:100%
}
.nav-list li{display:flex;align-items:center;height:100%}
.nav-list a{
  position:relative;display:flex;align-items:center;height:100%;padding:0 var(--space-md);
  font-family:var(--font-header);font-weight:600;font-size:0.9rem;letter-spacing:0.02em;
  color:#2C1E13;transition:color var(--transition-fast);white-space:nowrap
}
.nav-list a::after{
  content:'';position:absolute;bottom:0;left:var(--space-md);right:var(--space-md);height:3px;
  background:#C9A96E;transform:scaleX(0);transform-origin:center;transition:transform var(--transition-fast)
}
.nav-list a:hover::after,.nav-list a:focus-visible::after,.nav-list a[aria-current="page"]::after{transform:scaleX(1)}
.nav-list a:hover,.nav-list a:focus-visible,.nav-list a[aria-current="page"]{color:#1A2D4A}
.nav-list a[aria-current="page"]{font-weight:800}

/* ===== NAV TOGGLE ===== */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:44px;height:44px;cursor:pointer;background:transparent;border:none;padding:8px
}
.nav-toggle-bar{
  display:block;width:24px;height:3px;background:#2C1E13;border-radius:2px;
  transition:transform var(--transition-fast),opacity var(--transition-fast)
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ===== MOBILE HEADER ===== */
@media(max-width:768px){
  .header-inner{padding:0 var(--space-md)}
  .header-brand{padding:0 var(--space-md);margin-left:calc(-1 * var(--space-md))}
  .brand-logo{font-size:1.1rem}
  .nav-toggle{display:flex}
  .header-nav{
    position:fixed;top:calc(var(--header-h) + var(--top-border-h));left:0;width:100%;
    max-height:0;overflow:hidden;background:#0D1B2A;flex-direction:column;align-items:stretch;
    transition:max-height var(--transition-slow),padding var(--transition-slow);
    padding:0 var(--space-lg)
  }
  .header-nav[data-open]{
    max-height:500px;padding:var(--space-md) var(--space-lg) var(--space-lg)
  }
  .nav-list{flex-direction:column;width:100%;gap:0}
  .nav-list li{width:100%;height:auto;border-bottom:1px solid rgba(201,169,110,0.2)}
  .nav-list li:last-child{border-bottom:none}
  .nav-list a{
    height:auto;padding:var(--space-md) var(--space-sm);color:#FDF8F0;font-size:1rem
  }
  .nav-list a::after{display:none}
  .nav-list a:hover,.nav-list a:focus-visible,.nav-list a[aria-current="page"]{color:#C9A96E}
}

/* ===== MAIN CONTENT ===== */
#main-content{display:block;padding-top:calc(var(--header-h) + var(--top-border-h) + 4px)}

/* ===== CONTAINER ===== */
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--space-lg)}
@media(max-width:768px){.container{padding:0 var(--space-md)}}

/* ===== FRAME BOX ===== */
.frame-box{
  border:var(--border-thick) solid #1A2D4A;padding:var(--space-xl);background:#FDF8F0;
  box-shadow:var(--shadow-heavy);position:relative
}
.frame-box::before{
  content:'';position:absolute;top:8px;left:8px;right:-4px;bottom:-4px;
  border:2px solid #C9A96E;pointer-events:none
}
@media(max-width:768px){.frame-box{padding:var(--space-lg)}}

/* ===== CHAPTER NUMBERING ===== */
.chapter{display:flex;gap:var(--space-lg);align-items:flex-start;margin-bottom:var(--space-2xl)}
.chapter-number{
  font-family:var(--font-mono);font-size:4rem;font-weight:900;line-height:1;
  color:#E84C22;flex-shrink:0;min-width:1.8em
}
.chapter-title{
  font-family:var(--font-header);font-weight:700;font-size:1.8rem;color:#2C1E13;
  line-height:1.3;padding-top:0.3em;border-top:4px solid #C9A96E
}
.chapter-desc{font-family:var(--font-body);font-size:1rem;color:#2C1E13;margin-top:var(--space-sm);max-width:680px}
@media(max-width:768px){
  .chapter{flex-direction:column;gap:var(--space-sm)}
  .chapter-number{font-size:3rem}
  .chapter-title{font-size:1.4rem}
}

/* ===== SECTION NUMBER ===== */
.section-number{
  font-family:var(--font-mono);font-size:2.5rem;font-weight:700;color:#E84C22;line-height:1;margin-bottom:var(--space-sm)
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);
  padding:0.75rem 2rem;font-family:var(--font-header);font-weight:700;font-size:0.95rem;
  letter-spacing:0.03em;border:3px solid #2C1E13;background:transparent;color:#2C1E13;
  transition:all var(--transition-fast);cursor:pointer;text-decoration:none
}
.btn:hover,.btn:focus-visible{background:#2C1E13;color:#FDF8F0}
.btn-primary{background:#E84C22;border-color:#E84C22;color:#FDF8F0}
.btn-primary:hover,.btn-primary:focus-visible{background:#D32F2F;border-color:#D32F2F;color:#FDF8F0}
.btn-outline{border-color:#2C1E13;color:#2C1E13;background:transparent}
.btn-outline:hover,.btn-outline:focus-visible{background:#2C1E13;color:#FDF8F0}
.btn-gold{background:#C9A96E;border-color:#C9A96E;color:#0D1B2A}
.btn-gold:hover,.btn-gold:focus-visible{background:#b8924e;border-color:#b8924e}

/* ===== CARDS ===== */
.card{
  background:#FDF8F0;border:4px solid #2C1E13;padding:var(--space-lg);
  box-shadow:var(--shadow-medium);transition:box-shadow var(--transition-fast),transform var(--transition-fast)
}
.card:hover{box-shadow:var(--shadow-heavy);transform:translate(-2px,-2px)}
.card-header{font-family:var(--font-header);font-weight:700;font-size:1.2rem;margin-bottom:var(--space-sm);color:#1A2D4A}
.card-body{font-family:var(--font-body);font-size:0.95rem;color:#2C1E13;line-height:1.7}
.card-number{font-family:var(--font-mono);font-size:1.8rem;font-weight:700;color:#E84C22;margin-bottom:var(--space-xs)}

/* ===== GRID ===== */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-xl)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl)}
@media(max-width:768px){.grid-2,.grid-3{grid-template-columns:1fr;gap:var(--space-lg)}}
@media(min-width:769px)and(max-width:1024px){.grid-3{grid-template-columns:repeat(2,1fr)}}

/* ===== FOOTER ===== */
.site-footer{
  background:#0D1B2A;color:#FDF8F0;padding:var(--space-2xl) var(--space-lg) var(--space-lg);
  margin-top:var(--space-2xl);border-top:6px solid #C9A96E
}
.footer-container{
  max-width:var(--max-width);margin:0 auto;display:grid;
  grid-template-columns:1.6fr 1fr 1.4fr;gap:var(--space-xl)
}
.footer-col{padding:0 var(--space-sm)}
.footer-logo{
  display:inline-block;font-family:var(--font-header);font-weight:900;font-size:1.5rem;
  color:#C9A96E;margin-bottom:var(--space-sm);letter-spacing:0.04em
}
.footer-desc{font-family:var(--font-body);font-size:0.9rem;color:#A0A8B0;line-height:1.6;margin-bottom:var(--space-md)}
.footer-icp{font-family:var(--font-mono);font-size:0.8rem;color:#A0A8B0}
.footer-heading{
  font-family:var(--font-header);font-weight:700;font-size:1rem;color:#C9A96E;
  margin-bottom:var(--space-md);letter-spacing:0.04em;border-bottom:2px solid rgba(201,169,110,0.3);padding-bottom:var(--space-sm)
}
.footer-links{display:flex;flex-direction:column;gap:var(--space-sm)}
.footer-links a{font-size:0.9rem;color:#FDF8F0;transition:color var(--transition-fast);padding:var(--space-xs) 0}
.footer-links a:hover,.footer-links a:focus-visible{color:#C9A96E}
.footer-contact-list{display:flex;flex-direction:column;gap:var(--space-sm)}
.footer-contact-list li{font-size:0.9rem;color:#A0A8B0;line-height:1.5}
.footer-bottom{
  max-width:var(--max-width);margin:var(--space-xl) auto 0;padding-top:var(--space-lg);
  border-top:1px solid rgba(201,169,110,0.2);text-align:center
}
.footer-copy{font-size:0.85rem;color:#A0A8B0;font-family:var(--font-mono)}
.footer-trust{font-size:0.75rem;color:#6b737c;margin-top:var(--space-sm);max-width:720px;margin-left:auto;margin-right:auto;line-height:1.5}
@media(max-width:768px){
  .footer-container{grid-template-columns:1fr;gap:var(--space-lg)}
  .footer-col{padding:0}
  .site-footer{padding:var(--space-xl) var(--space-md) var(--space-md)}
}

/* ===== PROGRESS BAR ===== */
.progress-bar{
  position:fixed;top:calc(var(--header-h) + var(--top-border-h) + 4px);left:0;height:4px;
  background:#E84C22;z-index:999;width:0%;transition:width 0.1s linear;pointer-events:none
}
@media(prefers-reduced-motion:reduce){.progress-bar{display:none}}

/* ===== UTILITY ===== */
.text-gold{color:#C9A96E}
.text-red{color:#E84C22}
.text-silver{color:#A0A8B0}
.text-brown{color:#2C1E13}
.text-deep-blue{color:#1A2D4A}
.bg-cream{background:#FDF8F0}
.bg-deep-blue{background:#1A2D4A}
.bg-dark{background:#0D1B2A}
.font-mono{font-family:var(--font-mono)}
.font-header{font-family:var(--font-header)}
.font-body{font-family:var(--font-body)}
.mt-lg{margin-top:var(--space-lg)}
.mt-xl{margin-top:var(--space-xl)}
.mt-2xl{margin-top:var(--space-2xl)}
.mb-lg{margin-bottom:var(--space-lg)}
.mb-xl{margin-bottom:var(--space-xl)}
.mb-2xl{margin-bottom:var(--space-2xl)}
.p-lg{padding:var(--space-lg)}
.p-xl{padding:var(--space-xl)}
.text-center{text-align:center}

/* ===== RESPONSIVE EMBELLISHMENTS ===== */
@media(min-width:1025px){.header-inner{padding:0 var(--space-xl)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}}

/* ===== TABLET FOOTER ===== */
@media(min-width:769px)and(max-width:1024px){
  .footer-container{grid-template-columns:1fr 1fr}
  .footer-brand-col{grid-column:1/-1}
}
/* ===== IMAGE CONTAINER (placeholder-ready) ===== */
.img-frame{
  border:4px solid #1A2D4A;background:#e8e2d6;overflow:hidden;
  box-shadow:var(--shadow-medium);min-height:200px;position:relative
}
.img-frame::after{
  content:'';position:absolute;top:0;left:0;width:100%;height:100%;
  background:linear-gradient(135deg,transparent 40%,rgba(201,169,110,0.08) 100%);
  pointer-events:none
}
.img-frame img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== BREADCRUMB ===== */
.breadcrumb{display:flex;flex-wrap:wrap;gap:var(--space-sm);font-size:0.85rem;color:#A0A8B0;font-family:var(--font-mono);margin-bottom:var(--space-lg)}
.breadcrumb a{color:#1A2D4A;transition:color var(--transition-fast)}
.breadcrumb a:hover{color:#C9A96E}
.breadcrumb span.sep{margin:0 var(--space-xs);color:#A0A8B0}
.breadcrumb [aria-current="page"]{color:#2C1E13;font-weight:600}