@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@100..900&family=Public+Sans:wght@100..900&display=swap');

:root{
  --brand:#F0532B;
  --ink:#12100E;
  --paper:#F5EDE3;
  --muted:#6b6259;
  --line:rgba(18,16,14,.14);
  --radius:28px;
  --shadow:0 22px 48px -26px rgba(18,16,14,.55);
  --soft:0 14px 34px -22px rgba(18,16,14,.4);
  --gut:0px;
  --pad:16px;
}

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

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

body{
  margin:0;
  overflow-x:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:"Public Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:"Lexend Mega","Public Sans","PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0;
}

img{max-width:100%;display:block}
a{color:inherit}
small{font-size:16px}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

/* ── 左侧固定竖排导航 ── */
.topbar{
  position:fixed;
  left:0;top:0;bottom:0;
  width:132px;
  z-index:60;
  display:flex;
  flex-direction:column;
  gap:24px;
  padding:20px 12px;
  background:var(--ink);
  color:var(--paper);
  border-right:3px solid var(--brand);
  overflow-y:auto;
}

.mark{
  width:46px;height:46px;
  flex:none;
  display:grid;place-items:center;
  border-radius:14px;
  background:var(--brand);
  color:var(--ink);
  text-decoration:none;
  font-family:"Lexend Mega",sans-serif;
  font-weight:800;
  font-size:22px;
  box-shadow:var(--shadow);
  transition:transform .3s ease,border-radius .3s ease;
}
.mark img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.mark:hover{transform:rotate(-8deg) scale(1.06);border-radius:22px}

.topbar nav p{display:flex;flex-direction:column;gap:4px;margin:0}

.topbar nav a{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:10px 8px;
  border-radius:12px;
  color:var(--paper);
  text-decoration:none;
  font-size:16px;
  line-height:1.25;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.dot{width:7px;height:7px;flex:none;border-radius:2px;background:var(--brand);transition:background .25s ease}
.topbar nav a:hover,.topbar nav a.on{background:var(--brand);color:var(--ink);transform:translateX(3px)}
.topbar nav a:hover .dot,.topbar nav a.on .dot{background:var(--ink)}

main{padding:0 var(--pad) 0 var(--gut)}
main > article{scroll-margin-top:112px}

/* ── 满屏首屏 ── */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  margin:0 calc(-1 * var(--pad)) 0 calc(-1 * var(--gut));
  padding:110px calc(var(--pad)) 90px calc(var(--gut) + var(--pad));
  display:flex;
  align-items:center;
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
  isolation:isolate;
}

.hero::before{
  content:"";
  position:absolute;
  left:-14%;right:-14%;
  bottom:13%;
  height:26vh;
  background:var(--brand);
  transform:rotate(-4.5deg);
  z-index:0;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 76% 30%,rgba(240,83,43,.32),transparent 58%);
  z-index:0;
}

.hero-copy{position:relative;z-index:3;max-width:min(660px,52%)}
.hero h1{font-size:clamp(2.2rem,5.9vw,4.4rem);text-wrap:balance}

.shot{
  position:absolute;
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:3px solid rgba(245,237,227,.14);
  background:#241f1b;
  z-index:2;
  transform:translateY(var(--py,0px)) rotate(var(--rot,-4deg));
  will-change:transform;
}
.shot img{width:100%;height:100%;object-fit:cover}
.shot-a{width:min(32vw,360px);aspect-ratio:4/5;right:7%;top:16%;--rot:-5deg}
.shot-b{width:min(24vw,270px);aspect-ratio:1/1;right:26%;bottom:9%;--rot:5deg}

/* ── 左侧目录 ── */
.rail{
  position:fixed;
  left:154px;top:110px;
  width:170px;
  z-index:40;
}
.rail aside{display:block;border-top:3px solid var(--ink);padding-top:12px}
.rail-title{
  margin:0 0 8px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--muted);
}
.rail aside a{
  display:block;
  padding:8px 0;
  min-height:40px;
  font-size:16px;
  text-decoration:none;
  color:var(--ink);
  border-bottom:1px dashed var(--line);
  transition:color .2s ease,padding-left .2s ease;
}
.rail aside a:hover{color:var(--brand);padding-left:6px}

/* ── 引言段 ── */
.intro{max-width:820px;padding:76px 0 48px}
.intro h2{font-size:clamp(1.5rem,3.4vw,2.2rem)}
.subtitle{
  margin:18px 0 0;
  padding-left:16px;
  border-left:5px solid var(--brand);
  color:var(--muted);
  max-width:640px;
}

/* ── 正文区块 ── */
main > article:not(.hero):not(.rail):not(.intro){
  max-width:800px;
  padding:56px 0;
  border-top:1px solid var(--line);
}
main > article:not(.hero):not(.rail):not(.intro) h2{
  position:relative;
  padding-top:16px;
  margin-bottom:20px;
  font-size:clamp(1.5rem,3.2vw,2.3rem);
}
main > article:not(.hero):not(.rail):not(.intro) h2::before{
  content:"";
  position:absolute;left:0;top:0;
  width:56px;height:6px;
  background:var(--brand);
}
main > article p{margin:0 0 18px}
main > article h3{font-size:1.2rem;margin:30px 0 12px}
main > article ul,main > article ol{padding-left:22px;margin:0 0 18px}
main > article li{margin:0 0 8px}
main > article a{color:var(--brand);text-underline-offset:3px;text-decoration-thickness:2px}
main > article img{
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin:10px 0 22px;
  transition:transform .45s cubic-bezier(.19,.79,.24,1);
}
main > article img:hover{transform:translateY(-6px)}
main > article blockquote{
  margin:0 0 20px;
  padding:20px 24px;
  background:#fff;
  border-left:6px solid var(--brand);
  border-radius:20px;
  box-shadow:var(--soft);
}

/* ── 页脚 ── */
footer{
  margin-top:48px;
  background:var(--ink);
  color:var(--paper);
  padding:64px var(--pad) 32px calc(var(--gut) + var(--pad));
}
.cta{
  font-family:"Lexend Mega","Public Sans","PingFang SC",sans-serif;
  font-weight:800;
  font-size:clamp(1.7rem,4vw,3rem);
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 44px;
  max-width:760px;
}
.foot-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0;
  padding-top:18px;
  border-top:1px solid rgba(245,237,227,.25);
}
.foot-row a{
  color:var(--brand);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 4px;
  transition:letter-spacing .25s ease;
}
.foot-row a:hover{letter-spacing:.12em}

/* ── 滚动进入 ── */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .8s cubic-bezier(.19,.79,.24,1);transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .shot{transform:rotate(var(--rot,-4deg))!important}
  .mark,.topbar nav a,main > article img,.rail aside a{transition:none}
}

/* ── 窄屏 ── */
@media (max-width:999px){
  .topbar{
    position:sticky;
    top:0;left:auto;right:auto;bottom:auto;
    width:auto;height:auto;
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border-right:0;
    border-bottom:3px solid var(--brand);
    overflow:visible;
  }
  .mark{width:44px;height:44px}
  .topbar nav{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav p{flex-direction:row;gap:6px}
  .topbar nav a{white-space:nowrap;padding:10px 12px}
  .topbar nav a:hover,.topbar nav a.on{transform:none}

  main > article{scroll-margin-top:104px}

  .hero{
    min-height:calc(100svh - 96px);
    align-items:flex-start;
    padding:36px var(--pad) 300px;
  }
  .hero h1{font-size:clamp(1.9rem,8.2vw,2.6rem)}
  .hero-copy{max-width:none;padding-right:0}
  .hero::before{height:22vh;bottom:9%}
  .shot-a{width:52%;right:0;top:auto;bottom:26px}
  .shot-b{width:44%;right:auto;left:0;bottom:96px}

  .rail{position:static;width:auto;margin:28px 0 0}
  .rail aside{
    display:flex;
    gap:8px;
    overflow-x:auto;
    border-top:3px solid var(--ink);
    padding:12px 0 0;
    scrollbar-width:none;
  }
  .rail aside::-webkit-scrollbar{display:none}
  .rail-title{margin:0;white-space:nowrap;line-height:44px}
  .rail aside a{
    border-bottom:0;
    white-space:nowrap;
    background:rgba(18,16,14,.07);
    border-radius:999px;
    padding:0 14px;
    line-height:44px;
    min-height:44px;
  }
  .rail aside a:hover{padding-left:14px}

  .intro{padding:56px 0 36px}
  main > article:not(.hero):not(.rail):not(.intro){padding:44px 0}
  footer{padding-top:52px}
}

@media (max-width:520px){
  .cta{font-size:1.6rem}
  main > article blockquote{padding:16px 18px}
}

@media (min-width:1000px){
  :root{--gut:348px;--pad:48px}
}

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