@charset "utf-8";

:root{
  --ink:#1f1f1f;
  --sub:#5c5c5c;
  --line:rgba(31,31,31,.13);
  --paper:#f5f5f5;
  --card:rgba(255,255,255,.74);
  --r:4px;
  --sans:"DM Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --disp:"Space Grotesk","DM Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --shadow:0 4px 6px rgba(0,0,0,.05),0 12px 26px rgba(0,0,0,.045);
  --maxw:1180px;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:92px;
}

body{
  margin:0;
  background-color:var(--paper);
  background-image:radial-gradient(900px 420px at 82% -8%,#ffffff 0%,rgba(255,255,255,0) 68%);
  background-repeat:no-repeat;
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  overflow-x:clip;
}

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

a{color:inherit}

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

/* 顶部细条 */
.strip{
  display:flex;align-items:center;justify-content:center;
  min-height:34px;
  padding:.35rem clamp(14px,4vw,40px);
  background:var(--ink);
  color:#fff;
  font-size:.9rem;
  letter-spacing:.22em;
  text-transform:none;
}

/* 顶栏 */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:.5rem clamp(14px,4vw,40px);
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}

.mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 auto;
  border:1px solid var(--ink);border-radius:var(--r);
  background:#fff;
  color:var(--ink);
  font-family:var(--disp);font-weight:700;font-size:1.15rem;
  text-decoration:none;overflow:hidden;
  transition:transform .2s ease;
}
.mark:hover{transform:translateY(-1px)}
.mark img{width:100%;height:100%;object-fit:cover}

/* 菜单：details > summary + menu > li > a */
.menu-details{position:relative}
.menu-details>summary{
  list-style:none;
  display:inline-flex;align-items:center;gap:.55rem;
  min-height:44px;padding:0 .9rem;
  border:1px solid var(--ink);border-radius:var(--r);
  background:#fff;color:var(--ink);
  font-size:1rem;font-weight:600;letter-spacing:.14em;
  cursor:pointer;
}
.menu-details>summary::-webkit-details-marker{display:none}
.menu-details>summary::after{
  content:"";width:8px;height:8px;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(45deg) translateY(-1px);
  transition:transform .22s ease;
}
.menu-details[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}

.menu-details>menu{
  position:absolute;right:0;top:calc(100% + 8px);
  margin:0;padding:8px;list-style:none;
  min-width:224px;
  display:grid;gap:2px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}
.menu-details>menu a{
  display:flex;align-items:center;
  min-height:44px;padding:.5rem .8rem;
  color:var(--ink);text-decoration:none;
  font-size:1rem;border-radius:var(--r);
}
.menu-details>menu a:hover{background:var(--paper)}

/* 首屏 */
.hero{
  position:relative;overflow:hidden;
  min-height:58vh;
  display:flex;align-items:flex-end;justify-content:flex-end;
  padding:clamp(22px,6vw,60px) clamp(16px,4vw,40px) clamp(26px,6vw,54px);
  border-bottom:1px solid var(--line);
}
.ghost{
  position:absolute;right:-.04em;top:clamp(8px,4vw,36px);
  font-family:var(--disp);font-weight:700;
  font-size:clamp(3.4rem,16vw,12rem);
  line-height:.84;letter-spacing:-.05em;
  color:var(--ink);opacity:.06;
  white-space:nowrap;
  pointer-events:none;user-select:none;
}
.hero h1{
  position:relative;
  width:100%;max-width:var(--maxw);
  margin:0;text-align:right;
  font-family:var(--disp);font-weight:700;
  font-size:clamp(2rem,7.4vw,4.6rem);
  line-height:1.06;letter-spacing:-.03em;
  overflow-wrap:anywhere;
}

/* 主体网格 */
.wrap{
  width:100%;max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(20px,4vw,40px) clamp(14px,4vw,40px) clamp(40px,7vw,80px);
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:16px;
}

/* 侧栏 */
.rail{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:14px;
  box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  min-width:0;
}
.rail h2{
  margin:0 0 10px;
  font-family:var(--disp);font-weight:600;
  font-size:1rem;letter-spacing:.2em;color:var(--sub);
}
.rail ul{
  list-style:none;margin:0;padding:0;
  display:flex;gap:6px;overflow-x:auto;
  scrollbar-width:thin;
}
.rail a{
  display:flex;align-items:center;
  min-height:44px;padding:.45rem .6rem;
  color:var(--ink);text-decoration:none;
  font-size:1rem;white-space:nowrap;
  border-radius:var(--r);
}
.rail a:hover{background:#fff}

/* 正文卡片 */
.prose{
  display:grid;gap:16px;
  min-width:0;
}
.prose>section{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(18px,3.4vw,36px);
  box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  scroll-margin-top:92px;
  min-width:0;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.prose>section:hover{
  transform:translateY(-2px);
  border-color:rgba(31,31,31,.26);
}
.prose p{margin:0 0 1em;line-height:1.85;overflow-wrap:anywhere}
.prose p:last-child{margin-bottom:0}
.prose h2{
  margin:0 0 .7em;
  font-family:var(--disp);font-weight:700;
  font-size:clamp(1.32rem,3.4vw,1.85rem);
  line-height:1.32;letter-spacing:-.01em;
}
.prose h2>span{position:relative;display:inline-block;padding-left:14px}
.prose h2>span::before{
  content:"";position:absolute;left:0;top:.16em;bottom:.16em;
  width:3px;background:var(--ink);border-radius:2px;
}
.prose h3{
  margin:1.4em 0 .5em;
  font-family:var(--disp);font-weight:600;
  font-size:1.16rem;line-height:1.4;
}
.prose h3>span{display:inline-block}
.prose ul,.prose ol{margin:0 0 1em;padding-left:1.35em}
.prose li{margin:.35em 0;line-height:1.8}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{background:rgba(31,31,31,.06)}
.prose strong{font-weight:700}
.prose blockquote{
  margin:1.2em 0;padding:.5em 0 .5em 1em;
  border-left:2px solid var(--ink);color:var(--sub);
}
.prose img{border-radius:var(--r);margin:1em 0}
.prose table{width:100%;display:block;overflow-x:auto;border-collapse:collapse;font-size:1rem}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:.5em .6em;text-align:left}

/* 页脚 */
.foot{
  background:#fff;
  border-top:1px solid var(--line);
  padding:clamp(28px,5vw,56px) clamp(14px,4vw,40px) 22px;
}
.foot-in{width:100%;max-width:var(--maxw);margin:0 auto}
.foot h2{
  margin:0 0 20px;
  font-family:var(--disp);font-weight:700;
  font-size:clamp(2.1rem,9vw,4.4rem);
  line-height:.98;letter-spacing:-.04em;
  overflow-wrap:anywhere;
}
.foot-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  border-top:1px solid var(--line);
  padding-top:16px;
}
.foot dl{margin:0;min-width:0}
.foot dt{
  font-size:1rem;letter-spacing:.18em;color:var(--sub);
  margin-bottom:4px;
}
.foot dd{margin:0}
.foot dd a{
  display:inline-flex;align-items:center;
  min-height:40px;padding:.2rem 0;
  color:var(--ink);text-decoration:none;font-size:1rem;
}
.foot dd a:hover{text-decoration:underline}
.foot-base{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;
  margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line);
  font-size:1rem;color:var(--sub);
}
.foot-base p{margin:0;letter-spacing:.08em}
.foot-base a{
  display:inline-flex;align-items:center;
  min-height:40px;padding:0 1rem;
  border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink);text-decoration:none;font-size:1rem;
}
.foot-base a:hover{border-color:var(--ink)}

/* 滚动显现 */
.js .rev{opacity:0;transform:translateY(14px)}
.js .rev.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}

@media (min-width:640px){
  .hero{min-height:66vh}
  .foot-base{justify-content:space-between}
}

@media (min-width:900px){
  .hero{min-height:70vh}
  .menu-details>menu{
    position:static;
    display:flex;gap:2px;
    min-width:0;padding:0;
    background:transparent;border:0;box-shadow:none;
  }
  .menu-details>menu a{padding:.4rem .8rem}
  .wrap{
    grid-template-columns:236px minmax(0,1fr);
    gap:20px;align-items:start;
  }
  .rail{position:sticky;top:92px}
  .rail ul{flex-direction:column;gap:0;overflow:visible}
  .rail li+li a{border-top:1px dashed var(--line)}
  .prose{grid-template-columns:repeat(6,minmax(0,1fr));align-content:start;gap:16px}
  .prose>section{grid-column:span 6}
  .prose>section:nth-of-type(2),
  .prose>section:nth-of-type(3),
  .prose>section:nth-of-type(5),
  .prose>section:nth-of-type(6){grid-column:span 3}
}

@media (min-width:1120px){
  .wrap{grid-template-columns:260px minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rev{opacity:1;transform:none}
  .prose>section:hover,.mark:hover{transform:none}
  .menu-details>summary::after{transition:none}
}

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