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

:root{
  --peach:#FF6B6B;
  --night:#2B2D42;
  --sun:#FFD166;
  --paper:#FFF7F0;
  --soft:#FFE9DF;
  --line:3px solid #2B2D42;
  --r:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:122px;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--night);
  font-family:'Quicksand','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  font-size:17px;
  line-height:1.75;
  font-weight:500;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--night);text-decoration:none;transition:color .16s ease,background-color .16s ease,border-color .16s ease}
a:hover{color:var(--peach)}
h1,h2,h3,h4{margin:0 0 .6em;line-height:1.25;font-weight:700;letter-spacing:.01em}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 顶栏：品牌行 + 菜单行 */
.top{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--paper);
  border-bottom:var(--line);
}
.brandrow{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.55rem clamp(.85rem,4vw,2rem);
  border-bottom:2px dashed rgba(43,45,66,.3);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:46px;
  padding-right:.3rem;
}
.brand:hover .brandname{color:var(--night);background:var(--sun)}
.brandname{
  font-family:'Caveat','Quicksand',cursive;
  font-size:clamp(1.75rem,5vw,2.4rem);
  font-weight:700;
  line-height:1;
  color:var(--peach);
  padding:0 .12em;
  border-radius:4px;
  transition:background-color .16s ease,color .16s ease;
}
.mark{
  width:38px;height:38px;
  border-radius:50%;
  border:3px solid var(--night);
  object-fit:cover;
  background:var(--sun);
}
.find{
  display:flex;
  margin-left:auto;
  border:2px solid var(--night);
  border-radius:4px;
  overflow:hidden;
  background:#fff;
  max-width:100%;
}
.find input{
  font:inherit;
  font-size:16px;
  font-weight:500;
  border:0;
  background:transparent;
  color:var(--night);
  padding:.45rem .55rem;
  width:8.5rem;
  min-width:0;
}
.find input:focus{outline:none;background:#FFFDF8}
.find button{
  font:inherit;
  font-size:16px;
  font-weight:700;
  border:0;
  border-left:2px solid var(--night);
  background:var(--sun);
  color:var(--night);
  padding:.45rem .8rem;
  min-height:42px;
  cursor:pointer;
}
.find button:hover{background:var(--peach);color:#fff}
.menuro{padding:0 clamp(.3rem,3vw,1.8rem)}
.mainnav{
  display:flex;
  gap:.15rem;
  overflow-x:auto;
  scrollbar-width:none;
}
.mainnav::-webkit-scrollbar{display:none}
.mlink{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:.35rem .7rem;
  font-size:1rem;
  font-weight:700;
  white-space:nowrap;
  border-bottom:4px solid transparent;
  border-radius:4px 4px 0 0;
}
.mlink:hover,.mlink:focus-visible{
  background:var(--sun);
  color:var(--night);
  border-bottom-color:var(--peach);
  outline:none;
}

/* 正文骨架 */
main{padding:0 clamp(.9rem,4vw,2rem) clamp(2rem,6vw,4rem)}
.article{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.6rem;
}

/* Hero */
.hero{
  position:relative;
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.4rem;
  align-content:center;
  min-height:min(70vh,600px);
  padding:clamp(1.4rem,5vw,3rem) 0 clamp(1.8rem,5vw,3.2rem);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  z-index:0;
  left:-6%;right:-6%;bottom:4%;
  height:46%;
  background:var(--peach);
  clip-path:polygon(0 76%,100% 0,100% 100%,0 100%);
}
.herocopy{position:relative;z-index:1}
.hero h1{
  font-size:clamp(1.95rem,6.6vw,3.5rem);
  margin-bottom:.5em;
}
.hero h1 span{
  background:var(--sun);
  color:var(--night);
  padding:.05em .2em;
  border-radius:4px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.lede{
  margin:0 0 1.3rem;
  max-width:44ch;
  font-size:1.06rem;
  font-weight:500;
  color:rgba(43,45,66,.82);
}
.cta{
  display:inline-flex;
  align-items:center;
  min-height:46px;
  padding:.6rem 1.4rem;
  background:var(--night);
  color:#fff;
  font-weight:700;
  border-radius:4px;
}
.cta:hover{background:var(--peach);color:#fff}
.collage{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
  align-items:start;
  max-width:540px;
}
.collage:empty{display:none}
.shot{
  width:100%;
  aspect-ratio:16 / 11;
  object-fit:cover;
  border:4px solid var(--night);
  border-radius:var(--r);
  background:var(--night);
}
.collage .s2{margin-top:1.7rem;margin-left:-.35rem}

/* 正文流 */
.prose{min-width:0;grid-column:1}
.prose div{
  scroll-margin-top:126px;
  padding:1.5rem 0 1.9rem;
  border-top:3px dashed rgba(43,45,66,.24);
}
.prose div:first-child{border-top:0;padding-top:.3rem}
.prose h2{font-size:clamp(1.35rem,3.4vw,1.95rem);margin-top:.15em}
.prose h2 > span{display:inline-block;background:var(--sun);padding:.07em .38em;border-radius:4px}
.prose h3{font-size:1.16rem;color:var(--peach);margin-top:1.4em}
.prose h3 > span{display:inline-block;border-bottom:3px solid var(--sun)}
.prose p{margin:0 0 1em}
.prose ul,.prose ol{margin:0 0 1.1em;padding-left:1.35em}
.prose li{margin:.35em 0}
.prose a{color:var(--peach);font-weight:700;border-bottom:2px solid var(--sun)}
.prose a:hover{background:var(--sun);color:var(--night);border-bottom-color:var(--night)}
.prose strong,.prose b{background:var(--sun);color:var(--night);padding:0 .16em}
.prose blockquote{
  margin:1.3em 0;
  padding:.9em 1.1em;
  background:var(--soft);
  border-left:6px solid var(--peach);
  border-radius:0 var(--r) var(--r) 0;
}
.prose blockquote p:last-child{margin-bottom:0}
.prose img{border:4px solid var(--night);border-radius:var(--r);margin:1em 0}
.prose figure{margin:1.2em 0}
.prose figcaption{font-size:1rem;color:rgba(43,45,66,.7);margin-top:.4em}
.prose time{font-weight:700;color:var(--peach)}
.prose table{width:100%;border-collapse:collapse;font-size:1rem;word-break:break-word}
.prose th,.prose td{border:2px solid var(--night);padding:.5em .6em;text-align:left}
.prose th{background:var(--sun)}
.prose hr{border:0;border-top:3px dashed rgba(43,45,66,.24);margin:1.6em 0}

/* 右侧栏 */
.rail{
  grid-column:1;
  display:grid;
  gap:1rem;
  align-content:start;
}
.railcard{border-radius:var(--r);padding:1rem 1.1rem}
.jump{background:var(--night);color:#F4EFEA}
.jump h2{font-size:1.05rem;color:var(--sun);margin-bottom:.7em}
.jump h2 > span{background:none;color:inherit;padding:0}
.jumplist{list-style:none;margin:0;padding:0}
.jumplist a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:.35rem .1rem;
  color:#F4EFEA;
  font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.jumplist li:last-child a{border-bottom:0}
.jumplist a:hover{color:var(--sun)}
.totop{background:var(--peach);color:#fff}
.totop h2{font-size:1.05rem;color:#fff;margin-bottom:.6em}
.totop h2 > span{background:none;color:inherit;padding:0}
.topbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:.5rem 1.2rem;
  background:#fff;
  color:var(--night);
  font-weight:700;
  border-radius:4px;
}
.topbtn:hover{background:var(--night);color:var(--sun)}

/* 页脚 */
.foot{
  margin-top:2.4rem;
  background:var(--night);
  color:#F4EFEA;
  padding:clamp(1.7rem,5vw,3rem) clamp(.9rem,4vw,2rem) 1.1rem;
}
.footcols{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  gap:1.5rem;
  grid-template-columns:minmax(0,1fr);
}
.fcol{min-width:0}
.fbrand{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-family:'Caveat','Quicksand',cursive;
  font-size:1.9rem;
  font-weight:700;
  line-height:1;
  color:var(--sun);
}
.fbrand:hover{color:var(--peach)}
.fcol address{
  font-style:normal;
  font-size:1rem;
  color:rgba(244,239,234,.72);
  margin-top:.3rem;
}
.fhead{font-size:1rem;font-weight:700;color:var(--sun);margin:0 0 .4rem}
.fcol ul{list-style:none;margin:0;padding:0}
.fnav dl{margin:0}
.fnav dt{font-size:1rem;font-weight:700;color:var(--sun);margin-bottom:.4rem}
.fnav dd{margin:0}
.fcol ul a,.fnav dd a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:.2rem 0;
  color:#F4EFEA;
  font-weight:600;
}
.fcol ul a:hover,.fnav dd a:hover{color:var(--sun)}
.footbase{
  max-width:1180px;
  margin:1.6rem auto 0;
  padding-top:.9rem;
  border-top:1px solid rgba(244,239,234,.24);
  text-align:center;
}
.copy{margin:0;font-size:1rem;color:rgba(244,239,234,.8)}

/* 断点 */
@media (min-width:640px){
  .footcols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .find input{width:12rem}
}
@media (min-width:900px){
  .hero{grid-template-columns:1.05fr .95fr;align-items:center;gap:2.4rem}
  .herocopy{padding-right:.5rem}
}
@media (min-width:960px){
  .article{grid-template-columns:minmax(0,1fr) 282px;gap:2.4rem}
  .rail{grid-column:2;position:sticky;top:132px}
  .footcols{grid-template-columns:1.2fr 1.35fr 1fr 1fr;gap:1.2rem}
}

/* 进场动效 */
@media (prefers-reduced-motion:no-preference){
  html.js .prose > div{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .2s ease,transform .2s ease;
  }
  html.js .prose > div.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  a,button,input{transition:none}
}

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