/* ============================================================================
   南方之鹤 · 我的世界公会
   一条地面（近黑）、一种墨（骨白）、一个朱金强调色（只用在动作与编号上）
   全页一个字体家族、五个字号、一个圆角（0）；不用阴影、不用发光、不用装饰细线
   唯一允许的渐变：照片上给文字垫的中性压暗
   ============================================================================ */

:root{
  --ground:#07070a;
  --band:#0d0d12;          /* 同色深一档，用来分节，不用线 */
  --ink:#efe9db;
  --ink-2:#a9a293;         /* 仅次要注释 */
  --gold:#c9a24a;

  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC",STSong,STZhongsong,"PingFang SC","Microsoft YaHei",serif;

  --step-display:clamp(2rem,4.4vw,3.4rem);
  --step-h2:clamp(1.35rem,2.3vw,1.9rem);
  --step-lead:clamp(1.05rem,1.9vw,1.3rem);
  --step-body:clamp(1rem,1.05vw,1.0625rem);
  --step-small:.8125rem;

  --gutter:clamp(20px,6vw,96px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--step-body);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}

/* ============ 首屏 ============ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.art{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 42%;
  /* 唯一在动的图：极慢推近，24 秒走完，不动声色 */
  animation:drift 24s ease-out both;
}
@keyframes drift{from{transform:scale(1.07)}to{transform:scale(1)}}

/* 中性压暗：照片上放文字的例外，唯一允许的渐变 */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
      rgba(7,7,10,.97) 0%,
      rgba(7,7,10,.93) 18%,
      rgba(7,7,10,.62) 34%,
      rgba(7,7,10,.18) 52%,
      rgba(7,7,10,0) 64%);
}

.hero-copy{
  position:relative;z-index:2;
  width:100%;
  padding:0 var(--gutter) clamp(38px,7vh,88px);
  max-width:900px;
}
h1{
  font-size:var(--step-display);
  line-height:1.16;
  letter-spacing:.06em;
  font-weight:700;
}
.h1-sub{
  display:block;
  font-size:calc(var(--step-display) * .46);
  letter-spacing:.22em;
  color:var(--ink-2);
  margin-top:.35em;
  font-weight:400;
}
.lead{
  font-size:var(--step-lead);
  line-height:1.7;
  margin-top:1.15em;
  max-width:26em;
  color:var(--ink);
}

/* 唯一的动作：实心朱金，直角 */
.enter{
  display:inline-block;
  margin-top:clamp(22px,3.4vh,34px);
  background:var(--gold);
  color:#0a0a0d;
  text-decoration:none;
  font-size:var(--step-body);
  letter-spacing:.1em;
  padding:14px 30px;
  border-radius:0;
  transition:background-color .16s ease,transform .1s ease;
}
.enter:hover{background:#d9b45f}
.enter:active{transform:translateY(1px)}
.enter:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* ============ 正文各节 ============ */
.block{
  padding:clamp(64px,11vh,140px) var(--gutter);
  display:grid;
  grid-template-columns:minmax(200px,.4fr) minmax(0,1fr);
  gap:clamp(18px,3.4vw,64px);
  align-items:start;
}
/* 相邻两节不能同一副长相：深一档的那节把标题排到右列 */
.band{background:var(--band)}
.band h2{grid-column:1}
.block h2{
  font-size:var(--step-h2);
  line-height:1.45;
  letter-spacing:.04em;
  font-weight:600;
  max-width:16em;
}
.body p + p{margin-top:1.1em}
.body p,.rules,.steps,.note{max-width:34em}

/* 列表：真列表，按位置成组，不加框不加线 */
.rules{list-style:none}
.rules li{padding:.85em 0;font-size:var(--step-body)}
.rules li + li{margin-top:.2em}
.rules b{font-weight:600}

.steps{list-style:none;counter-reset:n}
.steps li{
  counter-increment:n;
  position:relative;
  padding:.7em 0 .7em 2.6em;
}
.steps li::before{
  content:counter(n);
  position:absolute;left:0;top:.72em;
  color:var(--gold);
  font-size:var(--step-body);
  letter-spacing:.02em;
}

/* 军饷：定义列表当账目表用 */
.pay-list{margin-top:1.6em;display:grid;gap:1.4em}
.pay-list dt{
  font-size:var(--step-small);
  letter-spacing:.16em;
  color:var(--gold);
  margin-bottom:.25em;
}
.pay-list dd{font-size:var(--step-body);max-width:32em}

.note{margin-top:1.8em;color:var(--ink-2);font-size:var(--step-body)}

/* ============ 落款：名字以满宽回来 ============ */
.foot{
  padding:clamp(40px,9vh,110px) var(--gutter) 0;
  overflow:hidden;
}
.foot span{
  display:block;
  font-size:clamp(2.6rem,13.5vw,10rem);
  line-height:.86;
  letter-spacing:.1em;
  color:#16161c;
  transform:translateY(.06em);
}

/* ============ 入场：只在有 JS 时才藏，脚本挂了内容照样在 ============ */
html.js .reveal{opacity:0;transform:translateY(18px)}
html.js .reveal.in{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.2,.85,.25,1) var(--d,0ms),
             transform .6s cubic-bezier(.2,.85,.25,1) var(--d,0ms);
}

/* ============ 手机：图与字分开排，是另一套构图 ============ */
@media (max-width:880px){
  .hero{min-height:0;display:block}
  .art{
    position:static;
    width:100%;height:auto;
    aspect-ratio:5/4;              /* 保住「南方之鹤」四字，不裁掉首尾 */
    object-position:50% 46%;
    animation:none;
  }
  .scrim{display:none}
  .hero-copy{padding:26px var(--gutter) 34px;max-width:100%}
  .block{grid-template-columns:1fr;gap:14px}
  .block h2{max-width:100%}
}

/* ============ 系统开了"减弱动态效果"：全部静止 ============ */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  html.js .reveal{opacity:1;transform:none}
}