*{box-sizing:border-box}
:root{
  --ink:#000;
  --paper:#fff;
  --mute:#525252;
  --line:#dcdcdc;
  --soft:#f3f3f1;
  --u:8px;
  --display:'Abril Fatface',Georgia,'Songti SC',serif;
  --text:'Merriweather',Georgia,'Songti SC',serif;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:17px;
  line-height:1.78;
  font-weight:400;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}

/* 顶部栏 */
.masthead{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:calc(var(--u)*2);
  padding:var(--u) calc(var(--u)*2);
  background:var(--paper);
  border-bottom:2px solid var(--ink);
}
.mark{
  width:44px;height:44px;
  display:grid;place-items:center;
  background:var(--ink);color:var(--paper);
  font-family:var(--display);
  font-size:1.15rem;
  text-decoration:none;
  overflow:hidden;
}
.mark img{width:44px;height:44px;object-fit:cover}
.topnav ol{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:2px;margin:0;padding:0;list-style:none;
}
.topnav a{
  display:flex;align-items:center;
  min-height:40px;padding:0 10px;
  font-size:16px;text-decoration:none;
  letter-spacing:.01em;
}
.topnav a:hover,.topnav a:focus-visible{background:var(--ink);color:var(--paper)}
.find input{
  width:150px;height:40px;padding:0 10px;
  border:1px solid var(--ink);border-radius:0;
  background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:16px;
}
.find input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* 粘性锚点条 */
.subbar{
  position:sticky;top:0;z-index:25;
  background:var(--ink);color:var(--paper);
  padding:0 calc(var(--u)*2);
  overflow-x:auto;
}
.subbar ol{
  display:flex;margin:0;padding:0;list-style:none;white-space:nowrap;
}
.subbar a{
  display:flex;align-items:center;
  min-height:44px;padding:0 12px;
  color:var(--paper);text-decoration:none;font-size:16px;
  border-right:1px solid #333;
}
.subbar li:first-child a{border-left:1px solid #333}
.subbar a:hover,.subbar a:focus-visible{background:var(--paper);color:var(--ink)}
.subbar li[hidden]{display:none}

/* 首屏 */
.hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:calc(var(--u)*2);
  align-items:center;
  padding:calc(var(--u)*4) calc(var(--u)*2);
  border-bottom:1px solid var(--ink);
  background-image:radial-gradient(circle,#00000012 1px,transparent 1px);
  background-size:18px 18px;
}
.hero-fig{
  grid-column:1/6;
  margin:0;
  height:min(66vh,560px);
  background:var(--soft);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 22px 44px -26px #00000073;
}
.hero-img{width:100%;height:100%;object-fit:cover}
.dots{
  width:100%;height:100%;
  background-image:radial-gradient(circle,#000 1px,transparent 1px);
  background-size:14px 14px;
  opacity:.55;
}
.hero-copy{
  grid-column:6/13;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:calc(var(--u)*3);
}
.tag{
  margin:0;
  font-size:16px;letter-spacing:.3em;
  color:var(--mute);
}
.hero-copy h1{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.1rem,5.2vw,4.4rem);
  line-height:1.05;
}
.cue{
  display:inline-flex;align-items:center;
  min-height:48px;padding:0 30px;
  background:var(--ink);color:var(--paper);
  text-decoration:none;font-size:16px;
  border-radius:18px;
}
.cue:hover,.cue:focus-visible{background:#1c1c1c}

/* 正文区 */
.board{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:calc(var(--u)*3);
  padding:calc(var(--u)*6) calc(var(--u)*2);
  border-top:1px solid var(--ink);
}
.rail{
  grid-column:1/4;
  position:sticky;top:64px;align-self:start;
}
.rail small{
  display:block;
  font-size:14px;letter-spacing:.24em;
  color:var(--mute);
}
.rail h2{
  font-family:var(--display);
  font-weight:400;
  font-size:1.55rem;line-height:1.12;
  margin:.15em 0 .9em;
}
.rail ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.rail li{border-bottom:1px solid var(--line)}
.rail li[hidden]{display:none}
.rail a{
  display:flex;align-items:center;
  min-height:44px;padding:8px 0;
  font-size:16px;text-decoration:none;line-height:1.4;
}
.rail a:hover,.rail a:focus-visible{text-decoration:underline;text-underline-offset:4px}

.sheet{grid-column:4/13;min-width:0}
.sheet > div{
  scroll-margin-top:76px;
  padding-top:calc(var(--u)*5);
  border-top:1px solid var(--line);
}
.sheet > div:first-of-type{border-top:0;padding-top:0}
.sheet h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.5rem,2.7vw,2.2rem);
  line-height:1.2;
  margin:.15em 0 .7em;
}
.sheet h3{font-size:1.12rem;line-height:1.55;margin:1.8em 0 .5em}
.sheet h2 + p,.sheet h3 + p{margin-top:0}
.sheet p{margin:0 0 1.15em}
.sheet ul,.sheet ol{pargin:0;margin:0 0 1.15em;padding-left:1.4em}
.sheet li{margin:.3em 0}
.sheet a{text-decoration:underline;text-underline-offset:3px}
.sheet a:hover{background:#f0f0ee}
.sheet figure{margin:1.7em 0}
.sheet figure img{border-radius:18px;box-shadow:0 18px 38px -26px #00000066}
.sheet figcaption{font-size:16px;color:var(--mute);margin-top:.6em}
.sheet blockquote{
  margin:1.7em 0;padding:14px 22px;
  background:var(--soft);
  border-left:3px solid var(--ink);
  border-radius:0 18px 18px 0;
}
.sheet blockquote p:last-child{margin:0}
.sheet table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:16px}
.sheet th,.sheet td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
.sheet th{font-weight:700}
.sheet code{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:15px;background:var(--soft);padding:1px 5px;border-radius:4px;
}
.sheet img{border-radius:18px}

/* 页脚 */
footer{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:calc(var(--u)*2);
  padding:calc(var(--u)*5) calc(var(--u)*2) calc(var(--u)*3);
  background:var(--ink);color:var(--paper);
  border-top:2px solid var(--ink);
}
footer div{margin:0;min-width:0}
.foot-brand{grid-column:1/13}
.bigmark{
  margin:0 0 calc(var(--u)*2);
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.6rem,11vw,7.5rem);
  line-height:.94;
  letter-spacing:-.01em;
  word-break:break-word;
}
.foot-links{grid-column:1/8}
.foot-links ol{
  display:flex;flex-wrap:wrap;gap:0 20px;
  margin:0;padding:0;list-style:none;
}
.foot-links a{
  display:inline-flex;align-items:center;
  min-height:40px;font-size:16px;
  color:var(--paper);text-decoration:none;
}
.foot-links a:hover,.foot-links a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.foot-legal{grid-column:10/13;text-align:right;font-size:16px}
.foot-legal p{margin:0 0 4px}
.foot-legal a{display:inline-flex;align-items:center;min-height:40px;color:var(--paper);text-decoration:none}
.foot-legal a:hover{text-decoration:underline}

/* 动效 */
.js .rv{opacity:0;transform:translateY(16px)}
.js .rv.on{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
}

/* 断点 */
@media (max-width:900px){
  .masthead{
    grid-template-columns:auto 1fr;
    grid-template-areas:"mark find" "nav nav";
    row-gap:var(--u);
  }
  .mark{grid-area:mark}
  .find{grid-area:find;justify-self:end}
  .find input{width:132px}
  .topnav{grid-area:nav}
  .topnav ol{justify-content:flex-start}
  .topnav a{padding:0 8px}

  .hero{
    grid-template-columns:1fr;
    min-height:0;
    padding:calc(var(--u)*3) calc(var(--u)*2);
    gap:calc(var(--u)*2);
  }
  .hero-copy{grid-column:1/-1;order:-1;gap:calc(var(--u)*2)}
  .hero-fig{grid-column:1/-1;height:46vw;min-height:150px}

  .board{grid-template-columns:1fr;gap:calc(var(--u)*3);padding:calc(var(--u)*4) calc(var(--u)*2)}
  .rail{grid-column:1/-1;position:static}
  .rail ol{display:flex;flex-wrap:wrap;gap:0 14px;border-top:0}
  .rail li{border-bottom:0}
  .sheet{grid-column:1/-1}

  footer{grid-template-columns:1fr;padding:calc(var(--u)*4) calc(var(--u)*2)}
  .foot-brand,.foot-links,.foot-legal{grid-column:1/-1}
  .foot-legal{text-align:left}
}

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