@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:wght@300;400;700&display=swap');

:root{
  --plum:#56228b;
  --clay:#8b4513;
  --ink:#1f1726;
  --cream:#f7f0e6;
  --sand:#efdfcd;
  --serif:'Merriweather','Songti SC','Noto Serif SC','Source Han Serif SC',Georgia,'Microsoft YaHei',serif;
  --dis:'Abril Fatface','Merriweather','Songti SC','Noto Serif SC',Georgia,serif;
}

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

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

body{
  margin:0;
  font-family:var(--serif);
  font-size:17px;
  line-height:1.8;
  color:var(--ink);
  background-color:var(--cream);
  background-image:
    radial-gradient(closest-side,rgba(86,34,139,.11),transparent 100%),
    radial-gradient(closest-side,rgba(139,69,19,.13),transparent 100%),
    radial-gradient(closest-side,rgba(86,34,139,.07),transparent 100%);
  background-size:820px 660px,640px 580px,540px 520px;
  background-position:-200px -160px,112% 14%,38% 106%;
  background-repeat:no-repeat;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(31,23,38,.03) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--plum)}

a:focus-visible,
button:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:8px}

.shell{
  position:relative;
  z-index:1;
  max-width:1120px;
  margin:0 auto;
  padding:0 clamp(14px,3vw,30px);
}

/* 顶部两行：品牌独行 + 胶囊菜单行 */
.top{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(247,240,230,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(86,34,139,.16);
}

.brandrow{padding:.7rem 0 .25rem}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  min-height:46px;
  padding:.15rem .6rem .15rem .15rem;
  border-radius:999px;
  text-decoration:none;
  color:var(--plum);
  transition:background .2s ease;
}

.brand:hover{background:rgba(86,34,139,.09)}

.mark{
  width:46px;
  height:46px;
  object-fit:cover;
  border-radius:52% 48% 55% 45%/48% 52% 45% 55%;
  background:var(--sand);
}

.brandname{
  font-family:var(--dis);
  font-weight:400;
  font-size:1.35rem;
  letter-spacing:.06em;
}

.pills{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  padding:.3rem 0 .85rem;
}

.pill{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:.4rem 1rem;
  border:1px solid rgba(86,34,139,.26);
  border-radius:999px;
  background:rgba(255,255,255,.62);
  color:var(--ink);
  font-size:1rem;
  line-height:1.4;
  text-decoration:none;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}

.pill:hover{
  background:var(--plum);
  border-color:var(--plum);
  color:#fdf7ee;
  transform:translateY(-2px);
}

.pill[aria-current="true"]{
  background:var(--clay);
  border-color:var(--clay);
  color:#fdf7ee;
}

/* Hero：点阵底纹 + 有机色块，文案右对齐，约七成屏高 */
.hero{
  position:relative;
  display:grid;
  align-items:center;
  min-height:70vh;
  margin:clamp(14px,2vw,22px) 0 clamp(20px,3vw,32px);
  padding:clamp(22px,4vw,46px);
  overflow:hidden;
  border-radius:34px 26px 38px 24px;
  background-color:#f2e6d6;
  background-image:
    radial-gradient(circle,rgba(86,34,139,.2) 1.1px,transparent 1.2px),
    radial-gradient(closest-side,rgba(139,69,19,.22),transparent 100%),
    radial-gradient(closest-side,rgba(86,34,139,.16),transparent 100%);
  background-size:19px 19px,460px 420px,380px 360px;
  background-position:0 0,88% 10%,4% 94%;
  background-repeat:repeat,no-repeat,no-repeat;
}

.hero-inner{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(14px,3vw,34px);
  width:100%;
}

.hero-copy{
  margin-left:auto;
  max-width:38ch;
  text-align:right;
}

.hero h1{
  margin:0;
  font-family:var(--dis);
  font-weight:400;
  font-size:clamp(2rem,6vw,3.5rem);
  line-height:1.18;
  letter-spacing:.015em;
  color:var(--plum);
}

.hero-figure{
  flex:0 0 auto;
  width:clamp(90px,16vw,150px);
  color:var(--clay);
  animation:drift 9s ease-in-out infinite;
}

.hero-figure svg{width:100%;height:auto;display:block}

@keyframes drift{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-12px) rotate(-4deg)}
}

/* 正文与右侧便签栏 */
.stage{
  display:flex;
  align-items:flex-start;
  gap:clamp(16px,2.4vw,30px);
}

.body{flex:1 1 auto;min-width:0}

.body > section{
  scroll-margin-top:160px;
  padding:clamp(18px,2.6vw,30px) clamp(16px,2.4vw,28px) clamp(20px,2.8vw,32px);
  margin:0 0 clamp(16px,2vw,24px);
  background:rgba(255,255,255,.68);
  border:1px solid rgba(139,69,19,.16);
  border-bottom:4px solid rgba(139,69,19,.34);
  border-radius:24px 20px 26px 18px;
  transition:transform .2s ease,border-color .2s ease;
}

.body > section:hover{
  transform:translateY(-3px);
  border-bottom-color:var(--clay);
}

.body h2,
.body h3{
  margin:.15rem 0 .7rem;
  font-family:var(--dis);
  font-weight:400;
  line-height:1.28;
  color:var(--plum);
}

.body h2{font-size:clamp(1.4rem,2.6vw,1.85rem)}

.body h3{font-size:1.25rem;color:var(--clay)}

.body small{
  display:block;
  margin-bottom:.2rem;
  font-size:1rem;
  letter-spacing:.16em;
  color:var(--clay);
}

.body p{margin:0 0 1rem}

.body ul,
.body ol{margin:0 0 1.1rem;padding-left:1.35rem}

.body li{margin:.35rem 0}

.body li::marker{color:var(--clay)}

.body a{
  color:var(--plum);
  text-underline-offset:3px;
  text-decoration-thickness:2px;
}

.body blockquote{
  margin:0 0 1.1rem;
  padding:.9rem 1.1rem;
  background:rgba(86,34,139,.07);
  border-left:5px solid rgba(86,34,139,.35);
  border-radius:0 18px 18px 0;
}

.body blockquote p:last-child{margin-bottom:0}

.body img{margin:.4rem 0 1rem;border-radius:18px}

.body time{font-size:1rem;color:var(--clay);letter-spacing:.04em}

.body table{
  width:100%;
  margin:0 0 1rem;
  border-collapse:collapse;
}

.body th,
.body td{
  padding:.5rem .6rem;
  text-align:left;
  border-bottom:1px solid rgba(31,23,38,.16);
}

.rail{
  position:sticky;
  top:160px;
  flex:0 0 clamp(220px,24vw,272px);
  padding:1.1rem 1.1rem 1.3rem;
  background-color:rgba(255,255,255,.74);
  background-image:radial-gradient(circle,rgba(86,34,139,.16) 1px,transparent 1.1px);
  background-size:16px 16px;
  border:1px solid rgba(86,34,139,.18);
  border-radius:26px 22px 24px 20px;
}

.rail small{
  display:block;
  font-size:1rem;
  letter-spacing:.2em;
  color:var(--clay);
}

.rail h2{
  margin:.15rem 0 .7rem;
  font-family:var(--dis);
  font-weight:400;
  font-size:1.3rem;
  color:var(--plum);
}

.rail ul{margin:0;padding:0;list-style:none}

.rail a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:.35rem .2rem;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px dotted rgba(31,23,38,.26);
  transition:color .18s ease,transform .18s ease;
}

.rail a:hover{
  color:var(--plum);
  transform:translateX(3px);
}

/* 页脚：三列 dl + 居中底栏 */
.foot{
  margin-top:clamp(24px,4vw,44px);
  padding:clamp(22px,3vw,34px) clamp(16px,3vw,30px) 1rem;
  color:#f5e9dc;
  background-image:linear-gradient(165deg,#2c1b3d,#3a2418 68%,#4a2f1c);
  border-radius:36px 30px 0 0;
}

.footnav{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,3vw,28px);
}

.footnav dl{margin:0}

.footnav dt{
  margin-bottom:.3rem;
  font-size:1rem;
  letter-spacing:.18em;
  color:#d9b389;
}

.footnav dd{margin:0}

.footnav a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:.3rem 0;
  color:#f5e9dc;
  text-decoration:none;
  border-bottom:1px dashed rgba(245,233,220,.22);
  transition:color .18s ease,padding-left .18s ease;
}

.footnav a:hover{
  color:#f0c69a;
  padding-left:4px;
}

.footbase{
  margin-top:1.4rem;
  padding-top:.9rem;
  border-top:1px solid rgba(245,233,220,.2);
  text-align:center;
  font-size:1rem;
  color:rgba(245,233,220,.84);
}

.footbase p{margin:.15rem 0}

.footbase a{color:#f0c69a}

@media (max-width:860px){
  .stage{flex-direction:column}

  .rail{
    position:static;
    order:2;
    flex:1 1 auto;
    width:100%;
    padding:1rem;
  }

  .rail ul{
    display:flex;
    flex-wrap:wrap;
    gap:.4rem;
  }

  .rail a{
    min-height:40px;
    padding:.3rem .8rem;
    border:1px solid rgba(86,34,139,.22);
    border-radius:999px;
  }

  .hero{
    min-height:auto;
    padding:26px 20px 30px;
  }

  .hero-inner{
    flex-direction:column-reverse;
    align-items:flex-end;
  }

  .hero-figure{width:88px}

  .body > section{scroll-margin-top:200px}
}

@media (max-width:560px){
  .pill{padding:.35rem .8rem}

  .hero h1{font-size:clamp(1.9rem,8vw,2.6rem)}

  .footnav{grid-template-columns:1fr}
}

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

  *,
  *::before,
  *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

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