@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@300;400;500;600;700&family=Great+Vibes&display=swap');

:root{
  --ink:#000;
  --paper:#fff;
  --serif:"Cormorant Infant","Songti SC","Noto Serif SC",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --r:18px;
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.75 var(--sans);
  overflow-x:hidden;
}

a{color:var(--ink)}
img{max-width:100%}
::selection{background:#000;color:#fff}
a:focus-visible,button:focus-visible{outline:2px solid #000;outline-offset:3px}

/* 顶部细条 */
.strip{
  position:fixed;
  top:0;left:0;right:0;
  height:34px;
  background:#000;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:60;
}
.strip p{
  margin:0;
  font-family:"Great Vibes",var(--serif);
  font-size:19px;
  line-height:1;
  letter-spacing:.08em;
}

/* 左侧固定栏 */
.masthead{
  position:fixed;
  top:34px;left:0;bottom:0;
  width:224px;
  padding:28px 20px 32px;
  background:#fff;
  border-right:1px solid #000;
  display:flex;
  flex-direction:column;
  gap:26px;
  overflow-y:auto;
  z-index:50;
}

.brand{
  display:block;
  min-height:40px;
  font-family:var(--serif);
  font-size:22px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.01em;
  text-decoration:none;
}
.brand .logo{display:block;height:auto;max-width:150px}

.masthead nav p{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0;
}

.masthead nav a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:8px 16px;
  border:1px solid #000;
  border-radius:999px;
  font-size:16px;
  line-height:1.4;
  text-decoration:none;
  transition:background .22s ease,color .22s ease;
}
.masthead nav a:hover,
.masthead nav a.on{background:#000;color:#fff}

/* 主容器 */
.shell{
  margin-left:224px;
  padding-top:34px;
}

main{
  max-width:1200px;
  margin:0 auto;
  padding:0 clamp(18px,4vw,56px);
}

/* 首屏 */
.intro{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:end;
  min-height:45vh;
  padding:clamp(26px,6vh,60px) 0 clamp(22px,4vh,40px);
  border-bottom:1px solid #000;
}

.intro-art{
  grid-column:1;
  grid-row:1;
  position:relative;
}
.intro-art:empty{display:none}

.ph{margin:0}
.ph img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid #000;
  border-radius:var(--r);
  object-fit:cover;
}
.ph1{width:80%}
.ph2{width:56%;margin:14px 0 0 auto}

.intro-copy{
  grid-column:2;
  grid-row:1;
  text-align:right;
}

h1{
  margin:0 0 18px;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(32px,5vw,58px);
  line-height:1.16;
  letter-spacing:-.01em;
}

hr.rule{
  border:0;
  border-top:1px solid #000;
  width:88px;
  margin:0 0 16px auto;
}

.lede{
  margin:0 0 0 auto;
  max-width:46ch;
  font-size:17px;
  line-height:1.8;
}

/* 正文 + 侧栏 */
.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(24px,4vw,64px);
  padding:clamp(28px,5vh,56px) 0;
}

.content{min-width:0;overflow-wrap:break-word}

.content > section{
  margin:0 0 28px;
  padding:26px 24px;
  border:1px solid #000;
  border-bottom:2px solid #000;
  border-radius:var(--r);
  scroll-margin-top:130px;
}
.content > section:last-child{margin-bottom:0}

.content h2{
  margin:0 0 12px;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(22px,2.6vw,30px);
  line-height:1.3;
}
.content h3{
  margin:22px 0 10px;
  font-family:var(--serif);
  font-weight:500;
  font-size:20px;
  line-height:1.4;
}
.content h2 + hr,
.content h3 + hr{
  border:0;
  border-top:1px solid #000;
  width:64px;
  margin:0 0 16px;
}

.content p{margin:0 0 16px}
.content p:last-child{margin-bottom:0}
.content ul,.content ol{margin:0 0 16px;padding-left:1.25em}
.content li{margin:0 0 8px}
.content a{text-decoration:underline;text-underline-offset:3px}
.content img{border-radius:var(--r);height:auto}
.content strong{font-weight:700}
.content table{width:100%;border-collapse:collapse;font-size:16px;margin:0 0 16px}
.content th,.content td{border-bottom:1px solid #000;padding:10px 8px;text-align:left;vertical-align:top}
.content blockquote{
  margin:0 0 16px;
  padding:0 0 0 16px;
  border-left:2px solid #000;
}

.rail{
  align-self:start;
  position:sticky;
  top:60px;
  padding:20px;
  border:1px solid #000;
  border-radius:var(--r);
}
.rail h2{
  margin:0 0 12px;
  font-family:var(--sans);
  font-size:16px;
  font-weight:600;
  letter-spacing:.18em;
  line-height:1.4;
}
.rail hr{
  border:0;
  border-top:1px solid #000;
  margin:0 0 10px;
}
.rail-links{
  display:flex;
  flex-direction:column;
  margin:0;
}
.rail-links a{
  display:block;
  min-height:40px;
  padding:8px 0;
  font-size:16px;
  text-decoration:none;
  border-bottom:1px dotted #000;
  transition:transform .22s ease;
}
.rail-links a:last-child{border-bottom:0}
.rail-links a:hover{transform:translateX(4px)}

/* 页脚 */
.foot{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  max-width:1200px;
  margin:40px auto 0;
  padding:36px clamp(18px,4vw,56px) 52px;
  border-top:2px solid #000;
}
.foot p{margin:0}
.foot-lead a{
  font-family:var(--serif);
  font-size:19px;
  font-weight:600;
  text-decoration:none;
}
.foot-col{display:flex;flex-direction:column}
.foot-col a{
  display:block;
  min-height:40px;
  padding:8px 0;
  font-size:16px;
  line-height:1.5;
  text-decoration:none;
}
.foot-col a:hover{text-decoration:underline;text-underline-offset:3px}
.foot small{
  grid-column:1/3;
  align-self:center;
  font-size:16px;
  line-height:1.6;
}
.foot-top{
  grid-column:3/5;
  align-self:center;
  text-align:right;
}
.foot-top a{
  display:inline-block;
  min-height:40px;
  padding:8px 18px;
  border:1px solid #000;
  border-radius:999px;
  font-size:16px;
  line-height:1.4;
  text-decoration:none;
  transition:background .22s ease,color .22s ease;
}
.foot-top a:hover{background:#000;color:#fff}

/* 入场 */
@keyframes rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
.content > section,
.rail-links a{animation:rise .45s ease both}
.content > section:nth-child(1),.rail-links a:nth-child(1){animation-delay:.04s}
.content > section:nth-child(2),.rail-links a:nth-child(2){animation-delay:.09s}
.content > section:nth-child(3),.rail-links a:nth-child(3){animation-delay:.14s}
.content > section:nth-child(4),.rail-links a:nth-child(4){animation-delay:.19s}
.content > section:nth-child(5),.rail-links a:nth-child(5){animation-delay:.24s}
.content > section:nth-child(6),.rail-links a:nth-child(6){animation-delay:.29s}
.content > section:nth-child(7),.rail-links a:nth-child(7){animation-delay:.34s}
.content > section:nth-child(8){animation-delay:.39s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{animation:none!important;transition:none!important}
}

@media (max-width:900px){
  .strip{
    position:static;
    height:auto;
    padding:6px 16px;
  }
  .strip p{font-size:17px}

  .masthead{
    position:sticky;
    top:0;left:auto;right:auto;bottom:auto;
    width:auto;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    padding:10px 16px;
    border-right:0;
    border-bottom:1px solid #000;
    overflow:visible;
  }
  .brand{flex:0 0 auto;font-size:20px;line-height:1.3}
  .masthead nav{flex:1 1 220px;min-width:0}
  .masthead nav p{
    flex-direction:row;
    gap:8px;
    overflow-x:auto;
    padding-bottom:4px;
    scrollbar-width:none;
  }
  .masthead nav p::-webkit-scrollbar{display:none}
  .masthead nav a{white-space:nowrap;padding:8px 14px}

  .shell{margin-left:0;padding-top:0}

  .intro{
    grid-template-columns:1fr;
    gap:20px;
    min-height:0;
    padding:26px 0 26px;
  }
  .intro-art{grid-column:1;grid-row:auto}
  .intro-copy{grid-column:1;grid-row:auto;text-align:left}
  hr.rule{margin-left:0}
  .lede{margin-left:0;max-width:none}
  h1{font-size:clamp(28px,8vw,40px)}

  .ph1{width:64%}
  .ph2{width:44%}

  .layout{grid-template-columns:1fr;gap:28px;padding:26px 0}
  .rail{position:static;order:2}
  .content > section{padding:22px 18px;scroll-margin-top:110px}

  .foot{
    grid-template-columns:repeat(2,1fr);
    margin-top:28px;
    padding-bottom:44px;
  }
  .foot small{grid-column:1/3}
  .foot-top{grid-column:1/3;text-align:left}
}
</｜DSML｜ parameter>
</｜DSML｜ invoke>
</｜DSML｜ calls>

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