/* ===== 1. Reset ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0}
a{color:inherit;text-decoration:none}
::selection{background:var(--orange);color:#08131B}

/* ===== 2. Tokens ===== */
:root{
--navy-900:#04141F;
--navy-800:#082838;
--navy-700:#0F3D55;
--orange:#FF5A1F;
--orange-deep:#C93C08;
--sand:#DCB878;
--cyan:#2FE3C6;
--paper:#F5F0E6;
--ink:#14181C;
--mist:#8C97A3;
--mist-dark:#A9B4BF;
--tide:#1E6E8C;

--font-display:"Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",serif;
--font-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
--font-mono:"JetBrains Mono","SF Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

--fs-12:0.75rem;
--fs-14:0.875rem;
--fs-16:1rem;
--fs-20:1.25rem;
--fs-26:clamp(1.25rem,1.1rem + .6vw,1.625rem);
--fs-36:clamp(1.75rem,1.2rem + 2.2vw,2.25rem);
--fs-56:clamp(2.25rem,1.5rem + 3.4vw,3.5rem);
--fs-88:clamp(3rem,1.7rem + 5.6vw,5.5rem);
--fs-128:clamp(4rem,2.2rem + 8.4vw,8rem);

--gutter:clamp(16px,4vw,40px);
--width:1240px;
--radius-blob:26px 6px 26px 6px;
--ease:cubic-bezier(.2,.7,.3,1);
}

/* ===== 3. Base typography ===== */
body{
font-family:var(--font-body);
font-size:var(--fs-16);
line-height:1.75;
letter-spacing:.01em;
color:var(--ink);
background:var(--paper);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:900;line-height:1.08;letter-spacing:-.01em}
p{max-width:34em}
.mono{font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ===== 4. Utilities ===== */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.container{width:100%;max-width:var(--width);margin-inline:auto;padding-inline:var(--gutter)}
.stack>*+*{margin-top:var(--stack-gap,16px)}
#main-content{scroll-margin-top:96px}

.band-dark{background:var(--navy-900);color:var(--paper)}
.band-dark p{color:var(--mist-dark)}
.band-paper{background:var(--paper);color:var(--ink)}

.section{padding-block:clamp(56px,8vw,110px)}
.section--tight{padding-block:clamp(32px,5vw,64px)}

/* ===== 5. Focus ===== */
:where(a,button,[tabindex],input,select,summary):focus-visible{
outline:2px solid var(--cyan);
outline-offset:3px;
border-radius:3px;
}
.band-paper :where(a,button,[tabindex]):focus-visible,
body :where(a,button,[tabindex]):focus-visible{outline-color:#0E8F7C}

/* ===== 6. Skip link ===== */
.skip-link{
position:fixed;top:0;left:var(--gutter);z-index:200;
display:inline-flex;align-items:center;min-height:48px;padding:0 20px;
background:var(--orange);color:#08131B;font-weight:700;font-size:var(--fs-14);
border-radius:0 0 14px 14px;
transform:translateY(-120%);
transition:transform .18s var(--ease);
}
.skip-link:focus-visible{transform:translateY(0);outline-offset:-4px}

/* ===== 7. Header ===== */
.site-header{
position:sticky;top:0;z-index:80;
background:var(--navy-900);
color:var(--paper);
border-bottom:1px solid var(--navy-700);
}
.header-rule{
height:3px;
background:linear-gradient(90deg,var(--orange) 0 18%,var(--orange-deep) 18% 26%,var(--sand) 26% 28%,var(--navy-700) 28% 100%);
}
.header-inner{
position:relative;
max-width:var(--width);
margin-inline:auto;
padding:12px var(--gutter);
display:flex;align-items:center;justify-content:space-between;gap:20px;
transition:padding .22s var(--ease);
}
.brand-block{display:flex;flex-direction:column;gap:1px;min-width:0}
.brand-mark{
font-family:var(--font-display);font-weight:900;
font-size:var(--fs-26);line-height:1.1;letter-spacing:.03em;
color:var(--paper);
transition:color .18s var(--ease);
}
.brand-mark:hover{color:var(--sand)}
.brand-status{
display:flex;align-items:center;gap:7px;
max-height:26px;overflow:hidden;
font-family:var(--font-mono);font-size:var(--fs-12);
color:var(--mist-dark);letter-spacing:.02em;white-space:nowrap;
transition:max-height .22s var(--ease),opacity .22s var(--ease);
}
.status-dot{
width:7px;height:7px;border-radius:50%;
background:var(--cyan);flex:none;
animation:breathe 1.4s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.35}}
.site-header[data-scrolled] .brand-status{max-height:0;opacity:0}
.site-header[data-scrolled] .header-inner{padding-block:7px}

.primary-nav{display:flex;align-items:center;gap:clamp(10px,1.8vw,26px)}
.nav-list{display:flex;align-items:center;gap:clamp(2px,.9vw,12px)}
.nav-link{
position:relative;display:inline-flex;align-items:center;
min-height:48px;padding:0 9px;
font-size:var(--fs-14);font-weight:500;color:var(--paper);
transition:color .18s var(--ease);
}
.nav-link::after{
content:"";position:absolute;left:9px;right:9px;bottom:12px;height:2px;
background:var(--sand);transform:scaleX(0);transform-origin:left;
transition:transform .18s var(--ease);
}
.nav-link:hover{color:var(--sand)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link--accent{color:var(--orange);font-weight:700}
.nav-link--accent:hover{color:var(--sand)}
.nav-link[aria-current="page"]{color:var(--sand)}
.nav-link[aria-current="page"]::after{transform:scaleX(1);background:var(--orange)}
.nav-link--accent[aria-current="page"]{color:var(--orange)}

.nav-tools{display:flex;align-items:center;gap:12px}
.device-switch{
display:flex;gap:2px;padding:3px;
border:1px solid var(--navy-700);border-radius:999px;
background:var(--navy-800);
}
.device-btn{
min-height:34px;min-width:46px;padding:0 10px;
display:inline-flex;align-items:center;justify-content:center;
border-radius:999px;
font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.02em;
color:var(--mist-dark);cursor:pointer;
transition:background-color .18s var(--ease),color .18s var(--ease);
}
.device-btn:hover{color:var(--paper);background:var(--navy-700)}
.device-btn[aria-pressed="true"]{background:var(--sand);color:#08131B;font-weight:700}
.device-note{font-family:var(--font-mono);font-size:var(--fs-12);color:var(--mist-dark)}

.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:48px;padding:0 20px;
border:1px solid transparent;
border-radius:2px 14px 2px 14px;
font-family:var(--font-body);font-size:var(--fs-14);font-weight:700;
letter-spacing:.02em;cursor:pointer;
transition:transform .18s var(--ease),background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.btn-entry{background:var(--orange);color:#08131B}
.btn-entry:hover{background:var(--orange-deep);color:var(--paper)}
.btn-ghost{background:transparent;color:var(--paper);border-color:var(--sand)}
.btn-ghost:hover{background:var(--navy-700);border-color:var(--paper)}

.nav-toggle{
display:none;align-items:center;gap:10px;
min-height:48px;padding:0 14px;
border:1px solid var(--navy-700);border-radius:14px 2px 14px 2px;
color:var(--paper);cursor:pointer;
}
.nav-toggle-bars{position:relative;display:block;width:18px;height:2px;background:var(--paper);transition:background-color .18s var(--ease)}
.nav-toggle-bars::before,.nav-toggle-bars::after{
content:"";position:absolute;left:0;width:18px;height:2px;background:var(--paper);
transition:transform .2s var(--ease);
}
.nav-toggle-bars::before{top:-6px}
.nav-toggle-bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}
.nav-toggle-text{font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.04em}

.scroll-progress{
position:absolute;left:0;right:0;bottom:-1px;height:2px;
transform:scaleX(0);transform-origin:left;
background:linear-gradient(90deg,var(--orange),var(--cyan));
pointer-events:none;
}

/* ===== 8. Entry dock ===== */
.entry-dock{
position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:70;
display:inline-flex;align-items:center;gap:10px;
min-height:52px;padding:0 22px;
background:var(--orange);color:#08131B;
font-weight:700;font-size:var(--fs-14);letter-spacing:.02em;
border-radius:2px 18px 2px 18px;
box-shadow:0 14px 30px -16px rgba(4,20,31,.9);
opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none;
transition:opacity .22s var(--ease),transform .22s var(--ease),background-color .18s var(--ease),visibility 0s .22s;
}
.entry-dock::before{content:"";width:8px;height:8px;border-radius:50%;background:#08131B}
.entry-dock:hover{background:var(--orange-deep);color:var(--paper)}
.entry-dock:hover::before{background:var(--paper)}
.entry-dock[data-shown]{
opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
transition:opacity .22s var(--ease),transform .22s var(--ease),background-color .18s var(--ease),visibility 0s 0s;
}

/* ===== 9. Footer ===== */
.site-footer{
background:var(--navy-900);color:var(--paper);
border-top:3px solid var(--orange);
}
.footer-main{
max-width:var(--width);margin-inline:auto;
padding:clamp(40px,6vw,72px) var(--gutter) clamp(24px,4vw,40px);
display:grid;
grid-template-columns:1.5fr repeat(4,minmax(0,1fr));
gap:clamp(22px,3vw,40px);
}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.footer-brand-mark{
font-family:var(--font-display);font-weight:900;
font-size:var(--fs-26);line-height:1.1;letter-spacing:.03em;color:var(--paper);
transition:color .18s var(--ease);
}
.footer-brand-mark:hover{color:var(--sand)}
.footer-tagline{
font-size:var(--fs-14);color:var(--mist-dark);line-height:1.6;max-width:15em;
}
.footer-version{font-size:var(--fs-12);color:var(--tide);filter:brightness(1.5)}
.footer-quick{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

.footer-col{min-width:0}
.footer-col-title{
font-family:var(--font-mono);font-weight:500;
font-size:var(--fs-12);letter-spacing:.14em;
color:var(--sand);margin:0 0 14px;
padding-top:10px;border-top:1px solid var(--navy-700);
}
.footer-links{display:flex;flex-direction:column;gap:2px}
.footer-links a{
display:inline-flex;align-items:center;min-height:34px;
font-size:var(--fs-14);color:var(--mist-dark);
transition:color .18s var(--ease),padding-left .18s var(--ease);
}
.footer-links a:hover{color:var(--paper);padding-left:6px}

.footer-contact{
max-width:var(--width);margin-inline:auto;
padding:0 var(--gutter) clamp(24px,4vw,40px);
display:grid;gap:8px;
}
.footer-contact-item{
display:grid;grid-template-columns:max-content minmax(0,1fr);
gap:clamp(10px,2vw,24px);
font-family:var(--font-mono);font-size:var(--fs-12);
color:var(--paper);max-width:none;
padding-top:8px;border-top:1px dashed var(--navy-700);
}
.footer-contact-label{color:var(--sand);letter-spacing:.08em}
.footer-contact-value{color:var(--mist-dark);word-break:break-word;font-variant-numeric:tabular-nums}
.footer-contact-note{
font-size:var(--fs-12);line-height:1.7;color:var(--mist);max-width:52em;margin-top:6px;
}

.footer-bottom{
max-width:var(--width);margin-inline:auto;
padding:clamp(16px,2.4vw,24px) var(--gutter);
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
border-top:1px solid var(--navy-700);
}
.footer-meta{font-size:var(--fs-12);color:var(--mist);max-width:none}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 20px}
.footer-legal a{
display:inline-flex;align-items:center;min-height:32px;
font-size:var(--fs-12);color:var(--mist-dark);
transition:color .18s var(--ease);
}
.footer-legal a:hover{color:var(--cyan)}

/* ===== 10. Page building blocks ===== */
.breadcrumb{margin-bottom:20px}
.breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--fs-12);color:var(--mist)}
.breadcrumb-list li{display:flex;align-items:center;gap:8px}
.breadcrumb-list li+li::before{content:"/";color:var(--sand)}
.breadcrumb-list a{color:inherit;transition:color .18s var(--ease)}
.breadcrumb-list a:hover{color:var(--orange-deep)}
.band-dark .breadcrumb-list{color:var(--mist-dark)}

.chapter-head{
display:flex;align-items:flex-end;gap:clamp(12px,2vw,24px);
border-top:1px solid currentColor;
padding-top:14px;margin-bottom:clamp(24px,4vw,44px);
}
.chapter-no{
font-family:var(--font-display);font-weight:900;
font-size:var(--fs-88);line-height:1.02;letter-spacing:-.02em;
color:var(--orange);flex:none;
}
.chapter-title{
font-size:var(--fs-36);line-height:1.1;margin:0;
padding-bottom:.1em;
}
.chapter-title small{
display:block;font-family:var(--font-mono);font-weight:500;
font-size:var(--fs-12);letter-spacing:.12em;color:var(--mist);
margin-bottom:8px;
}
.band-dark .chapter-head{border-top-color:var(--navy-700);color:var(--paper)}
.band-dark .chapter-title{color:var(--paper)}

.lede{
font-size:var(--fs-20);line-height:1.62;color:var(--mist);
max-width:34em;
}
.band-dark .lede{color:var(--mist-dark)}

.grid{display:grid;gap:clamp(16px,2.4vw,28px)}
.grid-5-7{grid-template-columns:5fr 7fr}
.grid-4-8{grid-template-columns:4fr 8fr}
.grid-3-9{grid-template-columns:3fr 9fr}

.card{
display:block;position:relative;
background:var(--paper);
border:1px solid rgba(20,24,28,.14);
border-radius:var(--radius-blob);
padding:clamp(18px,2.4vw,26px);
transition:transform .18s var(--ease),border-color .18s var(--ease),background-color .18s var(--ease);
}
.card:hover{transform:translateY(-2px);border-color:var(--sand)}
.card--dark{background:var(--navy-800);border-color:var(--navy-700);color:var(--paper)}
.card--dark:hover{border-color:var(--sand)}
.card--dark p{color:var(--mist-dark)}

.tag{
display:inline-flex;align-items:center;gap:6px;
padding:3px 10px;border:1px solid var(--sand);border-radius:999px;
font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.04em;
color:var(--orange-deep);
}
.band-dark .tag,.card--dark .tag{color:var(--sand)}

.media-frame{
position:relative;overflow:hidden;isolation:isolate;
aspect-ratio:16/10;
border-radius:var(--radius-blob);
background:linear-gradient(135deg,var(--navy-700),var(--tide) 62%,var(--navy-800));
}
.media-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.05);transition:transform .3s var(--ease)}
.media-frame:hover img{transform:scale(1.02)}
.media-frame--wide{aspect-ratio:21/9}
.media-frame--square{aspect-ratio:1/1}
.media-frame--skew{clip-path:polygon(0 0,100% 0,100% 90%,0 100%);border-radius:0}

/* ===== 11. Reveal ===== */
.js [data-reveal]{
opacity:.001;
transform:translateY(14px);
transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.js [data-reveal][data-revealed]{opacity:1;transform:none}

/* ===== 12. Responsive ===== */
@media (max-width:1100px){
.device-switch{display:none}
}
@media (max-width:900px){
.nav-toggle{display:inline-flex}
.header-inner{gap:12px}
.primary-nav{
position:absolute;left:0;right:0;top:100%;
display:none;flex-direction:column;align-items:stretch;gap:0;
background:var(--navy-800);
border-top:1px solid var(--navy-700);
border-bottom:2px solid var(--orange);
padding:6px var(--gutter) 22px;
max-height:calc(100vh - 96px);
overflow-y:auto;
box-shadow:0 24px 40px -24px rgba(4,20,31,.9);
}
.primary-nav[data-open]{display:flex}
.nav-list{flex-direction:column;align-items:stretch;gap:0}
.nav-link{
min-height:56px;padding:0 4px;
font-size:var(--fs-16);
border-bottom:1px solid var(--navy-700);
}
.nav-link::after{display:none}
.nav-link[aria-current="page"]{border-left:3px solid var(--orange);padding-left:14px}
.nav-tools{flex-direction:column;align-items:stretch;gap:12px;margin-top:18px}
.nav-tools .device-switch{display:flex;align-self:flex-start}
.btn-entry{width:100%}
.footer-main{grid-template-columns:1fr 1fr}
.footer-brand{grid-column:1 / -1}
.footer-contact-item{grid-template-columns:1fr;gap:2px}
.entry-dock{right:14px;bottom:14px;min-height:48px;padding:0 18px}
}
@media (max-width:620px){
.footer-main{grid-template-columns:1fr;gap:26px}
.footer-links a{min-height:44px}
.footer-legal a{min-height:40px}
.footer-bottom{flex-direction:column;align-items:flex-start}
.chapter-head{flex-direction:column;align-items:flex-start;gap:8px}
.grid-5-7,.grid-4-8,.grid-3-9{grid-template-columns:1fr}
}
@media (min-width:901px){
.primary-nav{display:flex!important}
}

/* ===== 13. Motion preferences ===== */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation-duration:.001ms!important;
animation-iteration-count:1!important;
transition-duration:.001ms!important;
}
.js [data-reveal]{opacity:1;transform:none}
.entry-dock{transition:none}
}