@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;700&display=swap');

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#F3F0E9;
  color:#1B1C42;
  font-family:'Noto Naskh Arabic','Noto Sans Arabic',-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  font-size:17px;
  line-height:1.72;
}
img{display:block;max-width:100%;height:auto}
a{color:#C2365C}
h1,h2,h3{color:#2B2D6E;line-height:1.28;margin:0 0 .55em}
p,li{line-height:1.8}
hr{border:0;height:6px;width:64px;background:#FFD166;margin:.2rem 0 1.2rem}

/* --- 左侧固定头部（移动端为顶部条） --- */
.site-head{
  position:sticky;top:0;z-index:40;
  background:#2B2D6E;color:#fff;
  padding:.55rem 1rem .5rem;
  border-bottom:4px solid #FF6F91;
}
.head-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.brand{
  display:flex;align-items:center;gap:.5rem;
  color:#FFD166;font-weight:700;font-size:1.2rem;letter-spacing:.02em;
  text-decoration:none;padding:.45rem 0;min-height:40px;
}
.brand-logo{width:26px;height:26px;border:0}
.menu-btn{
  min-height:40px;padding:.4rem .9rem;border:0;
  background:#FF6F91;color:#2B2D6E;font:inherit;font-weight:700;cursor:pointer;
  transition:background-color .16s ease;
}
.menu-btn[aria-expanded="true"]{background:#FFD166}
.search{display:flex;margin:.55rem 0 0}
.search input{
  flex:1 1 auto;min-width:0;min-height:40px;border:0;padding:0 .65rem;
  font:inherit;font-size:16px;background:#fff;color:#1B1C42;
}
.search button{
  min-height:40px;border:0;padding:0 .9rem;
  background:#FFD166;color:#2B2D6E;font:inherit;font-weight:700;cursor:pointer;
}
nav{max-height:0;overflow:hidden;transition:max-height .18s ease}
.site-head.open nav{max-height:70vh;overflow-y:auto}
nav p{margin:0;padding:.2rem 0 .4rem;display:block}
nav a{
  display:block;color:#fff;text-decoration:none;
  padding:.7rem .1rem;min-height:44px;
  border-bottom:1px solid rgba(255,255,255,.16);
  transition:background-color .16s ease,color .16s ease,padding-left .16s ease;
}
nav a:hover,nav a:focus-visible{background:#FF6F91;color:#2B2D6E;padding-left:.6rem}

/* --- 主体 --- */
main{padding:1rem 1rem 2.4rem;max-width:70rem}
main article[id]{scroll-margin-top:5.5rem}
.hero{
  position:relative;overflow:hidden;
  background:#FFD166;border-left:6px solid #FF6F91;
  padding:1.35rem 1.15rem 1.5rem;margin-bottom:1.1rem;
  display:flex;flex-direction:column;
  animation:rise .26s ease both;
}
.hero h1{
  position:relative;z-index:1;margin:0 0 1rem;
  font-size:clamp(1.7rem,7vw,2.5rem);letter-spacing:-.01em;
}
.hero-num{
  position:absolute;right:.2rem;bottom:-1rem;z-index:0;
  font-size:6.5rem;font-weight:700;line-height:.8;letter-spacing:-.05em;
  color:rgba(43,45,110,.16);user-select:none;pointer-events:none;
}
.hero-fig{margin:auto 0 0;position:relative;z-index:1}
.hero-fig img{width:100%;object-fit:cover;max-height:320px}
.hero-ph{height:130px;background:#FF6F91}

main > article:not(.hero){
  background:#fff;border-left:6px solid #FF6F91;
  padding:1.25rem 1.1rem 1.5rem;margin-bottom:1.1rem;
  animation:rise .26s ease both;
}
main > article:nth-of-type(even):not(.hero){border-left-color:#FFD166}
main > article.hit{outline:4px solid #FF6F91;outline-offset:-4px}
main > article:nth-of-type(2){animation-delay:.03s}
main > article:nth-of-type(3){animation-delay:.06s}
main > article:nth-of-type(4){animation-delay:.09s}
main > article:nth-of-type(5){animation-delay:.12s}
main > article:nth-of-type(6){animation-delay:.15s}
main > article:nth-of-type(7){animation-delay:.18s}
main > article:nth-of-type(8){animation-delay:.21s}

main h2{font-size:1.42rem;margin:.2rem 0 .5rem}
main h3{font-size:1.15rem;margin:1.2rem 0 .4rem;color:#20214F}
main p{margin:.8em 0}
main ul,main ol{padding-left:1.25rem;margin:.8em 0}
main li{margin:.4em 0}
main a{color:#C2365C;text-decoration:none;border-bottom:2px solid #FFD166}
main a:hover{background:#FFD166;color:#2B2D6E}
main strong{color:#2B2D6E}
main img{width:100%;margin:1rem 0}

/* --- 侧栏 --- */
.side{
  background:#2B2D6E;color:#fff;padding:1.15rem 1.1rem;
  margin:0 0 1.1rem;animation:rise .26s ease both;
}
.side h2{color:#FFD166;font-size:1.05rem;margin:0 0 .5rem;letter-spacing:.06em}
.side hr{background:#FF6F91;height:4px;width:40px;margin:0 0 1rem}
.side-list{list-style:none;margin:0;padding:0}
.side-list a{
  display:block;color:#fff;text-decoration:none;border:0;
  border-bottom:1px solid rgba(255,255,255,.18);
  padding:.7rem .1rem;min-height:44px;font-size:.95rem;
  transition:color .16s ease,padding-left .16s ease;
}
.side-list a:hover{color:#FFD166;background:none;padding-left:.5rem}

/* --- 订阅条 --- */
.sub-band{
  background:#FF6F91;color:#2B2D6E;border-top:6px solid #2B2D6E;
  padding:1.5rem 1.1rem;display:flex;flex-direction:column;gap:1rem;
}
.sub-band h2{margin:0 0 .4rem;color:#2B2D6E;font-size:1.3rem}
.sub-band hr{background:#2B2D6E;height:6px;width:56px;margin:0}
.sub-form{display:flex;gap:.5rem;max-width:32rem}
.sub-form input{
  flex:1 1 auto;min-width:0;min-height:46px;border:2px solid #2B2D6E;
  background:#fff;padding:0 .7rem;font:inherit;font-size:16px;color:#1B1C42;
}
.sub-form button{
  min-height:46px;border:0;padding:0 1.1rem;cursor:pointer;
  background:#2B2D6E;color:#FFD166;font:inherit;font-weight:700;
  transition:background-color .16s ease;
}
.sub-form button:hover{background:#1B1C42}

/* --- 页脚 --- */
footer{
  background:#2B2D6E;color:#DCDAF0;
  padding:1.75rem 1.1rem 1.5rem;
  display:grid;grid-template-columns:1fr;gap:1rem;
}
footer p{margin:0}
.f-brand{color:#FF6F91;font-weight:700;font-size:1.15rem;letter-spacing:.02em}
.f-links{display:flex;flex-wrap:wrap;gap:.1rem 1rem}
.f-links a{
  display:inline-block;color:#FFD166;text-decoration:none;
  padding:.55rem 0;min-height:40px;
}
.f-links a:hover{color:#fff}
.f-key{font-size:.92rem;color:#A9A7CE;line-height:1.7}
footer small{
  grid-column:1/-1;display:block;color:#A9A7CE;font-size:.85rem;
  border-top:1px solid rgba(255,255,255,.2);padding-top:1rem;
}

@keyframes rise{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

@media (min-width:700px){
  footer{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:900px){
  body{padding-left:15.5rem}
  .site-head{
    position:fixed;left:0;top:0;bottom:0;width:15.5rem;
    display:flex;flex-direction:column;gap:1rem;
    padding:1.6rem 1.2rem;overflow-y:auto;
    border-bottom:0;border-right:4px solid #FF6F91;
  }
  .head-top{display:block}
  .brand{font-size:1.4rem;padding:0 0 .6rem;border-bottom:6px solid #FFD166}
  .menu-btn{display:none}
  .search{margin:0}
  nav{max-height:none;overflow:visible}
  nav a{font-size:.98rem}
}

@media (min-width:1060px){
  main{
    display:grid;grid-template-columns:minmax(0,1fr) 15.5rem;
    column-gap:2.5rem;max-width:66rem;
    padding:2rem 2rem 3rem;margin:0 auto;
  }
  main > article,main > .hero{grid-column:1}
  main > .hero{grid-row:1}
  main > aside{
    grid-column:2;grid-row:2 / span 40;align-self:start;
    position:sticky;top:1.5rem;margin:0;
  }
  main article[id]{scroll-margin-top:1.5rem}
  .sub-band{flex-direction:row;align-items:center;justify-content:space-between;padding:1.75rem 2rem}
  .sub-copy{flex:0 0 auto}
  .sub-form{flex:1 1 auto;justify-content:flex-end;max-width:none}
  .sub-form input{flex:0 1 auto;max-width:22rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero,main > article,.side{animation:none}
}

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