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

:root{
  --paper:#fdfbf7;
  --fog:#f5f5f5;
  --ink:#1a1a1a;
  --grey:#6e6e6e;
  --rule:#e0e0e0;
  --pad:clamp(16px,4.5vw,40px);
  --ease:120ms linear;
}

*,*::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-family:'Epilogue',system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.75;
  padding-bottom:88px;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:40;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

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

p{margin:0 0 1em}

a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:background-color var(--ease),color var(--ease),border-color var(--ease);
}

h1,h2,h3,h4{
  font-family:'Anton',Impact,"Arial Narrow",system-ui,sans-serif;
  font-weight:400;
  line-height:1.15;
  letter-spacing:.01em;
  margin:0;
}

h1{font-size:clamp(32px,7.5vw,60px)}

:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---- 底部固定条 ---- */
.dock{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px var(--pad) calc(8px + env(safe-area-inset-bottom));
  background:var(--paper);
  border-top:1px solid var(--ink);
}

.mark{
  position:relative;
  z-index:3;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid var(--ink);
  border-radius:4px;
  background:var(--paper);
  color:var(--ink);
  font-family:'Anton',Impact,system-ui,sans-serif;
  font-size:19px;
  line-height:1;
  text-decoration:none;
}

.mark-flat{width:42px;height:42px;font-size:17px}

a.mark:hover{background:var(--ink);color:var(--paper)}

/* ---- 汉堡 + 全屏遮罩菜单 ---- */
.burger{position:relative}

.burger > summary{
  list-style:none;
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:46px;
  padding:0 15px;
  border:1px solid var(--ink);
  border-radius:4px;
  background:var(--paper);
  cursor:pointer;
  user-select:none;
}

.burger > summary::-webkit-details-marker{display:none}

.burger > summary em{
  font-style:normal;
  font-size:16px;
  font-weight:600;
  letter-spacing:.06em;
}

.bars{display:grid;gap:3px;width:18px}
.bars i{display:block;height:2px;background:var(--ink)}
.burger[open] .bars i{background:var(--paper)}
.burger[open] > summary{background:var(--ink);color:var(--paper)}

.burger menu{
  position:fixed;
  inset:0;
  z-index:2;
  margin:0;
  padding:76px var(--pad) 108px;
  list-style:none;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:auto;
}

.burger menu li{border-bottom:1px solid var(--rule)}

.burger menu li a{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:52px;
  padding:10px 6px;
  font-family:'Anton',Impact,system-ui,sans-serif;
  font-size:clamp(22px,6.4vw,38px);
  line-height:1.2;
  text-decoration:none;
  color:var(--ink);
  transition:background-color var(--ease),color var(--ease),padding-left var(--ease);
}

.burger menu li a:hover{background:var(--ink);color:var(--paper);padding-left:12px}

.num{
  font-family:'Epilogue',system-ui,sans-serif;
  font-size:16px;
  letter-spacing:.08em;
  color:var(--grey);
}

.burger menu li a:hover .num{color:var(--paper)}

/* ---- 首屏拼贴 ---- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:var(--pad) var(--pad) 120px;
  overflow:hidden;
  border-bottom:2px solid var(--ink);
}

.shot{
  position:absolute;
  z-index:1;
  margin:0;
  border:1px solid var(--ink);
  border-radius:4px;
  background:var(--fog);
  overflow:hidden;
  filter:grayscale(1) contrast(1.04);
}

.shot img{display:block;width:100%;height:100%;object-fit:cover}

.shot.a{
  top:6vh;
  left:3vw;
  width:min(46vw,320px);
  aspect-ratio:3 / 4;
  transform:rotate(-2.4deg);
}

.shot.b{
  bottom:15vh;
  right:3vw;
  width:min(40vw,280px);
  aspect-ratio:4 / 5;
  transform:rotate(2.2deg);
}

.hero-txt{
  position:relative;
  z-index:2;
  width:max-content;
  max-width:min(92vw,560px);
  text-align:center;
  padding:clamp(20px,5vw,34px) clamp(16px,4vw,28px);
  background:var(--paper);
  border:1px solid var(--ink);
  border-radius:4px;
}

.badge{
  display:inline-block;
  padding:3px 11px;
  font-size:16px;
  letter-spacing:.16em;
  background:var(--ink);
  color:var(--paper);
  border-radius:4px;
  transform:rotate(-1.6deg);
}

.hero-txt h1{margin:15px 0 0}

/* ---- 正文骨架：main > section.wrap > div > article ---- */
.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:clamp(28px,5vw,64px) var(--pad);
  display:grid;
  gap:30px;
}

@media (min-width:920px){
  .wrap{
    grid-template-columns:200px minmax(0,1fr);
    gap:46px;
    align-items:start;
  }
}

.side{
  background:var(--fog);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:14px 14px 8px;
}

@media (min-width:920px){
  .side{position:sticky;top:22px}
}

.side h2{
  font-size:17px;
  letter-spacing:.16em;
}

.side hr{
  border:0;
  border-top:1px solid var(--rule);
  margin:9px 0 4px;
}

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

@media (max-width:919px){
  .side ul{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
}

.side li{border-bottom:1px dotted var(--rule)}

.side a{
  display:flex;
  align-items:baseline;
  gap:8px;
  min-height:42px;
  padding:9px 2px;
  font-size:16px;
  text-decoration:none;
}

.side a:hover{background:var(--ink);color:var(--paper)}
.side a:hover .num{color:var(--paper)}

.board{min-width:0}
.paper{max-width:70ch}

/* ---- 正文内容 ---- */
article p,
article li{font-size:17px;line-height:1.78}

article > div{
  padding-top:26px;
  margin-top:46px;
  border-top:2px solid var(--ink);
  scroll-margin-top:24px;
}

article > div:first-of-type{
  padding-top:0;
  margin-top:0;
  border-top:0;
}

article div > *:last-child{margin-bottom:0}

article h2{font-size:clamp(23px,4.6vw,34px);margin:0 0 4px}
article h3{font-size:clamp(19px,3.4vw,24px);margin:24px 0 6px}

article hr{
  border:0;
  border-top:1px solid var(--rule);
  margin:24px 0;
}

article h2 + hr{margin:12px 0 20px}
article h3 + hr{margin:10px 0 16px}

article ul,article ol{padding-left:1.25em;margin:0 0 1em}
article li{margin:0 0 .45em}

article blockquote{
  margin:1.2em 0;
  padding:4px 0 4px 16px;
  border-left:3px solid var(--ink);
  color:var(--ink);
}

article img{
  display:block;
  border:1px solid var(--ink);
  border-radius:4px;
  background:var(--fog);
  margin:.8em 0;
}

article figure{margin:1.2em 0}
article figure img{margin:0}
article figcaption{font-size:16px;color:var(--grey);margin-top:6px}

article table{
  width:100%;
  border-collapse:collapse;
  margin:1.2em 0;
  font-size:16px;
}

article th,
article td{
  border:1px solid var(--rule);
  padding:8px 10px;
  text-align:left;
}

article a{
  text-decoration:none;
  border-bottom:1px solid var(--ink);
}

article a:hover{background:var(--ink);color:var(--paper)}

/* ---- 页脚 ---- */
.foot{
  border-top:2px solid var(--ink);
  padding:22px var(--pad) 28px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 20px;
}

.f-b ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2px 4px;
}

.f-b a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:4px 9px;
  font-size:16px;
  text-decoration:none;
}

.f-b a:hover{background:var(--ink);color:var(--paper)}

.f-c p{
  margin:0;
  font-size:16px;
  color:var(--grey);
  letter-spacing:.04em;
}

@media (max-width:719px){
  .foot{justify-content:center;text-align:center}
  .f-a{order:1}
  .f-c{order:2}
  .f-b{order:3;width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}
</｜DSML｜ parameter>
</｜DSML｜ invoke>
</｜DSML｜ calls>

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