@import url('https://fonts.googleapis.com/css2?family=Calistoga:ital@0;1&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:#000000;
  --paper:#ffffff;
  --rail:236px;
  --pad:clamp(16px, 4vw, 60px);
  --disp:"Calistoga", "Songti SC", Georgia, serif;
  --sans:"Inter", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.66;
  font-weight:400;
  overflow-x:hidden;
}

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

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

.skip{
  position:absolute;
  left:10px;
  top:-70px;
  z-index:99;
  padding:10px 16px;
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  transition:top .18s ease;
}
.skip:focus{ top:10px; }

/* ---------- 左栏 ---------- */

.rail{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  background:var(--paper);
  border-bottom:2px solid var(--ink);
}

.mark{
  flex:0 0 44px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:2px solid var(--ink);
  font-family:var(--disp);
  font-size:1.45rem;
  line-height:1;
  text-decoration:none;
}
.mark img{ width:100%; height:100%; object-fit:cover; }

.rail-nav{ margin-left:auto; }

.rail-nav > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  min-height:44px;
  padding:11px 16px;
  border:2px solid var(--ink);
  font-size:1rem;
  letter-spacing:.06em;
}
.rail-nav > summary::-webkit-details-marker{ display:none; }
.rail-nav > summary::marker{ content:""; }

.rail-nav > menu{
  list-style:none;
  margin:0;
  padding:0;
}

.rail-nav[open] > menu{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  display:grid;
  gap:6px;
  max-height:70vh;
  overflow:auto;
  padding:12px;
  background:var(--paper);
  border-bottom:2px solid var(--ink);
}

.rail-nav > menu a{
  display:block;
  min-height:44px;
  padding:11px 14px;
  border:2px solid var(--ink);
  text-decoration:none;
  font-size:1rem;
}

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:11px 16px;
  background:var(--ink);
  color:var(--paper);
  border:2px solid var(--ink);
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
}
.cta:hover,.cta:focus-visible{ background:var(--paper); color:var(--ink); }

@media (min-width:900px){
  body{ padding-left:var(--rail); }

  .rail{
    position:fixed;
    inset:0 auto 0 0;
    width:var(--rail);
    flex-direction:column;
    align-items:stretch;
    justify-content:space-between;
    gap:0;
    padding:16px 14px 22px;
    border-bottom:0;
    border-right:2px solid var(--ink);
  }

  .rail-nav{ margin:18px 0 auto; }

  .rail-nav > summary{
    border:0;
    border-bottom:2px solid var(--ink);
    padding:6px 2px;
    min-height:0;
    font-family:var(--mono);
    letter-spacing:.2em;
  }

  .rail-nav > menu{
    position:static;
    display:grid;
    gap:8px;
    padding:14px 0 0;
    max-height:none;
    overflow:visible;
    border-bottom:0;
    background:transparent;
  }

  .rail-nav > menu a{ padding:11px 12px; line-height:1.3; }

  .rail-nav > menu a:hover,
  .rail-nav > menu a:focus-visible{
    background:var(--ink);
    color:var(--paper);
  }
}

/* ---------- 主体网格 ---------- */

main{ display:block; }

main > div{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  padding:0 var(--pad) 44px;
  counter-reset:sec;
}

main > div > article{ grid-column:1; min-width:0; }

/* ---------- 头图 ---------- */

.hero{
  position:relative;
  overflow:hidden;
  min-height:70vh;
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr);
  align-items:end;
  gap:clamp(16px,3vw,40px);
  padding:clamp(30px,7vh,84px) 0 clamp(26px,4vh,50px);
  border-bottom:3px solid var(--ink);
}

.hero .band{
  position:absolute;
  inset:0 0 auto 0;
  height:clamp(110px,24vh,210px);
  background:var(--ink);
  clip-path:polygon(0 0, 100% 0, 100% 58%, 0 100%);
}

.hero > *{ position:relative; z-index:1; }

.hero-fig{
  margin:0;
  max-width:min(46%,320px);
  border:2px solid var(--ink);
  background:var(--paper);
}
.hero-fig img{ width:100%; }

.hero-copy{ justify-self:end; text-align:right; }

.hero h1{
  font-family:var(--disp);
  font-weight:400;
  font-size:clamp(2rem,5vw,3.5rem);
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0 0 .6rem;
}

.hero-desc{
  margin:0 0 0 auto;
  max-width:44ch;
  font-size:1.02rem;
}

@media (max-width:660px){
  .hero{ grid-template-columns:minmax(0,1fr); }
  .hero-fig{ max-width:100%; }
  .hero-copy{ justify-self:start; text-align:left; }
  .hero-desc{ margin-left:0; }
}

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

main > div > article:not(.hero){
  padding:clamp(28px,4.4vh,54px) 0;
  border-top:1px solid var(--ink);
  scroll-margin-top:76px;
  counter-increment:sec;
}

main > div > article:not(.hero):nth-of-type(2){ border-top:0; }

main > div > article:not(.hero)::before{
  content:counter(sec, decimal-leading-zero);
  display:block;
  font-family:var(--mono);
  font-size:.84rem;
  letter-spacing:.22em;
  margin-bottom:.7rem;
}

@media (min-width:900px){
  main > div > article:not(.hero){ scroll-margin-top:28px; }
}

div h2{
  font-family:var(--disp);
  font-weight:400;
  font-size:clamp(1.65rem,3.2vw,2.5rem);
  line-height:1.14;
  letter-spacing:-.01em;
  margin:0 0 .8rem;
}

div h3{
  font-family:var(--disp);
  font-weight:400;
  font-size:clamp(1.25rem,2.1vw,1.6rem);
  line-height:1.26;
  margin:1.9rem 0 .5rem;
}

div h4{
  font-size:1.05rem;
  font-weight:700;
  margin:1.5rem 0 .4rem;
}

div p{ margin:0 0 1.05rem; max-width:72ch; }

div ul,div ol{ margin:0 0 1.1rem; padding-left:1.4rem; }
div li{ margin:.35rem 0; }

div strong{ font-weight:700; }

div a{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.2em;
}
div a:hover{ background:var(--ink); color:var(--paper); text-decoration:none; }

div blockquote{
  margin:1.9rem 0;
  padding:.35rem 0 .35rem 1.25rem;
  border-left:6px solid var(--ink);
  font-family:var(--disp);
  font-size:1.3rem;
  line-height:1.4;
}
div blockquote p{ margin:0 0 .5rem; max-width:none; }
div blockquote cite{
  display:block;
  font-family:var(--sans);
  font-size:1rem;
  font-style:normal;
  letter-spacing:.04em;
}

div figure{ margin:1.9rem 0; border:2px solid var(--ink); padding:8px; }
div figcaption{ font-size:1rem; padding-top:.5rem; }

div table{ width:100%; border-collapse:collapse; font-size:1rem; }
div th,div td{ border:1px solid var(--ink); padding:.6rem .7rem; text-align:left; vertical-align:top; }

div dl{ margin:1.4rem 0; }
div dt{ font-weight:700; margin-top:1rem; }
div dd{ margin:.3rem 0 0; padding-left:1rem; border-left:3px solid var(--ink); }

div hr{ border:0; border-top:1px solid var(--ink); margin:2rem 0; }

@media (min-width:768px){
  main > div > article:not(.hero) > p:first-of-type::first-letter{
    float:left;
    font-family:var(--disp);
    font-size:3.6em;
    line-height:.8;
    padding:.06em .1em 0 0;
  }
}

@media (min-width:1240px){
  main > div > article:not(.hero) > p{
    column-count:2;
    column-gap:2.6rem;
    max-width:none;
  }
}

/* ---------- 右栏 ---------- */

.side{
  grid-column:1;
  margin:26px 0 0;
  padding:14px 16px 18px;
  border:2px solid var(--ink);
  background:var(--paper);
}

.side small{
  display:block;
  font-family:var(--mono);
  font-size:.95rem;
  letter-spacing:.2em;
}

.side h2{
  font-family:var(--disp);
  font-weight:400;
  font-size:1.5rem;
  line-height:1.2;
  margin:.15rem 0 .8rem;
}

.side ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }

.side a{
  display:block;
  min-height:44px;
  padding:11px 0;
  border-bottom:1px solid var(--ink);
  text-decoration:none;
  font-size:1rem;
  line-height:1.3;
}
.side li:last-child a{ border-bottom:0; }
.side a:hover{ background:var(--ink); color:var(--paper); padding-left:8px; }

@media (min-width:1040px){
  main > div{
    grid-template-columns:minmax(0,1fr) 264px;
    column-gap:clamp(24px,3vw,48px);
  }
  .side{
    grid-column:2;
    grid-row:1 / span 40;
    align-self:start;
    position:sticky;
    top:26px;
    margin-top:clamp(30px,7vh,84px);
  }
}

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

footer{
  border-top:3px solid var(--ink);
  padding:26px var(--pad) 46px;
  display:grid;
  gap:12px 24px;
}

footer p{ margin:0; font-size:1rem; }
footer small{ font-size:1rem; }

.f-brand{
  font-family:var(--disp);
  font-size:1.3rem;
  line-height:1.25;
}

.f-links{ display:flex; flex-wrap:wrap; gap:0 18px; }

footer a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:6px 0;
  text-decoration:none;
}
footer a:hover{ text-decoration:underline; }

.f-copy{ letter-spacing:.06em; }

@media (min-width:700px){
  footer{
    grid-template-columns:1.3fr 1fr 1fr auto;
    align-items:start;
    padding-top:32px;
  }
  .f-copy{ justify-self:end; text-align:right; }
}

/* ---------- 动效 ---------- */

@keyframes rise{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion: no-preference){
  .js-on .rv{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .js-on .rv.in{ opacity:1; transform:none; }

  .side li{
    animation:rise .5s ease both;
    animation-delay:calc(var(--i, 0) * 55ms);
  }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

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