/* ==========================================================================
   雅博官网 · 共享样式 /assets/site.css
   基调：矿物青 × 湖盐白；暖金与陶土橙作行动色；等宽索引建立档案感
   ========================================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:128px;
}
body,h1,h2,h3,h4,h5,p,figure,blockquote,ul,ol,dl,dd{ margin:0; }
ul,ol{ padding:0; }
img,svg,video{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; margin:0; }
table{ border-collapse:collapse; }

/* ---------- Variables ---------- */
:root{
  --c-mineral:#1F4E4A;
  --c-ink:#102D2C;
  --c-salt:#F7F4EA;
  --c-mist:#D9E7E2;
  --c-gold:#C89B4B;
  --c-clay:#C46643;
  --c-archive:#E9DFCF;
  --c-coord:#2E6F78;
  --c-moss:#4E7A5E;
  --c-fog:#5F6F6B;
  --c-paper:#FFFDF4;

  --line:rgba(31,78,74,.18);
  --line-strong:rgba(31,78,74,.42);
  --on-dark:rgba(247,244,234,.78);
  --on-dark-soft:rgba(217,231,226,.56);

  --font-display:"Songti SC","Noto Serif SC","Source Han Serif SC","SimSun",Georgia,serif;
  --font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1240px;
  --gutter:clamp(1.1rem,4vw,3rem);
  --sp-1:.5rem;
  --sp-2:.85rem;
  --sp-3:1.25rem;
  --sp-4:2rem;
  --sp-5:3rem;
  --sp-6:4.5rem;

  --radius-s:4px;
  --radius-m:12px;
  --radius-l:24px;

  --dur:480ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-card:0 22px 46px -32px rgba(16,45,44,.6);
}

/* ---------- Base typography ---------- */
body{
  background-color:var(--c-salt);
  background-image:radial-gradient(rgba(31,78,74,.075) 1px,transparent 1.2px);
  background-size:26px 26px;
  color:var(--c-ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.01em;
  color:var(--c-ink);
}
h1{ font-size:clamp(2.6rem,6.5vw,5.4rem); }
h2{ font-size:clamp(1.7rem,3.4vw,2.7rem); }
h3{ font-size:clamp(1.15rem,1.8vw,1.45rem); letter-spacing:0; }
h4{ font-size:1.02rem; letter-spacing:0; }
p{ max-width:68ch; }
a{ color:var(--c-coord); text-decoration:none; transition:color 220ms var(--ease); }
a:hover{ color:var(--c-clay); }
strong,b{ font-weight:700; }
small{ font-size:.82rem; color:var(--c-fog); }
hr{ border:0; }
::selection{ background:var(--c-gold); color:var(--c-ink); }
:focus-visible{
  outline:2px solid var(--c-clay);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Layout ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:clamp(2.4rem,5.5vw,4.8rem); }
.grid{ display:grid; gap:clamp(1rem,2.4vw,2rem); }
.grid--split{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
.grid--half{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--third{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.divider{ height:1px; background:var(--line); border:0; margin-block:clamp(1.6rem,3vw,2.6rem); }

/* ---------- Utility ---------- */
.mono{
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.1em;
  color:var(--c-fog);
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  color:var(--c-mineral);
}
.eyebrow::before{
  content:"";
  width:22px;
  height:2px;
  background:var(--c-gold);
  flex:none;
}
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------- Section head ---------- */
.section-head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.6rem 1.1rem;
  margin-bottom:clamp(1.2rem,2.6vw,2rem);
}
.index-num{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(1.9rem,4.4vw,3rem);
  line-height:1;
  color:var(--c-gold);
  letter-spacing:.02em;
}
.section-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.5rem,3.2vw,2.4rem);
  line-height:1.2;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.78rem 1.4rem;
  border:1px solid transparent;
  border-radius:999px;
  font-size:.95rem;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  cursor:pointer;
  transition:transform var(--dur) var(--ease),background 220ms var(--ease),
             color 220ms var(--ease),border-color 220ms var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--c-mineral); color:var(--c-salt); }
.btn--primary:hover{ background:var(--c-clay); color:var(--c-salt); }
.btn--gold{ background:var(--c-gold); color:var(--c-ink); }
.btn--gold:hover{ background:var(--c-ink); color:var(--c-salt); }
.btn--ghost{ background:transparent; color:var(--c-mineral); border-color:var(--line-strong); }
.btn--ghost:hover{ background:var(--c-mist); color:var(--c-mineral); border-color:var(--c-mist); }

/* ---------- Tags ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.26rem .62rem;
  border-radius:999px;
  background:var(--c-mist);
  color:var(--c-mineral);
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.08em;
  line-height:1.5;
  white-space:nowrap;
}
.tag--gold{ background:rgba(200,155,75,.22); color:#6D5218; }
.tag--clay{ background:rgba(196,102,67,.18); color:#8E3B1C; }

/* ---------- Cards ---------- */
.card{
  background:var(--c-paper);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:clamp(1.1rem,2.2vw,1.8rem);
  box-shadow:var(--shadow-card);
}
.card--archive{
  background:var(--c-archive);
  border-color:rgba(31,78,74,.14);
  box-shadow:none;
}

/* ---------- Media frame ---------- */
.media-frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-m);
  background-color:var(--c-mist);
  background-image:repeating-linear-gradient(118deg,rgba(31,78,74,.1) 0 1px,transparent 1px 22px);
  aspect-ratio:16/10;
  isolation:isolate;
}
.media-frame img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
}
.media-frame--wide{ aspect-ratio:21/9; }
.media-frame--tall{ aspect-ratio:3/4; }
.media-frame--square{ aspect-ratio:1/1; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  list-style:none;
  margin:0;
  padding:0;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--c-fog);
}
.breadcrumb a{ color:var(--c-coord); }
.breadcrumb a:hover{ color:var(--c-clay); }
.breadcrumb li + li::before{
  content:"/";
  margin-right:.5rem;
  color:var(--line-strong);
}

/* ---------- Reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 560ms var(--ease),transform 560ms var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:80ms; }
.reveal[data-delay="2"]{ transition-delay:160ms; }
.reveal[data-delay="3"]{ transition-delay:240ms; }
.reveal[data-delay="4"]{ transition-delay:320ms; }
.reveal[data-delay="5"]{ transition-delay:400ms; }

/* ---------- Scroll progress & to-top (injected by JS) ---------- */
.scroll-progress{
  position:fixed;
  top:0;left:0;
  height:3px;
  width:0;
  background:linear-gradient(90deg,var(--c-gold),var(--c-clay));
  z-index:100;
  pointer-events:none;
}
.to-top{
  position:fixed;
  right:clamp(.8rem,3vw,2rem);
  bottom:clamp(.8rem,3vw,2rem);
  width:46px;height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(247,244,234,.3);
  border-radius:50%;
  background:var(--c-mineral);
  color:var(--c-salt);
  font-size:1.05rem;
  line-height:1;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),
             background 220ms var(--ease),visibility var(--dur);
  z-index:80;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--c-clay); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--c-salt);
  border-bottom:1px solid var(--line);
}
.skip-link{
  position:absolute;
  left:50%;
  top:0;
  transform:translate(-50%,-160%);
  z-index:200;
  background:var(--c-ink);
  color:var(--c-salt);
  padding:.62rem 1.15rem;
  border-radius:0 0 var(--radius-s) var(--radius-s);
  font-size:.86rem;
  font-weight:700;
  transition:transform 220ms var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible{ transform:translate(-50%,0); color:var(--c-salt); }

.header-rail{
  background:var(--c-ink);
  color:var(--on-dark);
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.1em;
}
.rail-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.35rem 1rem;
  min-height:34px;
  padding-block:.32rem;
}
.rail-status{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:rgba(247,244,234,.88);
}
.rail-dot{
  width:7px;height:7px;
  flex:none;
  border-radius:50%;
  background:var(--c-gold);
  box-shadow:0 0 0 3px rgba(200,155,75,.22);
}
.rail-meta{ color:var(--on-dark-soft); letter-spacing:.14em; }

.header-main{ background:var(--c-salt); }
.header-grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  padding-block:.95rem;
}

/* Brand */
.brand{
  display:inline-flex;
  align-items:center;
  gap:.85rem;
  color:var(--c-ink);
  flex:0 0 auto;
}
.brand:hover{ color:var(--c-ink); }
.brand-mark{
  position:relative;
  display:grid;
  place-items:center;
  width:46px;height:46px;
  flex:0 0 auto;
  background:var(--c-mineral);
  border-radius:6px 15px 6px 6px;
}
.brand-mark::before{
  content:"";
  width:22px;height:22px;
  border:1.5px solid rgba(247,244,234,.72);
  border-radius:50%;
}
.brand-mark::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:7px;height:7px;
  margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:var(--c-gold);
  box-shadow:0 0 0 3px rgba(200,155,75,.25);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.16; }
.brand-name{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.4rem;
  letter-spacing:.02em;
}
.brand-line{
  margin-top:.2rem;
  font-size:.72rem;
  letter-spacing:.05em;
  color:var(--c-fog);
}

/* Toggle */
.nav-toggle{ display:none; }
.nav-toggle-bars{ display:grid; gap:4px; width:16px; }
.nav-toggle-bars span{
  display:block;
  height:2px;
  background:currentColor;
  transition:transform var(--dur) var(--ease);
}
.nav-toggle-text{ font-size:.84rem; font-weight:700; letter-spacing:.06em; }

/* Nav */
.primary-nav{
  display:flex;
  align-items:center;
  gap:1rem;
}
.nav-list{
  display:flex;
  align-items:center;
  gap:.1rem;
  list-style:none;
}
.nav-link{
  position:relative;
  display:inline-block;
  padding:.5rem .7rem;
  font-size:.91rem;
  font-weight:500;
  color:var(--c-ink);
  border-radius:var(--radius-s);
  white-space:nowrap;
  transition:background 220ms var(--ease),color 220ms var(--ease);
}
.nav-link::after{
  content:"";
  position:absolute;
  left:.7rem;right:.7rem;bottom:.26rem;
  height:2px;
  background:var(--c-gold);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--dur) var(--ease);
}
.nav-link:hover{ background:var(--c-mist); color:var(--c-mineral); }
.nav-link:hover::after{ transform:scaleX(1); }
.nav-link[aria-current="page"]{
  background:var(--c-mist);
  color:var(--c-mineral);
  font-weight:700;
}
.nav-link[aria-current="page"]::after{ transform:scaleX(1); }

.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.6rem 1.1rem;
  border-radius:999px;
  background:var(--c-gold);
  color:var(--c-ink);
  font-size:.9rem;
  font-weight:700;
  white-space:nowrap;
  transition:background 220ms var(--ease),color 220ms var(--ease),
             transform var(--dur) var(--ease);
}
.nav-cta:hover{
  background:var(--c-mineral);
  color:var(--c-salt);
  transform:translateY(-1px);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  position:relative;
  margin-top:clamp(2.5rem,6vw,5rem);
  background:var(--c-ink);
  color:var(--c-salt);
}
.site-footer::before{
  content:"";
  display:block;
  height:6px;
  background:linear-gradient(
    90deg,
    var(--c-gold) 0 12%,
    var(--c-mineral) 12% 48%,
    var(--c-coord) 48% 62%,
    var(--c-clay) 62% 74%,
    var(--c-mist) 74% 100%
  );
}
.footer-top{ padding-block:clamp(2.4rem,6vw,4.4rem) clamp(1.6rem,3vw,2.4rem); }
.footer-grid{
  display:grid;
  grid-template-columns:1.35fr .7fr .7fr 1.05fr;
  gap:clamp(1.6rem,3.2vw,3rem);
}

.footer-brand-name{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.6rem,3vw,2.15rem);
  line-height:1.2;
  color:var(--c-salt);
}
.footer-brand-line{
  margin-top:.45rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  color:var(--c-gold);
}
.footer-summary{
  margin-top:1rem;
  font-size:.94rem;
  line-height:1.85;
  color:var(--on-dark);
  max-width:32ch;
}
.footer-stats{
  display:flex;
  flex-wrap:wrap;
  gap:1.4rem;
  margin-top:1.4rem;
}
.stat{ display:grid; gap:.1rem; }
.stat-num{
  font-family:var(--font-mono);
  font-size:1.15rem;
  font-weight:700;
  color:var(--c-gold);
  letter-spacing:.02em;
}
.stat-label{
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--on-dark-soft);
}

.footer-col-title{
  margin-bottom:.9rem;
  padding-bottom:.6rem;
  border-bottom:1px solid rgba(217,231,226,.2);
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.2em;
  color:var(--c-mist);
  opacity:.8;
}
.footer-links{
  list-style:none;
  display:grid;
  gap:.55rem;
}
.footer-link{
  display:inline-flex;
  align-items:baseline;
  gap:.45rem;
  font-size:.93rem;
  color:rgba(247,244,234,.86);
}
.footer-link::before{
  content:"·";
  color:var(--c-gold);
  flex:none;
}
.footer-link:hover{ color:var(--c-gold); }

.footer-contact{ display:grid; gap:.85rem; align-content:start; }
.contact-row{ display:grid; gap:.18rem; }
.contact-label{
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.18em;
  color:var(--on-dark-soft);
}
.contact-value{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.55rem;
  font-size:.92rem;
  line-height:1.6;
  color:var(--c-salt);
  word-break:break-word;
}
.copy-btn{
  padding:.18rem .45rem;
  border:1px solid rgba(200,155,75,.5);
  border-radius:3px;
  background:transparent;
  color:var(--c-gold);
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.1em;
  cursor:pointer;
  transition:background 220ms var(--ease),color 220ms var(--ease),
             border-color 220ms var(--ease);
}
.copy-btn:hover{ background:var(--c-gold); color:var(--c-ink); }
.copy-btn[data-copied="true"]{
  background:var(--c-moss);
  border-color:var(--c-moss);
  color:var(--c-salt);
}
.footer-hours{
  margin-top:.2rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.08em;
  color:var(--on-dark-soft);
}

.footer-note{
  margin-top:clamp(1.6rem,3.4vw,2.4rem);
  padding-left:.9rem;
  border-left:2px solid var(--c-clay);
  font-size:.82rem;
  line-height:1.8;
  color:var(--on-dark-soft);
  max-width:70ch;
}
.footer-archive{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  list-style:none;
  margin-top:clamp(1.8rem,3.6vw,2.6rem);
  padding-top:1.4rem;
  border-top:1px dashed rgba(217,231,226,.22);
}
.footer-archive li{
  padding:.28rem .6rem;
  border:1px solid rgba(217,231,226,.24);
  border-radius:3px;
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.18em;
  color:rgba(217,231,226,.6);
}

.footer-bottom{ border-top:1px solid rgba(217,231,226,.16); }
.footer-bottom-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.7rem 1.2rem;
  padding-block:1.1rem;
  font-size:.78rem;
  color:var(--on-dark-soft);
}
.footer-copy{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.04em;
}
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  list-style:none;
}
.legal-link{ color:rgba(247,244,234,.72); }
.legal-link:hover{ color:var(--c-gold); }
.footer-icp{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1120px){
  html{ scroll-padding-top:112px; }
  .header-grid{ flex-wrap:wrap; row-gap:.7rem; }
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    padding:.55rem .85rem;
    border:1px solid var(--c-mineral);
    border-radius:var(--radius-s);
    background:var(--c-mineral);
    color:var(--c-salt);
    cursor:pointer;
  }
  .site-header[data-open] .nav-toggle-bars span:first-child{ transform:translateY(3px) rotate(45deg); }
  .site-header[data-open] .nav-toggle-bars span:last-child{ transform:translateY(-3px) rotate(-45deg); }

  .primary-nav{ display:none; }
  .site-header[data-open] .primary-nav{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:.55rem;
    flex-basis:100%;
    width:100%;
    padding-top:.7rem;
    border-top:1px dashed var(--line-strong);
    animation:navDrop 320ms var(--ease) both;
  }
  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:.1rem;
    width:100%;
  }
  .nav-link{ display:block; padding:.72rem .7rem; }
  .nav-link::after{ display:none; }
  .nav-link[aria-current="page"]{ background:var(--c-mineral); color:var(--c-salt); }
  .nav-cta{ margin-top:.35rem; padding:.78rem 1.1rem; }
}

@keyframes navDrop{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:none; }
}

@media (max-width:960px){
  body{ font-size:16px; }
  .grid--split,
  .grid--third{ grid-template-columns:minmax(0,1fr); }
  .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .brand-line{ display:none; }
}

@media (max-width:640px){
  .grid--half{ grid-template-columns:minmax(0,1fr); }
  .footer-grid{ grid-template-columns:minmax(0,1fr); gap:1.6rem; }
  .rail-meta{ display:none; }
  .rail-inner{ justify-content:flex-start; }
  .brand-mark{ width:40px;height:40px; border-radius:5px 12px 5px 5px; }
  .brand-name{ font-size:1.22rem; }
  .footer-bottom-inner{ flex-direction:column; align-items:flex-start; gap:.55rem; }
  .footer-stats{ gap:1.1rem; }
  .to-top{ width:42px;height:42px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{ opacity:1!important; transform:none!important; }
  .btn:hover,
  .nav-cta:hover,
  .to-top{ transform:none; }
}