:root{
  --ink:#101014;
  --hot:#FF4433;
  --paper:#EDEAE3;
  --line:rgba(237,234,227,.16);
  --dim:rgba(237,234,227,.62);
  --pad:clamp(1rem,4.5vw,2.75rem);
  --head:'Archivo','Space Grotesk',system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --body:'Space Grotesk',system-ui,-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
}

*{box-sizing:border-box}

html{
  background:var(--ink);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.68;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

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

.navt{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}

/* ---------- 顶栏 ---------- */
.top{
  position:sticky;
  top:0;
  z-index:50;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:.6rem;
  padding:.45rem var(--pad);
  background:rgba(16,16,20,.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}

.burger{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:44px;
  padding:0 .2rem;
  cursor:pointer;
  color:var(--paper);
  font-size:.78rem;
  letter-spacing:.18em;
}

.burger-lines{
  display:block;
  position:relative;
  width:20px;height:2px;
  background:var(--paper);
  transition:transform .2s;
}

.burger-lines::before,
.burger-lines::after{
  content:'';
  position:absolute;
  left:0;
  width:20px;height:2px;
  background:var(--paper);
}
.burger-lines::before{top:-6px}
.burger-lines::after{top:6px}
.burger:hover .burger-lines{background:var(--hot)}
.burger:hover .burger-lines::before,
.burger:hover .burger-lines::after{background:var(--hot)}

.brand{
  justify-self:center;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-family:var(--head);
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:-.02em;
  white-space:nowrap;
}

.mark-img{height:22px;width:auto}

.host{
  justify-self:end;
  font-family:var(--head);
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--dim);
  overflow-wrap:anywhere;
  text-align:right;
}

/* ---------- 全屏遮罩菜单 ---------- */
.veil{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1.4rem;
  padding:clamp(1.2rem,7vw,4rem);
  background:var(--ink);
  visibility:hidden;
  opacity:0;
  transition:opacity .28s ease,visibility .28s ease;
  overflow-y:auto;
}

.navt:checked ~ .veil{
  visibility:visible;
  opacity:1;
}

.veil-nav{width:100%;max-width:60rem;margin:0 auto}

.veil-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
}

.veil-list a{
  display:flex;
  align-items:center;
  min-height:52px;
  padding:.3rem 0;
  border-bottom:1px solid var(--line);
  font-family:var(--head);
  font-weight:600;
  font-size:clamp(1.02rem,4.6vw,1.75rem);
  letter-spacing:-.015em;
  transition:color .18s,transform .18s;
}

.veil-list a:hover,
.veil-list a:focus-visible{
  color:var(--hot);
  transform:translateX(5px);
}

.veil-close{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 1.1rem;
  border:1px solid var(--line);
  border-radius:4px;
  font-size:.82rem;
  letter-spacing:.2em;
  cursor:pointer;
}
.veil-close:hover{border-color:var(--hot);color:var(--hot)}

@media (min-width:34rem){
  .veil-list{grid-template-columns:1fr 1fr;column-gap:3rem}
}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;
  display:grid;
  align-items:end;
  gap:1.1rem;
  min-height:45vh;
  padding:2.8rem var(--pad) 1.8rem;
  border-bottom:1px solid var(--line);
}

.hero-media{margin:0;min-width:0}

.hero-img{
  width:100%;
  height:100%;
  max-height:24vh;
  object-fit:cover;
  border-radius:4px;
  filter:grayscale(.18) contrast(1.06);
}

.hero-copy{text-align:right;min-width:0}

.badge{
  position:absolute;
  top:1rem;
  right:var(--pad);
  margin:0;
  padding:.28rem .6rem;
  border:1px solid var(--hot);
  border-radius:4px;
  background:rgba(16,16,20,.72);
  color:var(--hot);
  font-size:.72rem;
  letter-spacing:.18em;
  max-width:60%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

h1{
  margin:0;
  font-family:var(--head);
  font-weight:700;
  font-size:clamp(2.05rem,9vw,4.7rem);
  line-height:1;
  letter-spacing:-.035em;
  overflow-wrap:break-word;
  text-align:right;
  background:linear-gradient(104deg,var(--paper) 18%,var(--hot) 94%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

@media (min-width:48rem){
  .hero{
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:2.6rem;
    padding-top:3.4rem;
    padding-bottom:2.4rem;
  }
  .hero-img{max-height:44vh}
}

/* ---------- 主体 ---------- */
.main{
  display:grid;
  gap:1.8rem;
  padding:2rem var(--pad) 1rem;
}

@media (min-width:52rem){
  .main{
    grid-template-columns:15rem minmax(0,1fr);
    gap:3.5rem;
    align-items:start;
  }
}

.rail{
  border-top:2px solid var(--hot);
  padding-top:.9rem;
  font-size:.92rem;
}

@media (min-width:52rem){
  .rail{position:sticky;top:5.2rem}
}

.rail-h{
  font-family:var(--head);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.26em;
  color:var(--hot);
  margin:0 0 .4rem;
}

.rail-h span{display:inline-block}

.rail-list{
  list-style:none;
  margin:0 0 1.6rem;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:1rem;
}

@media (min-width:52rem){
  .rail-list{grid-template-columns:1fr;column-gap:0}
}

.rail-list a{
  display:flex;
  align-items:center;
  min-height:40px;
  border-bottom:1px solid var(--line);
  color:var(--dim);
  font-size:.92rem;
  transition:color .18s,padding-left .18s;
}

.rail-list a:hover{color:var(--hot);padding-left:.25rem}

.rail-note{
  margin:0;
  color:var(--dim);
  font-size:.78rem;
  overflow-wrap:anywhere;
}

.rail-note code{font-family:var(--head);letter-spacing:.06em}

/* ---------- 正文 ---------- */
.post{
  min-width:0;
  max-width:70ch;
  counter-reset:sec;
}

.post div{
  padding-block:2.5rem;
  scroll-margin-top:5.2rem;
}

.post div + div{border-top:1px solid var(--line)}
.post div:first-of-type{padding-top:.1rem}

.post h2,
.post h3{
  font-family:var(--head);
  line-height:1.16;
  letter-spacing:-.02em;
  margin:0 0 .75rem;
}

.post h2{
  position:relative;
  padding-left:2.3rem;
  font-size:clamp(1.42rem,4.4vw,2.05rem);
  font-weight:700;
}

.post h2::before{
  counter-increment:sec;
  content:counter(sec,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.5em;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.12em;
  color:var(--hot);
}

.post h2 > span{
  display:inline-block;
  background:linear-gradient(transparent 74%,rgba(255,68,51,.36) 74%);
}

.post h3{
  font-size:clamp(1.1rem,3.2vw,1.32rem);
  font-weight:600;
}

.post h3 > span{
  display:inline-block;
  border-bottom:2px solid var(--hot);
  padding-bottom:.1rem;
}

.post p{margin:0 0 1rem}
.post p:last-child{margin-bottom:0}

.post ul,
.post ol{
  margin:0 0 1rem;
  padding-left:1.25rem;
}

.post li{margin:.32rem 0}
.post li::marker{color:var(--hot)}

.post a{
  color:var(--hot);
  text-decoration:underline;
  text-underline-offset:.18em;
}

.post strong{color:#fff;font-weight:600}

.post blockquote{
  margin:1.2rem 0;
  padding:.2rem 0 .2rem 1.1rem;
  border-left:2px solid var(--hot);
  color:var(--dim);
}

/* ---------- 页脚 ---------- */
.foot{
  margin-top:2.6rem;
  padding:3rem var(--pad) 2.4rem;
  border-top:1px solid var(--line);
  text-align:center;
}

.foot-mark{
  margin:0 0 .9rem;
  font-family:var(--head);
  font-weight:700;
  font-size:clamp(2rem,10.5vw,6.2rem);
  line-height:.94;
  letter-spacing:-.045em;
  word-break:break-word;
  background:linear-gradient(180deg,var(--paper),rgba(237,234,227,.24));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.foot small{
  display:block;
  color:var(--dim);
  font-size:.8rem;
  letter-spacing:.1em;
}

/* ---------- 回到顶部 ---------- */
.totop{
  position:fixed;
  right:1rem;
  bottom:1rem;
  z-index:30;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 1rem;
  border-radius:4px;
  background:var(--hot);
  color:var(--ink);
  font-size:.88rem;
  font-weight:600;
  letter-spacing:.06em;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
}

.totop:hover{filter:brightness(1.08)}

/* ---------- 动效 ---------- */
@media (prefers-reduced-motion: no-preference){
  @keyframes rise{
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:translateY(0)}
  }

  h1{animation:rise .85s cubic-bezier(.2,.75,.2,1) both}
  .badge{animation:rise .6s .1s cubic-bezier(.2,.75,.2,1) both}
  .hero-media{animation:rise .9s .06s cubic-bezier(.2,.75,.2,1) both}

  .post div{
    animation:rise .75s cubic-bezier(.2,.75,.2,1) both;
    animation-timeline:view();
    animation-range:entry 4% cover 26%;
  }
}

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

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