/* 本地自托管字体（替代 Google Fonts，避免国内网络加载失败；西文主字体采用设计方提供的 Roboto） */
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/roboto-300.ttf') format('truetype')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/roboto-400.ttf') format('truetype')}
@font-face{font-family:'Roboto';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/roboto-400-italic.ttf') format('truetype')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/roboto-500.ttf') format('truetype')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/roboto-700.ttf') format('truetype')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/roboto-700.ttf') format('truetype')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/roboto-900.ttf') format('truetype')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dm-mono-400.woff2') format('woff2')}
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/noto-sans-sc-400.woff2') format('woff2');unicode-range:U+2E80-2EFF,U+3000-303F,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF}
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/noto-sans-sc-500.woff2') format('woff2');unicode-range:U+2E80-2EFF,U+3000-303F,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF}
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/noto-sans-sc-700.woff2') format('woff2');unicode-range:U+2E80-2EFF,U+3000-303F,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF}

:root{
    --yellow:#f5f0b0;
    --grey:#626263;
    --ink:#292929;
    --ink2:#393939;
    --cream:#faf6d4;
    --line:#faf6d440;
    --wrap:min(1320px,calc(100vw - 64px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);font-family:Roboto,'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;z-index:100;background:var(--yellow);color:var(--ink);padding:8px 12px}

/* Loader */
.loader{position:fixed;inset:0;z-index:99;display:grid;place-items:center;background:var(--yellow);color:var(--ink);font:12px 'DM Mono';letter-spacing:.15em;transition:transform .8s cubic-bezier(.76,0,.24,1)}
.ready .loader{transform:translateY(-100%)}

/* 导航 */
.site-nav{position:fixed;z-index:20;top:0;width:100%;height:76px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:linear-gradient(#292929e8,transparent);backdrop-filter:blur(5px)}
.is-front .site-nav{transform:translateY(-110%);transition:transform .7s .5s}
.is-front.ready .site-nav{transform:none}
.brand{letter-spacing:.16em;font-size:16px;font-weight:700}
.brand img{max-height:36px;width:auto}
.nav-links{display:flex;gap:28px;font:10px 'DM Mono';letter-spacing:.1em}
.nav-links ul{list-style:none;margin:0;padding:0;display:flex;gap:28px}
.nav-links li{position:relative}
.nav-links a:hover{color:var(--yellow)}
.nav-links .sub-menu{position:absolute;top:100%;left:0;flex-direction:column;gap:0;background:var(--ink);border:1px solid var(--line);min-width:180px;opacity:0;visibility:hidden;transition:.3s}
.nav-links li:hover .sub-menu{opacity:1;visibility:visible}
.nav-links .sub-menu a{display:block;padding:12px 16px;border-bottom:1px solid var(--line)}
.circle-link{width:41px;height:41px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:.3s;flex-shrink:0}
.circle-link:hover{background:var(--yellow);color:var(--ink);transform:rotate(45deg)}

/* Footer */
.site-footer{display:flex;justify-content:space-between;gap:20px;padding:23px 32px;background:#222;color:#d6d5c9;font:10px 'DM Mono';letter-spacing:.05em}

/* 首页 Hero */
.ferro-hero{min-height:100svh;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:0 max(32px,calc((100vw - 1320px)/2)) 58px;background:linear-gradient(112deg,#202020 0 34%,#111 78%)}
.ferro-field{position:absolute;z-index:1;right:0;top:0;width:68vw;height:100%;overflow:hidden;cursor:crosshair;touch-action:none}
.ferro-canvas{position:relative;z-index:1;width:100%;height:100%;display:block;background:transparent}
.ferro-hero .hero-copy{position:relative;z-index:3;max-width:720px;text-shadow:0 3px 28px #111}
.eyebrow{display:flex;gap:12px;align-items:center;color:var(--yellow);font:10px 'DM Mono';letter-spacing:.13em}
.eyebrow:before{content:'';width:33px;border-top:1px solid currentColor}
.ferro-hero h1{margin:22px 0 17px;font-weight:500;font-size:clamp(56px,9.3vw,138px);letter-spacing:-.08em;line-height:.85}
.ferro-hero h1 i{font-style:normal;color:var(--yellow)}
.ferro-hero p{max-width:380px;font-size:14px;line-height:1.8;color:#e8e6d5}
.field-note{position:absolute;right:7%;bottom:72px;z-index:2;color:var(--yellow);font:10px 'DM Mono';letter-spacing:.1em;opacity:.75}
.scroll{position:absolute;right:32px;bottom:58px;writing-mode:vertical-rl;font:10px 'DM Mono';letter-spacing:.13em;color:var(--yellow);z-index:3}
.scroll:after{content:'';display:block;height:55px;border-left:1px solid var(--yellow);margin:12px auto;animation:line 1.8s infinite}
.ferro-fallback{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.ferro-field.no-webgl{display:none}
.ferro-field.no-webgl ~ .ferro-fallback{z-index:1}

/* Statement 区 */
.statement{background:var(--yellow);color:var(--ink);padding:clamp(105px,15vw,220px) max(32px,calc((100vw - 1040px)/2));text-align:center}
.statement h2{margin:0;font-size:clamp(30px,4.7vw,66px);line-height:1.12;letter-spacing:-.065em;font-weight:500}
.statement h2 em{font-style:normal;color:var(--grey)}
.statement p{max-width:780px;margin:42px auto 0;font-size:14px;line-height:1.95;color:#494946}

/* Closing 区 */
.closing{min-height:75svh;padding:90px 32px;display:grid;place-items:center;text-align:center;background:radial-gradient(ellipse at center,#6d6d66,transparent 44%),#353535}
.closing .eyebrow{justify-content:center}
.closing h2{font-size:clamp(55px,9vw,128px);line-height:.9;letter-spacing:-.075em;font-weight:500;margin:22px 0}
.closing p{max-width:440px;margin:0 auto 27px;color:#e3e1d4;font-size:14px;line-height:1.85}
.button{font:11px 'DM Mono';letter-spacing:.08em;border-bottom:1px solid var(--yellow);padding:12px 0}

@keyframes line{50%{transform:scaleY(.35);transform-origin:top}}

/* 移动端 */
@media(max-width:720px){
    :root{--wrap:calc(100vw - 40px)}
    .site-nav{height:65px;padding:0 20px}
    .nav-links{display:none}
    .ferro-hero{padding:0 20px 42px}
    .ferro-field{width:116vw;right:-49%;height:72%;top:1%}
    .field-note,.scroll{display:none}
    .ferro-hero .hero-copy{z-index:4}
    .site-footer{padding:20px;flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
    *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
    .is-front .site-nav{transform:none}
}