:root{
--paper:#F3F0E5;
--paper2:#E8E3D4;
--line:#D6D0BE;
--ink:#1F1A17;
--ink2:#14100D;
--ink3:#57504A;
--cin:#AE3A2B;
--cin2:#7E2418;
--cin3:#F0D9D3;
--dai:#46656B;
--dai2:#DCE6E7;
--maxw:1136px;
--sans:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--sans);
font-size:16px;
line-height:1.82;
font-weight:400;
}
h1,h2,h3,p,ul,ol,li,figure,figcaption,blockquote,dl,dd,details,summary{margin:0;padding:0}
ul,ol{list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:var(--cin);text-decoration:none}
a:hover{text-decoration:underline}
b,strong{font-weight:700}
.top__in,.hero__in,.sec__in,.cta__in,.foot__in{width:100%;max-width:var(--maxw);margin:0 auto}
.btn{
display:inline-flex;align-items:center;justify-content:center;
padding:12px 24px;border-radius:2px;
background:linear-gradient(135deg,var(--cin) 0%,var(--cin2) 100%);
color:#FFF7F4;font-size:15px;font-weight:700;letter-spacing:.06em;
border:1px solid var(--cin2);text-decoration:none;white-space:nowrap;
}
.btn:hover{text-decoration:none;background:linear-gradient(135deg,var(--cin2) 0%,var(--ink) 100%)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);font-weight:400}
.btn--ghost:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.top{position:sticky;top:0;z-index:20;background:var(--paper);border-top:4px solid var(--ink);border-bottom:1px solid var(--line);padding:0 22px}
.top__in{display:flex;align-items:center;gap:20px;min-height:76px}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand__logo{width:42px;height:42px}
.brand__txt{font-size:21px;font-weight:700;letter-spacing:.1em;color:var(--ink)}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{
display:block;padding:7px 12px;font-size:14.5px;color:var(--ink3);
border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--cin);text-decoration:none}
.nav a[aria-current="page"]{color:var(--ink);font-weight:700;border-bottom-color:var(--cin)}
.top .btn{padding:10px 18px;font-size:14.5px;color:#FFF7F4}
.top .btn:hover{color:#FFF7F4}
.hero{padding:44px 22px 50px;border-bottom:1px solid var(--line)}
.hero__in{display:grid;grid-template-columns:1fr 372px;gap:48px;align-items:center}
.kicker{
font-size:12.5px;letter-spacing:.24em;color:var(--dai);font-weight:700;
}
.hero h1{
font-size:38px;line-height:1.28;font-weight:700;letter-spacing:.02em;
margin:14px 0 0;padding-left:18px;border-left:6px solid var(--cin);
}
.lead{margin-top:20px;font-size:16.5px;color:var(--ink3);max-width:600px}
.hero__act{display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.cta-note{margin-top:16px;font-size:13.5px;color:var(--ink3);padding-left:14px;border-left:2px solid var(--dai)}
.hero__shot{position:relative;padding:20px 0}
.hero__shot::before,.hero__shot::after{content:"";position:absolute;left:4%;right:4%;height:7px;background:var(--ink)}
.hero__shot::before{top:0}
.hero__shot::after{bottom:0}
.hero__shot img{width:100%;height:auto;max-width:278px;margin:0 auto;box-shadow:0 0 0 1px var(--cin)}
.hero__shot figcaption{margin-top:14px;font-size:13px;color:var(--ink3);text-align:center}
.sec{padding:32px 22px}
.sec__in{
position:relative;border:2px solid var(--ink);padding:52px 40px 54px;
}
.sec__in::before{content:"";position:absolute;inset:5px;border:1px solid rgba(31,26,23,.28);pointer-events:none}
.seal{
position:absolute;top:-2px;left:30px;
writing-mode:vertical-rl;letter-spacing:.24em;
background:var(--cin);color:#FFF7F4;font-size:12.5px;font-weight:700;
padding:11px 5px;font-style:normal;
}
.sec h2{
font-size:26px;line-height:1.4;font-weight:700;letter-spacing:.02em;
max-width:900px;
}
.sec h2::after{content:"";display:block;width:64px;height:3px;background:var(--cin);margin-top:14px}
.sub{margin-top:16px;font-size:15px;color:var(--ink3);max-width:900px}
.meters{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:32px;border:1px solid var(--line)}
.meters li{padding:22px 20px;border-right:1px solid var(--line)}
.meters li:last-child{border-right:0}
.meters b{display:block;font-size:16px;font-weight:700}
.meters span{display:block;margin-top:8px;font-size:13.5px;color:var(--ink3);line-height:1.7}
.density{margin-top:34px}
.density__cap{font-size:14px;font-weight:700;color:var(--dai);letter-spacing:.06em}
.density__list{margin-top:16px;border-top:1px solid var(--line)}
.density__list li{display:grid;grid-template-columns:112px 1fr 62px;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.dn{font-size:14.5px}
.db{display:block;height:9px;background:var(--paper2);border:1px solid var(--line)}
.db i{display:block;height:100%;background:linear-gradient(90deg,var(--cin) 0%,var(--dai) 100%)}
.density__list li:nth-child(1) .db i{width:97%}
.density__list li:nth-child(2) .db i{width:88%}
.density__list li:nth-child(3) .db i{width:79%}
.density__list li:nth-child(4) .db i{width:71%}
.density__list li:nth-child(5) .db i{width:62%}
.density__list li:nth-child(6) .db i{width:54%}
.density__list li:nth-child(7) .db i{width:43%}
.dv{font-size:12.5px;color:var(--ink3);text-align:right}
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:32px;border:1px solid var(--line)}
.cat{padding:26px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cat:nth-child(3n){border-right:0}
.cat:nth-child(n+4){border-bottom:0}
.cat h3{font-size:17px;font-weight:700;padding-left:12px;border-left:3px solid var(--dai)}
.cat p{margin-top:12px;font-size:14.5px;color:var(--ink3)}
.pace{margin-top:32px;border-top:2px solid var(--ink)}
.pace li{display:grid;grid-template-columns:132px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.pace b{font-size:15.5px;font-weight:700;color:var(--cin2)}
.pace p{font-size:14.5px;color:var(--ink3)}
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}
.shots figure{display:flex;flex-direction:column}
.shots img{width:100%;height:auto;box-shadow:0 0 0 1px var(--ink)}
.shots figcaption{margin-top:12px;font-size:13px;color:var(--ink3);line-height:1.66}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.quote{border-top:3px solid var(--dai);padding-top:18px}
.quote p{font-size:14.5px;color:var(--ink3)}
.quote .who{display:block;margin-top:14px;font-size:13px;font-weight:700;color:var(--cin2)}
.faq{margin-top:30px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
cursor:pointer;list-style:none;padding:16px 34px 16px 0;position:relative;
font-size:15.5px;font-weight:700;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"+";position:absolute;right:6px;top:15px;
font-size:19px;font-weight:400;color:var(--cin);line-height:1;
}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding:0 40px 18px 0;font-size:14.5px;color:var(--ink3)}
.entries{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.entry{border:1px solid var(--line);border-top:3px solid var(--cin);padding:24px 22px;background:var(--paper2)}
.entry h3{font-size:17px;font-weight:700}
.entry p{margin-top:10px;font-size:14px;color:var(--ink3)}
.entry span{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:700;color:var(--cin)}
.cta{padding:0 22px 70px}
.cta__in{
background:var(--ink2);color:var(--paper);padding:48px 40px;
border:2px solid var(--ink2);
}
.cta h2{font-size:25px;font-weight:700;letter-spacing:.02em}
.cta p{margin-top:14px;font-size:15px;color:#CDBFA8;max-width:820px}
.cta .btn{margin-top:26px;background:linear-gradient(135deg,var(--cin) 0%,var(--cin2) 100%);color:#FFF7F4}
.cta .btn:hover{background:linear-gradient(135deg,#C74834 0%,var(--cin2) 100%);color:#FFF7F4}
.cta .btn--ghost{background:transparent;color:var(--paper);border:1px solid var(--paper)}
.cta .btn--ghost:hover{background:var(--paper);color:var(--ink2)}
.foot{border-top:4px solid var(--ink);background:var(--paper2);padding:0 22px}
.foot__in{padding:48px 0 30px}
.foot__brand{display:flex;align-items:center;gap:11px}
.foot__brand img{width:36px;height:36px}
.foot__brand b{font-size:18px;letter-spacing:.08em}
.foot__nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px}
.foot__nav a{font-size:14px;color:var(--ink3)}
.foot__nav a:hover{color:var(--cin)}
.foot p{margin-top:18px;font-size:13.5px;color:var(--ink3);max-width:900px}
.foot .btn{display:inline-flex;padding:10px 20px;margin-top:22px;font-size:14.5px;background:linear-gradient(135deg,var(--cin) 0%,var(--cin2) 100%);color:#FFF7F4}
.foot .btn:hover{background:linear-gradient(135deg,var(--cin2) 0%,var(--ink) 100%);color:#FFF7F4;text-decoration:none}
.foot__copy{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--ink3)}
.page-hero{position:relative;padding:52px 22px 46px;border-bottom:1px solid var(--line);overflow:hidden}
.page-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:repeating-linear-gradient(90deg,var(--cin) 0 42px,var(--dai) 42px 84px)}
.page-hero__in{width:100%;max-width:var(--maxw);margin:0 auto}
.page-hero h1{font-size:32px;line-height:1.34;font-weight:700;margin-top:12px;padding-left:16px;border-left:6px solid var(--cin)}
.art{padding:24px 22px 40px}
.art__in{width:100%;max-width:var(--maxw);margin:0 auto;padding:0}
.art h2{font-size:24px;font-weight:700;line-height:1.44;max-width:900px;margin-top:44px}
.art h2:first-child{margin-top:0}
.art h2::after{content:"";display:block;width:56px;height:3px;background:var(--cin);margin-top:12px}
.art h3{font-size:17.5px;font-weight:700;max-width:900px;margin-top:28px;padding-left:12px;border-left:3px solid var(--dai)}
.art p{font-size:16px;color:var(--ink3);max-width:900px;margin-top:14px}
.art ul,.art ol{max-width:900px;margin-top:14px}
.art li{font-size:15.5px;color:var(--ink3);padding:7px 0 7px 22px;position:relative;border-bottom:1px solid var(--line)}
.art li::before{content:"";position:absolute;left:2px;top:19px;width:7px;height:7px;background:var(--cin)}
.art ol{counter-reset:oc}
.art ol li{counter-increment:oc;padding-left:38px}
.art ol li::before{content:counter(oc);background:none;width:auto;height:auto;left:2px;top:7px;font-size:14px;font-weight:700;color:var(--cin2)}
.art .note{
max-width:900px;margin-top:24px;padding:18px 22px;
border-left:4px solid var(--dai);background:var(--dai2);font-size:14.5px;color:var(--ink)
}
.art .check{max-width:900px;margin-top:22px;border-top:2px solid var(--ink)}
.art .check li{font-weight:400}
.art .check li::before{background:var(--dai)}
.artfig{margin:26px 0 0}
.artfig img{width:100%;height:auto;max-width:400px;box-shadow:0 0 0 1px var(--ink)}
.artfig figcaption{margin-top:12px;font-size:13.5px;color:var(--ink3);max-width:900px}
.rise{animation:unroll .62s cubic-bezier(.2,.7,.3,1) both}
.rise.d1{animation-delay:.08s}
.rise.d2{animation-delay:.16s}
.rise.d3{animation-delay:.24s}
@keyframes unroll{from{opacity:0;clip-path:inset(0 0 16% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){
.rise{animation:none;opacity:1}
}
@media (max-width:980px){
.hero__in{grid-template-columns:1fr;gap:34px}
.hero h1{font-size:32px}
.meters{grid-template-columns:repeat(2,1fr)}
.meters li:nth-child(2n){border-right:0}
.meters li:nth-child(-n+2){border-bottom:1px solid var(--line)}
.catgrid{grid-template-columns:repeat(2,1fr)}
.cat:nth-child(3n){border-right:1px solid var(--line)}
.cat:nth-child(2n){border-right:0}
.cat:nth-child(n+4){border-bottom:1px solid var(--line)}
.cat:nth-child(n+5){border-bottom:0}
.shots{grid-template-columns:repeat(2,1fr)}
.quotes{grid-template-columns:1fr}
.entries{grid-template-columns:1fr}
.sec{padding:26px 18px}
.sec__in{padding:44px 26px 46px}
.cta__in{padding:38px 26px}
.page-hero h1{font-size:28px}
.art{padding:24px 18px 40px}
.art h2{font-size:22px}
}
@media (max-width:620px){
.top{padding:0 14px}
.top__in{flex-wrap:wrap;gap:10px;min-height:0;padding:12px 0}
.brand{order:1}
.top .btn{order:2;margin-left:auto;padding:8px 14px;font-size:13.5px}
.nav{order:3;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;margin-left:0;gap:2px;padding-bottom:2px}
.nav a{padding:6px 8px;font-size:13px}
.brand__logo{width:36px;height:36px}
.brand__txt{font-size:18px}
.hero{padding:38px 14px 44px}
.hero h1{font-size:26px;padding-left:14px;border-left-width:5px}
.lead{font-size:15.5px}
.hero__shot img{max-width:250px}
.sec{padding:20px 14px}
.sec__in{padding:40px 18px 42px}
.sec__in::before{inset:4px}
.seal{left:16px;font-size:11.5px;padding:9px 4px}
.sec h2{font-size:21px}
.meters{grid-template-columns:1fr}
.meters li{border-right:0;border-bottom:1px solid var(--line)}
.meters li:last-child{border-bottom:0}
.catgrid{grid-template-columns:1fr}
.cat{border-right:0;border-bottom:1px solid var(--line)}
.cat:nth-child(n+5){border-bottom:1px solid var(--line)}
.cat:last-child{border-bottom:0}
.pace li{grid-template-columns:1fr;gap:8px}
.shots{grid-template-columns:1fr;gap:26px}
.faq summary{padding-right:28px}
.entries{gap:16px}
.cta{padding:0 14px 52px}
.cta__in{padding:32px 18px}
.cta h2{font-size:20px}
.foot{padding:0 14px}
.page-hero{padding:36px 14px 34px}
.page-hero h1{font-size:23px;padding-left:13px;border-left-width:5px}
.art{padding:8px 14px 30px}
.art h2{font-size:20px;margin-top:34px}
.art h3{font-size:16.5px}
.art p,.art li{font-size:15px}
.artfig img{max-width:320px}
}