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

:root{
  --sage:#7C8F76;
  --sage-deep:#57684f;
  --cream:#F3EDE4;
  --paper:#FAF6EF;
  --ink:#2C2A28;
  --mute:#6f6a62;
  --line:rgba(44,42,40,.14);
  --line-soft:rgba(44,42,40,.08);
  --serif:'Lora','Songti SC','Source Han Serif SC','Noto Serif SC',Georgia,serif;
  --sans:'Raleway','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --pad:clamp(1rem,4.5vw,3.4rem);
  --top:8.5rem;
}

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

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

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

a{color:inherit}
img{max-width:100%;height:auto;border-radius:4px}
p{margin:0 0 1.1rem}
ul,ol{margin:0 0 1.2rem;padding-left:1.3rem}

:focus-visible{
  outline:2px solid var(--sage-deep);
  outline-offset:3px;
}

.skip a{
  position:fixed;
  left:.5rem;
  top:-4rem;
  z-index:99;
  background:var(--ink);
  color:var(--cream);
  padding:.7rem 1.1rem;
  border-radius:4px;
  text-decoration:none;
  transition:top .2s ease;
}
.skip a:focus{top:.5rem}

/* ---------- 页头 ---------- */

.mast{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(243,237,228,.94);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.strip{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  color:var(--cream);
  border-bottom:1px solid var(--line);
}

.strip__track{
  display:flex;
  gap:2.6rem;
  padding-left:2.6rem;
  white-space:nowrap;
  line-height:32px;
  font-size:14px;
  letter-spacing:.3em;
  animation:slide 30s linear infinite;
  will-change:transform;
}

.strip__track span::after{
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--sage);
  margin-left:2.6rem;
  vertical-align:middle;
}

.strip__bar{
  position:absolute;
  left:0;
  bottom:0;
  height:2px;
  width:0;
  background:var(--sage);
  transition:width .12s linear;
}

@keyframes slide{
  to{transform:translateX(-50%)}
}

.mast__row{
  display:flex;
  padding:.55rem var(--pad) 0;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  min-height:46px;
  padding:.35rem 0;
  text-decoration:none;
  font-family:var(--serif);
  font-size:clamp(1.05rem,2.3vw,1.35rem);
  font-weight:600;
  letter-spacing:.36em;
}

.brand__mark{
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--sage);
}

.brand__word{
  background:linear-gradient(120deg,var(--ink) 20%,var(--sage-deep));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.mast__nav{
  padding:0 var(--pad) .1rem;
}

.mast__nav p{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:0 1.35rem;
}

.mast__a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.2rem 0;
  font-size:16px;
  letter-spacing:.05em;
  color:var(--mute);
  text-decoration:none;
  transition:color .25s ease;
}

.mast__a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:.85rem;
  height:1px;
  background:var(--sage);
  transition:right .38s cubic-bezier(.2,.8,.2,1);
}

.mast__a:hover,
.mast__a:focus-visible{color:var(--ink)}
.mast__a:hover::after,
.mast__a:focus-visible::after{right:0}

/* ---------- 主栅格 ---------- */

main{
  display:grid;
  grid-template-columns:minmax(0,1fr) 248px;
  column-gap:clamp(1.6rem,4vw,3.6rem);
  max-width:1160px;
  margin:0 auto;
  padding:0 var(--pad) 4.5rem;
}

/* ---------- 首屏 ---------- */

.hero{
  grid-column:1;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:clamp(1.2rem,3vw,2.2rem);
  min-height:70vh;
  padding:clamp(2.4rem,7vw,4.5rem) 0 clamp(1.6rem,4vw,2.6rem);
  text-align:right;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:100%;
  background-image:radial-gradient(var(--sage) 1px,transparent 1px);
  background-size:19px 19px;
  opacity:.3;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 10%,transparent 92%);
  mask-image:linear-gradient(#000 10%,transparent 92%);
}

.hero > *{position:relative}

.hero__h1{
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2rem,8vw,4.5rem);
  line-height:1.07;
  letter-spacing:-.015em;
  white-space:pre-wrap;
  overflow-wrap:break-word;
}

.hero__h1 span{
  display:inline-block;
  background:linear-gradient(165deg,var(--ink) 25%,var(--sage-deep));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  opacity:0;
  transform:translateY(.45em) rotate(3deg);
  animation:charIn .86s cubic-bezier(.19,.9,.24,1) forwards;
  animation-delay:calc(var(--i,0) * 40ms + 140ms);
}

@keyframes charIn{
  to{opacity:1;transform:none}
}

.hero__fig{
  margin:0;
  border-radius:4px;
  border-bottom:3px solid var(--sage);
  overflow:hidden;
  background:rgba(124,143,118,.14);
}

.hero__img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:0;
  transform:scale(1.02);
  transition:transform 1.4s cubic-bezier(.2,.8,.2,1);
}

.hero__fig:hover .hero__img{transform:scale(1.06)}

/* ---------- 侧栏 ---------- */

.rail{
  grid-column:2;
  grid-row:1 / span 99;
  align-self:start;
  position:sticky;
  top:var(--top);
  margin-top:clamp(2.4rem,6vw,3.6rem);
  padding-top:1.1rem;
  border-top:2px solid var(--ink);
}

.rail__h{
  margin:0 0 .2rem;
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:.3em;
}

.subtitle{
  margin:0 0 1.1rem;
  font-family:var(--serif);
  font-size:16px;
  line-height:1.7;
  color:var(--mute);
}

.rail__links{
  margin:0;
  display:flex;
  flex-direction:column;
}

.rail__a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:.15rem 0;
  font-size:15px;
  text-decoration:none;
  border-bottom:1px solid var(--line-soft);
  transition:padding-left .3s ease,color .3s ease;
}

.rail__a:hover,
.rail__a:focus-visible{
  padding-left:.45rem;
  color:var(--sage-deep);
}

/* ---------- 正文区块 ---------- */

main > section:not(.hero){
  grid-column:1;
  padding:clamp(2.2rem,5vw,3.4rem) 0;
  border-top:1px solid var(--line);
}

main > section:not(.hero).reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1);
}

main > section:not(.hero).in{
  opacity:1;
  transform:none;
}

main section[id]{scroll-margin-top:var(--top)}

main section h2{
  margin:0 0 .55rem;
  font-family:var(--serif);
  font-size:clamp(1.45rem,3.6vw,2rem);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.01em;
}

main section h3{
  margin:1.7rem 0 .4rem;
  font-family:var(--serif);
  font-size:1.15rem;
  font-weight:600;
  line-height:1.45;
}

main section p,
main section li{
  font-family:var(--serif);
  font-size:17px;
  line-height:1.85;
}

main section figure{
  margin:1.5rem 0;
  padding-bottom:.5rem;
  border-bottom:2px solid var(--sage);
}

main section blockquote{
  margin:1.5rem 0;
  padding:.2rem 0 .2rem 1.2rem;
  border-left:3px solid var(--sage);
  color:var(--mute);
  font-family:var(--serif);
}

main section figure img{border-radius:4px}

/* ---------- 页脚 ---------- */

.foot{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1rem 2rem;
  padding:1.3rem var(--pad) 2rem;
  border-top:1px solid var(--line);
  background:var(--paper);
}

.foot__brand a{
  text-decoration:none;
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.3em;
}

.foot__nav p{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:.1rem 1.1rem;
  justify-content:center;
}

.foot__a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:15px;
  color:var(--mute);
  text-decoration:none;
  transition:color .25s ease;
}

.foot__a:hover,
.foot__a:focus-visible{color:var(--ink)}

.foot__copy{
  margin:0;
  font-size:15px;
  letter-spacing:.1em;
  text-align:center;
  color:var(--mute);
}

/* ---------- 断点 ---------- */

@media (max-width:960px){
  main{grid-template-columns:minmax(0,1fr)}
  .rail{
    grid-column:1;
    grid-row:auto;
    position:static;
    margin:1.6rem 0 0;
    border-top-width:1px;
  }
  .rail__links{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:1rem;
  }
  .hero{min-height:auto}
  .foot{grid-template-columns:1fr;text-align:center;gap:.4rem}
  .foot__nav p{justify-content:center}
  .foot__brand a{display:inline-flex;align-items:center;min-height:44px}
}

@media (max-width:600px){
  body{font-size:16px}
  .mast__nav p{gap:0 1rem}
  .mast__a{font-size:16px}
  .hero{padding-top:2rem}
  .rail__links{grid-template-columns:minmax(0,1fr)}
  main section p,
  main section li{font-size:16px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .strip__track{animation:none;transform:none}
  .hero__h1 span{animation:none;opacity:1;transform:none}
  .hero__img{transition:none}
  main > section:not(.hero).reveal{opacity:1;transform:none;transition:none}
  .mast__a::after{transition:none}
}
</｜DSML｜ parameter>
</｜DSML｜ invoke>
</｜DSML｜ calls>

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