@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{
  --mint:#5cc6b0;
  --mint-deep:#3f9c8a;
  --sand:#d4c4a8;
  --ink:#172623;
  --ink-soft:#3a4b47;
  --clay:#c67b5c;
  --paper:#f5eee3;
  --paper-2:#ece1d1;
  --line:rgba(23,38,35,.24);
  --line-soft:rgba(23,38,35,.13);
  --pad:clamp(1rem,4vw,2rem);
  --measure:66ch;
}

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

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

body{
  margin:0;
  font-family:'Inter','Helvetica Neue',-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  font-size:17px;
  line-height:1.75;
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 88% -10%, rgba(92,198,176,.22), transparent 60%),
    radial-gradient(90% 70% at -10% 8%, rgba(198,123,92,.20), transparent 62%),
    linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:60;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a{color:inherit;text-decoration:none;}

a:focus-visible,
button:focus-visible{
  outline:2px solid var(--mint-deep);
  outline-offset:3px;
}

h1,h2,h3{
  font-family:'Calistoga',Georgia,'Songti SC',serif;
  font-weight:400;
  letter-spacing:.005em;
  line-height:1.14;
  margin:0;
}

p{margin:0 0 1em;}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(23,38,35,.05);
}

.brandrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem var(--pad);
  border-bottom:1px solid var(--line-soft);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  min-height:44px;
}

.brand-logo{
  width:34px;
  height:34px;
  border:1px solid var(--ink);
  object-fit:cover;
}

.brand-mark{
  display:grid;
  place-items:center;
  font-family:'Calistoga',serif;
  font-size:1rem;
  line-height:1;
  background:var(--sand);
}

.brand-name{
  font-family:'Calistoga',Georgia,serif;
  font-size:clamp(1.35rem,4.6vw,1.9rem);
  line-height:1;
  letter-spacing:.02em;
}

.contact{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  min-height:44px;
  padding:0 1rem;
  border:1px solid var(--ink);
  font-size:.85rem;
  letter-spacing:.14em;
  background:transparent;
  transition:background .28s ease-out, color .28s ease-out;
}

.contact .dot{
  width:8px;
  height:8px;
  background:var(--mint);
  border:1px solid var(--ink);
}

.contact:hover{background:var(--ink);color:var(--paper);}

/* ---------- 导航 ---------- */
.nav{
  padding:0 var(--pad);
  overflow-x:auto;
  scrollbar-width:none;
}

.nav::-webkit-scrollbar{display:none;}

.nav ol{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:0 1.4rem;
  margin:0;
  padding:0;
  list-style:none;
}

.nav ol li{display:flex;}

.nav ol li a{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  min-height:44px;
  padding:.55rem 0;
  font-size:.88rem;
  letter-spacing:.05em;
  color:var(--ink-soft);
  border-bottom:2px solid transparent;
  transition:color .25s ease-out, border-color .25s ease-out;
  white-space:nowrap;
}

.nav ol li a .n{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.68rem;
  color:var(--mint-deep);
  transform:translateY(-.2em);
}

.nav ol li a:hover{
  color:var(--ink);
  border-bottom-color:var(--clay);
}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(1.5rem,5vw,3rem);
  padding:clamp(1.6rem,6vw,4rem) var(--pad) 0;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}

.hero-num{
  position:absolute;
  top:.02em;
  right:-.06em;
  z-index:0;
  font-family:'Calistoga',serif;
  font-size:clamp(7rem,25vw,17rem);
  line-height:.78;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(23,38,35,.17);
  pointer-events:none;
  user-select:none;
}

.hero-copy{
  position:relative;
  z-index:1;
  max-width:22ch;
  padding-top:clamp(.4rem,4vw,2rem);
}

.hero h1{
  font-size:clamp(2.4rem,8.4vw,5.1rem);
  line-height:1.02;
  letter-spacing:-.01em;
  text-wrap:balance;
}

.hero-media{
  position:relative;
  z-index:1;
  margin:0 calc(var(--pad) * -1) 0;
  border-top:1px solid var(--line);
  overflow:hidden;
}

.hero-media img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  transform:scale(1.06);
  will-change:transform;
}

/* ---------- 主体 ---------- */
.shell{
  display:grid;
  grid-template-columns:216px minmax(0,1fr);
  gap:clamp(1.4rem,4vw,3.4rem);
  max-width:1180px;
  margin:0 auto;
  padding:clamp(2rem,6vw,4.5rem) var(--pad) clamp(2.4rem,7vw,5rem);
}

.rail{
  position:sticky;
  top:9.5rem;
  align-self:start;
  border-right:1px solid var(--line-soft);
  padding-right:1.1rem;
}

.rail-title{
  font-size:.95rem;
  letter-spacing:.28em;
  margin-bottom:.9rem;
  color:var(--ink);
}

.rail-title span{
  display:inline-block;
  border-bottom:2px solid var(--mint);
  padding-bottom:.25rem;
}

.rail-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.1rem;
}

.rail-list a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:.35rem 0 .35rem .6rem;
  font-size:.9rem;
  color:var(--ink-soft);
  border-left:1px solid var(--line-soft);
  transition:color .25s ease-out, border-color .25s ease-out, padding-left .25s ease-out;
}

.rail-list a:hover{
  color:var(--ink);
  border-left-color:var(--clay);
  padding-left:.9rem;
}

.doc{
  max-width:var(--measure);
  counter-reset:sec;
}

.doc section{
  counter-increment:sec;
  scroll-margin-top:9.5rem;
  padding:clamp(1.8rem,4vw,2.8rem) 0;
  border-top:1px solid var(--line-soft);
}

.doc section:first-child{
  border-top:0;
  padding-top:0;
}

.doc h2{
  font-size:clamp(1.5rem,3.6vw,2.15rem);
  margin-bottom:.75rem;
  text-wrap:balance;
}

.doc h2::before{
  content:counter(sec,decimal-leading-zero);
  display:block;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.7rem;
  letter-spacing:.24em;
  color:var(--mint-deep);
  margin-bottom:.5rem;
}

.doc h2 > span,
.foot-title > span,
.rail-title > span{
  display:inline-block;
}

.doc h3{
  font-size:1.2rem;
  margin:1.4rem 0 .5rem;
}

.doc p{
  color:var(--ink-soft);
}

.doc section > p:first-of-type{
  font-size:1.06rem;
  color:var(--ink);
}

.doc a{
  color:var(--ink);
  border-bottom:1px solid var(--mint-deep);
}

.doc a:hover{border-bottom-width:2px;}

.doc ul,
.doc ol{
  margin:0 0 1em;
  padding-left:1.3rem;
  color:var(--ink-soft);
}

.doc li{margin:.35em 0;}

.doc li::marker{color:var(--clay);}

.doc img{
  width:100%;
  margin:1.2rem 0;
  border:1px solid var(--line);
}

.doc figure{margin:1.2rem 0;}

.doc blockquote{
  margin:1.4rem 0;
  padding:.9rem 0 .9rem 1.2rem;
  border-left:3px solid var(--sand);
  font-size:1.05rem;
  color:var(--ink);
}

.doc blockquote p:last-child{margin-bottom:0;}

.doc strong{color:var(--ink);}

.doc code{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.88em;
  background:rgba(23,38,35,.07);
  padding:.1em .35em;
}

.doc table{
  width:100%;
  border-collapse:collapse;
  font-size:.95rem;
  margin:1.2rem 0;
}

.doc th,
.doc td{
  border:1px solid var(--line);
  padding:.55rem .7rem;
  text-align:left;
}

/* ---------- 页脚 ---------- */
.foot{
  border-top:1px solid var(--ink);
  background:rgba(212,196,168,.34);
  padding:clamp(1.8rem,5vw,3rem) var(--pad) clamp(2rem,5vw,2.6rem);
}

.foot-grid{
  display:grid;
  grid-template-columns:1.1fr 1.4fr 1fr;
  gap:clamp(1.2rem,3vw,2.6rem);
  max-width:1180px;
  margin:0 auto;
}

.foot-address{
  font-style:normal;
  font-family:'Calistoga',Georgia,serif;
  font-size:1.25rem;
  line-height:1.3;
}

.foot-title{
  font-size:.8rem;
  letter-spacing:.28em;
  color:var(--ink-soft);
  margin-bottom:.5rem;
  font-family:'Inter',sans-serif;
}

.foot-list{
  list-style:none;
  margin:0;
  padding:0;
}

.foot-list a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  font-size:.92rem;
  color:var(--ink-soft);
  border-bottom:1px solid transparent;
  transition:color .25s ease-out, border-color .25s ease-out;
}

.foot-list a:hover{
  color:var(--ink);
  border-bottom-color:var(--clay);
}

.foot-end{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.4rem;
}

.copy{
  margin:0;
  font-size:.9rem;
  color:var(--ink-soft);
}

.to-top{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:.85rem;
  letter-spacing:.16em;
  border-bottom:1px solid var(--line);
  transition:border-color .25s ease-out;
}

.to-top:hover{border-bottom-color:var(--clay);}

/* ---------- 移动端 ---------- */
@media (max-width:860px){
  .shell{
    grid-template-columns:minmax(0,1fr);
    gap:2rem;
  }

  .rail{
    position:static;
    border-right:0;
    border-bottom:1px solid var(--line-soft);
    padding:0 0 .8rem;
  }

  .rail-title{margin-bottom:.5rem;}

  .rail-list{
    grid-auto-flow:column;
    grid-auto-columns:max-content;
    overflow-x:auto;
    gap:.4rem;
    scrollbar-width:none;
  }

  .rail-list::-webkit-scrollbar{display:none;}

  .rail-list a{
    border:1px solid var(--line-soft);
    padding:.35rem .7rem;
    min-height:40px;
    font-size:.85rem;
  }

  .rail-list a:hover{padding-left:.7rem;}

  .doc article{scroll-margin-top:8.5rem;}

  .foot-grid{
    grid-template-columns:1fr;
    gap:1.4rem;
  }

  .foot-end{flex-direction:row;align-items:center;gap:1rem;}
}

@media (max-width:560px){
  body{font-size:16.5px;}

  .hero{min-height:auto;padding-bottom:0;}

  .hero-copy{max-width:100%;padding-bottom:1.5rem;}

  .hero-media img{aspect-ratio:4/3;}

  .hero-num{font-size:clamp(5.5rem,32vw,9rem);}

  .nav ol{gap:0 1.1rem;}

  .nav ol li a{font-size:.82rem;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .hero-media img{transform:none;}
}

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