@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

:root{
--ink:#171f26;
--ink-soft:#43525f;
--ice:#c8e0f4;
--rose:#f5e0e8;
--base:#e9f1f8;
--base-warm:#f8eff3;
--card-a:#f4f9fd;
--card-b:#e5edf4;
--lift:-6px -8px 18px rgba(255,255,255,.92), 8px 10px 26px rgba(23,31,38,.13);
--lift-sm:-3px -4px 10px rgba(255,255,255,.9), 4px 5px 14px rgba(23,31,38,.12);
--press:inset 4px 4px 10px rgba(23,31,38,.15), inset -4px -4px 10px rgba(255,255,255,.92);
--r:16px;
}

*,
*::before,
*::after{box-sizing:border-box;}

html{
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
}

body{
margin:0;
overflow-x:clip;
font-family:Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
font-size:17px;
line-height:1.75;
font-weight:400;
color:var(--ink);
background:
linear-gradient(165deg, var(--base) 0%, #f3eef6 52%, var(--base-warm) 100%);
background-attachment:fixed;
}

img{max-width:100%;}

a{color:inherit;}

:focus-visible{
outline:3px solid #7fa8c9;
outline-offset:3px;
}

h1,h2,h3{
font-family:Newsreader,Georgia,"Songti SC","Times New Roman",serif;
font-weight:600;
margin:0;
}

section{scroll-margin-top:96px;}

/* ---------- 页头 ---------- */
.masthead{
padding:0 0 12px;
background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
}

.ticker{
margin:0 0 8px;
padding:9px clamp(16px,4.5vw,44px);
font-size:.82rem;
line-height:1.55;
letter-spacing:.03em;
color:var(--ink-soft);
text-align:center;
background:linear-gradient(90deg, var(--ice), #e6ecf6 48%, var(--rose));
border-radius:0 0 18px 18px;
box-shadow:0 6px 18px rgba(23,31,38,.08);
}

.brandbar{
padding:6px clamp(16px,4.5vw,44px) 10px;
}

.brand{
display:inline-flex;
align-items:center;
gap:10px;
padding:4px 2px;
min-height:44px;
text-decoration:none;
color:var(--ink);
}

.logo{
border-radius:12px;
box-shadow:var(--lift-sm);
}

.brand-name{
font-family:Newsreader,Georgia,serif;
font-size:clamp(1.35rem,3.4vw,1.85rem);
font-weight:700;
letter-spacing:.02em;
}

.tabs{
padding:0 clamp(14px,4vw,42px);
max-width:100%;
min-width:0;
}

.tabs p{
display:flex;
flex-wrap:wrap;
gap:8px 7px;
margin:0;
min-width:0;
}

.tab{
display:inline-flex;
align-items:center;
min-height:42px;
padding:10px 15px;
border-radius:var(--r);
font-size:.95rem;
text-decoration:none;
color:var(--ink);
background:linear-gradient(145deg, #f2f8fc, #e2eaf2);
box-shadow:var(--lift-sm);
transition:box-shadow .18s ease, transform .18s ease;
}

.tab:hover{
box-shadow:var(--press);
transform:translateY(1px);
}

.tab:first-child{
background:linear-gradient(145deg, var(--rose), #ecd6df);
}

/* ---------- 头图 ---------- */
.hero{
position:relative;
display:flex;
align-items:flex-end;
max-width:100%;
margin:12px clamp(10px,2vw,20px) 0;
min-height:calc(100svh - 250px);
overflow:hidden;
border-radius:0 0 50% 50% / 0 0 72px 72px;
background:linear-gradient(160deg,#31424f,#101820);
box-shadow:var(--lift);
}

.hero-figure{
position:absolute;
inset:-10% 0 -10%;
margin:0;
}

.hero-figure--plain{
background:
radial-gradient(120% 90% at 12% 8%, rgba(200,224,244,.5), transparent 60%),
radial-gradient(120% 90% at 88% 92%, rgba(245,224,232,.55), transparent 62%),
linear-gradient(150deg,#2b3b48,#131c24);
}

.hero-art{
display:block;
width:100%;
height:100%;
object-fit:cover;
}

.hero::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(23,31,38,.1) 0%, rgba(23,31,38,.35) 48%, rgba(23,31,38,.84) 100%);
}

.hero-badge{
position:absolute;
top:clamp(16px,4vw,30px);
right:clamp(16px,4vw,30px);
z-index:3;
display:inline-flex;
align-items:center;
min-height:44px;
padding:10px 20px;
border-radius:999px;
font-size:.9rem;
letter-spacing:.05em;
text-decoration:none;
color:var(--ink);
background:rgba(255,255,255,.76);
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px);
box-shadow:0 10px 26px rgba(23,31,38,.28);
transition:transform .15s ease, background .15s ease;
}

.hero-badge:hover{
transform:scale(.97);
background:rgba(255,255,255,.92);
}

.hero-inner{
position:relative;
z-index:2;
width:100%;
min-width:0;
padding:clamp(26px,5vw,68px);
}

.hero h1{
max-width:22ch;
font-size:clamp(2.05rem,6.2vw,3.8rem);
line-height:1.12;
letter-spacing:-.01em;
color:#fff;
text-shadow:0 4px 26px rgba(10,16,22,.45);
}

/* ---------- 主体排布 ---------- */
.stage{
display:grid;
grid-template-columns:264px minmax(0,1fr);
gap:clamp(18px,3vw,34px);
align-items:start;
max-width:1200px;
min-width:0;
margin:clamp(28px,5vw,56px) auto 0;
padding:0 clamp(14px,4vw,40px);
}

/* ---------- 左侧栏 ---------- */
.rail{
position:sticky;
top:22px;
min-width:0;
padding:22px 20px;
border-radius:22px;
background:linear-gradient(145deg, var(--card-a), var(--card-b));
box-shadow:var(--lift);
}

.rail small{
display:block;
font-size:.72rem;
font-weight:500;
letter-spacing:.22em;
color:var(--ink-soft);
}

.rail h2{
margin:4px 0 0;
font-size:1.22rem;
line-height:1.3;
}

.rail-list{
display:flex;
flex-direction:column;
gap:2px;
margin:14px 0 0;
}

.rail-list a{
display:flex;
align-items:center;
min-height:40px;
padding:8px 12px;
border-radius:12px;
font-size:.94rem;
line-height:1.5;
text-decoration:none;
color:var(--ink-soft);
transition:box-shadow .16s ease, color .16s ease;
}

.rail-list a:hover{
color:var(--ink);
background:rgba(255,255,255,.55);
box-shadow:var(--press);
}

/* ---------- 正文 ---------- */
.col{
min-width:0;
max-width:100%;
overflow-wrap:break-word;
}

.col > section{
margin-bottom:clamp(16px,2.6vw,26px);
padding:clamp(20px,3.2vw,36px);
border-radius:28px;
background:linear-gradient(145deg, var(--card-a), var(--card-b));
box-shadow:var(--lift);
min-width:0;
max-width:100%;
}

.col small{
display:block;
margin-bottom:2px;
font-family:Roboto,sans-serif;
font-size:.73rem;
font-weight:500;
letter-spacing:.2em;
color:var(--ink-soft);
}

.col h2{
margin:.1em 0 .55em;
font-size:clamp(1.45rem,3vw,2rem);
line-height:1.28;
letter-spacing:-.005em;
}

.col h3{
margin:1.3em 0 .45em;
font-size:clamp(1.14rem,2.2vw,1.32rem);
line-height:1.4;
}

.col p{
margin:0 0 1.05em;
font-size:1.02rem;
line-height:1.88;
color:var(--ink-soft);
}

.col p:last-child{margin-bottom:0;}

.col ul,
.col ol{
margin:0 0 1.1em;
padding-left:1.25em;
}

.col li{
margin-bottom:.45em;
line-height:1.85;
color:var(--ink-soft);
}

.col a{
color:#25455e;
text-decoration:underline;
text-decoration-color:rgba(37,69,94,.35);
text-underline-offset:3px;
}

.col a:hover{text-decoration-color:#25455e;}

.col img,
.col svg,
.col video,
.col iframe{
display:block;
max-width:100%;
height:auto;
}

.col img{
margin:1.1em 0;
border-radius:18px;
box-shadow:var(--lift-sm);
}

.col iframe{width:100%;}

.col figure,
.col aside{
margin:1.2em 0;
max-width:100%;
min-width:0;
}

.col figure img{margin:0;}

.col table{
display:block;
width:100%;
max-width:100%;
overflow-x:auto;
border-collapse:collapse;
}

.col pre{
max-width:100%;
overflow-x:auto;
padding:14px 16px;
border-radius:14px;
background:rgba(255,255,255,.55);
box-shadow:var(--press);
}

.col pre code{
font-size:.9rem;
white-space:pre;
}

.col blockquote{
margin:1.2em 0;
padding:16px 20px;
border-radius:16px;
background:rgba(255,255,255,.5);
box-shadow:var(--press);
color:var(--ink);
}

.col blockquote p{color:var(--ink);}

.col hr{
height:0;
margin:1.6em 0;
border:0;
border-top:1px solid rgba(23,31,38,.1);
}

/* ---------- 页脚 ---------- */
.foot{
display:grid;
grid-template-columns:1.15fr 1fr .9fr;
gap:26px;
min-width:0;
margin-top:clamp(40px,7vw,80px);
padding:clamp(28px,5vw,54px) clamp(18px,4.5vw,48px) 30px;
border-radius:48px 48px 0 0;
background:linear-gradient(180deg, #e5edf5, var(--base-warm));
box-shadow:inset 0 10px 26px rgba(255,255,255,.85), 0 -12px 34px rgba(23,31,38,.09);
}

.foot h3{
margin:0 0 10px;
font-size:1.02rem;
letter-spacing:.02em;
}

.foot p{margin:0;}

.f-logo{
display:inline-flex;
align-items:center;
gap:9px;
min-height:44px;
text-decoration:none;
font-family:Newsreader,Georgia,serif;
font-size:1.14rem;
font-weight:600;
color:var(--ink);
}

.f-links p{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:2px;
}

.f-links a{
display:inline-flex;
align-items:center;
min-height:40px;
padding:6px 11px;
border-radius:11px;
font-size:.94rem;
text-decoration:none;
color:var(--ink-soft);
transition:box-shadow .16s ease, color .16s ease;
}

.f-links a:hover{
color:var(--ink);
background:rgba(255,255,255,.6);
box-shadow:var(--press);
}

.f-legal{
font-size:.88rem;
line-height:1.8;
color:var(--ink-soft);
text-align:right;
}

.totop a{
display:inline-flex;
align-items:center;
min-height:40px;
padding:6px 0;
font-size:.9rem;
text-decoration:none;
color:var(--ink);
}

/* ---------- 动效 ---------- */
.js .col > section,
.js .rail{
opacity:0;
transform:translateY(18px);
transition:opacity .55s ease, transform .55s ease;
}

.js .col > section.in,
.js .rail.in{
opacity:1;
transform:none;
}

/* ---------- 中等屏 ---------- */
@media (max-width:860px){
.stage{
grid-template-columns:minmax(0,1fr);
margin-top:26px;
}

.rail{
position:static;
order:-1;
}

.rail-list{
flex-direction:row;
flex-wrap:wrap;
}

.rail-list a{
padding:8px 11px;
}

.foot{
grid-template-columns:1fr;
gap:20px;
border-radius:36px 36px 0 0;
}

.f-legal{text-align:left;}
}

/* ---------- 移动端 ---------- */
@media (max-width:720px){
body{font-size:16.5px;}

.ticker{
padding:8px 14px;
font-size:.78rem;
}

.brandbar{padding:4px 16px 8px;}

.brand-name{font-size:1.32rem;}

.tabs{
overflow-x:auto;
overflow-y:hidden;
padding:0 16px 6px;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}

.tabs::-webkit-scrollbar{display:none;}

.tabs p{
flex-wrap:nowrap;
gap:7px;
}

.tab{
flex:0 0 auto;
min-height:44px;
padding:10px 14px;
font-size:.92rem;
}

.hero{
align-items:flex-start;
min-height:clamp(240px,62svh,460px);
margin-top:10px;
border-radius:0 0 50% 50% / 0 0 46px 46px;
}

.hero::after{
background:linear-gradient(180deg, rgba(23,31,38,.62) 0%, rgba(23,31,38,.46) 55%, rgba(23,31,38,.82) 100%);
}

.hero-inner{padding:26px 20px 60px;}

.hero h1{
max-width:14ch;
font-size:clamp(1.85rem,8vw,2.6rem);
}

.hero-badge{
top:auto;
right:14px;
bottom:14px;
min-height:40px;
padding:8px 16px;
font-size:.82rem;
}

.stage{padding:0 14px;}

.col > section{border-radius:24px;}
}

@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}

.js .col > section,
.js .rail{
opacity:1;
transform:none;
transition:none;
}

.tab,
.hero-badge,
.rail-list a,
.f-links a{
transition:none;
}
}

button[aria-expanded]{min-width:44px;min-height:44px}