/* ==========================================================
   酷游客服 · Site Kit 共享样式 /assets/site.css
   坐标 + 对照 · 戈壁暖沙 / 贺兰石青灰 / 葡萄酒紫红
   ========================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root{
  --sand:#E7D3B3;
  --sand-light:#F4E7D0;
  --stone:#4F5F61;
  --slate:#29383A;
  --wine:#7A2141;
  --wine-soft:#A44867;
  --clay:#C65A3A;
  --paper:#FAF5EC;
  --teal:#2F6F73;
  --ink:#1C2224;

  --font-sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --rail-w:236px;
  --topbar-h:64px;
  --gutter:clamp(18px,4vw,56px);
  --maxw:1200px;

  --line-soft:rgba(41,56,58,.16);
  --line-frame:rgba(79,95,97,.3);
  --radius:3px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-card:0 22px 48px -34px rgba(28,34,36,.75);
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after{box-sizing:border-box;}

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

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth;}
}

h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
img,svg,video,canvas{display:block;max-width:100%;height:auto;}
strong,b{font-weight:700;color:var(--slate);}

::selection{background:var(--wine);color:#FDF6EC;}

/* ---------- 3. 页面基底 ---------- */
body{
  margin:0;
  padding-top:var(--topbar-h);
  font-family:var(--font-sans);
  font-size:clamp(15.5px,1vw,17px);
  line-height:1.78;
  color:var(--ink);
  background-color:var(--sand);
  background-image:
    linear-gradient(to right,rgba(79,95,97,.075) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(79,95,97,.075) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

@media (min-width:1024px){
  body{padding-left:var(--rail-w);}
  body.ky-nav-open{overflow:auto;}
}

/* ---------- 4. 焦点可见 ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--wine);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- 5. 头部外壳 ---------- */
.ky-header{position:relative;z-index:80;}

.ky-skip{
  position:fixed;
  top:10px;
  left:10px;
  z-index:200;
  padding:11px 18px;
  border-radius:var(--radius);
  background:var(--slate);
  color:var(--paper);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  box-shadow:0 12px 28px -16px rgba(28,34,36,.9);
  transform:translateY(-190%);
  transition:transform .22s var(--ease);
}
.ky-skip:focus-visible{transform:translateY(0);}

/* ---------- 6. 顶部坐标条 ---------- */
.ky-topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:80;
  display:flex;
  align-items:center;
  gap:clamp(10px,2vw,28px);
  height:var(--topbar-h);
  padding-inline:clamp(14px,2.4vw,28px);
  background:linear-gradient(180deg,#F4E7D0 0%,#EFDFC3 100%);
  border-bottom:1px solid var(--line-frame);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
}

.ky-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex:0 1 auto;
}

.ky-brand__mark{
  display:grid;
  place-items:center;
  flex:none;
  width:38px;
  height:38px;
  border-radius:var(--radius);
  background:var(--slate);
  color:var(--sand-light);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  box-shadow:inset 0 0 0 1px rgba(231,211,179,.28);
}

.ky-brand__text{display:block;min-width:0;overflow:hidden;}

.ky-brand__name{
  display:block;
  font-family:var(--font-sans);
  font-size:16px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:.05em;
  color:var(--slate);
  white-space:nowrap;
}

.ky-brand__line{
  display:block;
  margin-top:2px;
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.35;
  letter-spacing:.06em;
  color:var(--stone);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ky-topbar__coords{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:rgba(79,95,97,.72);
  white-space:nowrap;
}

.ky-navtoggle{
  display:none;
  align-items:center;
  gap:10px;
  margin-left:auto;
  padding:9px 14px;
  border:1px solid var(--slate);
  border-radius:var(--radius);
  background:var(--slate);
  color:var(--sand-light);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.ky-navtoggle:hover{background:#1F2B2D;}

.ky-navtoggle__bars{
  position:relative;
  display:block;
  width:16px;
  height:10px;
  flex:none;
}
.ky-navtoggle__bars::before,
.ky-navtoggle__bars::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:1.5px;
  background:currentColor;
  transition:transform .26s var(--ease),opacity .2s var(--ease);
}
.ky-navtoggle__bars::before{top:0;}
.ky-navtoggle__bars::after{bottom:0;}

.ky-navtoggle__label{
  display:block;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  white-space:nowrap;
}

.ky-header[data-open="true"] .ky-navtoggle__bars::before{transform:translateY(4.25px) rotate(45deg);}
.ky-header[data-open="true"] .ky-navtoggle__bars::after{transform:translateY(-4.25px) rotate(-45deg);}

/* 滚动进度线 */
.ky-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:3px;
  background:linear-gradient(90deg,var(--wine) 0%,var(--wine-soft) 55%,var(--clay) 100%);
  transform:scaleX(var(--p,0));
  transform-origin:0 50%;
  transition:transform .12s linear;
  pointer-events:none;
}

/* ---------- 7. 坐标轴导航栏（桌面） ---------- */
.ky-rail{
  position:fixed;
  top:var(--topbar-h);
  left:0;
  bottom:0;
  z-index:70;
  width:var(--rail-w);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
  padding:26px 18px 22px;
  background:var(--sand-light);
  border-right:1px solid var(--line-frame);
  overflow-y:auto;
  overscroll-behavior:contain;
}

.ky-rail::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:9px;
  height:100%;
  background-image:repeating-linear-gradient(to bottom,rgba(79,95,97,.36) 0 1px,transparent 1px 28px);
  pointer-events:none;
}

.ky-nav{position:relative;}

.ky-nav__label{
  margin-bottom:14px;
  padding-left:14px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.18em;
  color:rgba(79,95,97,.72);
}

.ky-nav__list{display:flex;flex-direction:column;gap:2px;}

.ky-nav__item{margin:0;}

.ky-nav__link{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px 10px 14px;
  border-radius:var(--radius);
  font-size:14.5px;
  font-weight:500;
  line-height:1.4;
  color:var(--slate);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.ky-nav__link::before{
  content:"";
  flex:none;
  width:14px;
  height:1px;
  background:var(--stone);
  opacity:.5;
  transition:width .26s var(--ease),background .2s var(--ease),opacity .2s var(--ease);
}
.ky-nav__link:hover{background:rgba(79,95,97,.11);}
.ky-nav__link:hover::before{width:24px;opacity:1;background:var(--clay);}

.ky-nav__link[aria-current="page"]{
  background:var(--slate);
  color:var(--sand-light);
  font-weight:700;
}
.ky-nav__link[aria-current="page"]::before{
  width:24px;
  opacity:1;
  background:var(--clay);
}

.ky-rail__foot{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding-top:18px;
  border-top:1px solid var(--line-frame);
}

.ky-rail__note{
  margin-top:2px;
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.6;
  letter-spacing:.02em;
  color:var(--stone);
}

/* ---------- 8. 按钮 ---------- */
.ky-btn{
  --btn-bg:var(--slate);
  --btn-fg:var(--sand-light);
  --btn-bd:var(--slate);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:11px 18px;
  border:1px solid var(--btn-bd);
  border-radius:var(--radius);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.03em;
  text-align:center;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.ky-btn:hover{transform:translateX(2px);}
.ky-btn:active{transform:translateX(0);}

.ky-btn--wine{--btn-bg:var(--wine);--btn-fg:#FDF6EC;--btn-bd:var(--wine);}
.ky-btn--wine:hover{--btn-bg:#8C2A4C;--btn-bd:#8C2A4C;}

.ky-btn--ghost{--btn-bg:transparent;--btn-fg:var(--slate);--btn-bd:rgba(79,95,97,.45);}
.ky-btn--ghost:hover{--btn-bg:rgba(79,95,97,.12);--btn-bd:rgba(79,95,97,.7);}

.ky-btn--clay{--btn-bg:var(--clay);--btn-fg:#FFF4EC;--btn-bd:var(--clay);}
.ky-btn--clay:hover{--btn-bg:#AE4A2D;--btn-bd:#AE4A2D;}

.ky-btn--block{display:flex;width:100%;}

/* ---------- 9. 页脚 ---------- */
.ky-footer{
  position:relative;
  margin-top:clamp(48px,7vw,96px);
  padding:clamp(40px,5vw,72px) var(--gutter) 0;
  background-color:var(--slate);
  background-image:
    linear-gradient(to right,rgba(231,211,179,.065) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(231,211,179,.065) 1px,transparent 1px);
  background-size:64px 64px;
  color:rgba(244,231,208,.86);
  isolation:isolate;
  overflow:hidden;
}

.ky-footer::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--wine) 0%,var(--clay) 58%,var(--teal) 100%);
}

.ky-footer__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(220px,1.45fr) repeat(3,minmax(108px,.72fr)) minmax(228px,1.15fr);
  gap:clamp(22px,3vw,44px);
  max-width:var(--maxw);
  margin-inline:auto;
  padding-bottom:clamp(30px,4vw,52px);
  border-bottom:1px solid rgba(231,211,179,.18);
}

.ky-footer__brand{min-width:0;}

.ky-footer__mark{
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(231,211,179,.45);
  border-radius:var(--radius);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--sand-light);
}

.ky-footer__claim{
  margin-top:16px;
  max-width:20ch;
  font-size:15px;
  font-weight:700;
  line-height:1.7;
  color:var(--sand-light);
}

.ky-footer__eyebrow{
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.6;
  letter-spacing:.16em;
  color:rgba(231,211,179,.55);
}

.ky-footer__col{min-width:0;}

.ky-footer__title{
  margin-bottom:15px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--clay);
}

.ky-footer__list{display:flex;flex-direction:column;gap:9px;}

.ky-footer__link{
  display:inline-block;
  font-size:14px;
  line-height:1.6;
  color:rgba(244,231,208,.85);
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.ky-footer__link:hover{
  color:#FFF9F0;
  border-bottom-color:var(--clay);
  transform:translateX(3px);
}

.ky-footer__contact-list{
  display:flex;
  flex-direction:column;
  gap:11px;
  margin:0;
}

.ky-footer__contact-item{min-width:0;}

.ky-footer__contact-list dt{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:rgba(231,211,179,.5);
}

.ky-footer__contact-list dd{
  margin:2px 0 0;
  font-size:14px;
  line-height:1.6;
  color:var(--sand-light);
  overflow-wrap:anywhere;
}

.ky-footer__mono{
  font-family:var(--font-mono);
  letter-spacing:.02em;
}

.ky-footer__note{
  margin-top:14px;
  max-width:32ch;
  font-size:12.5px;
  line-height:1.72;
  color:rgba(231,211,179,.6);
}

.ky-footer__base{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 24px;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:18px 0 26px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:rgba(231,211,179,.55);
}

.ky-footer__base a{
  color:rgba(231,211,179,.78);
  border-bottom:1px solid rgba(231,211,179,.3);
}
.ky-footer__base a:hover{color:#FFF9F0;border-bottom-color:var(--clay);}

.ky-footer a:focus-visible,
.ky-footer button:focus-visible{outline-color:var(--sand-light);}

/* ---------- 10. 版心与排版 ---------- */
.ky-container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.ky-section{padding-block:clamp(40px,6vw,88px);}
.ky-section--tight{padding-block:clamp(24px,3vw,44px);}

.ky-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--wine);
}
.ky-eyebrow::before{
  content:"";
  width:28px;
  height:1px;
  background:currentColor;
  flex:none;
}

.ky-display{
  font-family:var(--font-sans);
  font-size:clamp(3.2rem,8vw,7.5rem);
  font-weight:900;
  line-height:.95;
  letter-spacing:-.02em;
  color:var(--slate);
  text-wrap:balance;
}

.ky-h2{
  font-family:var(--font-sans);
  font-size:clamp(1.8rem,3vw,3rem);
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.01em;
  color:var(--slate);
}

.ky-h3{
  font-family:var(--font-sans);
  font-size:clamp(1.15rem,1.6vw,1.45rem);
  font-weight:700;
  line-height:1.4;
  letter-spacing:.01em;
  color:var(--slate);
}

.ky-lead{
  max-width:34rem;
  font-size:clamp(1rem,1.25vw,1.15rem);
  line-height:1.8;
  color:var(--stone);
}

.ky-note{
  padding-left:12px;
  border-left:2px solid var(--clay);
  font-size:13px;
  line-height:1.72;
  color:var(--stone);
}

/* ---------- 11. 面包屑 ---------- */
.ky-crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--stone);
}
.ky-crumbs a{
  color:var(--stone);
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.ky-crumbs a:hover{color:var(--wine);border-bottom-color:var(--wine);}
.ky-crumbs__sep{color:rgba(79,95,97,.45);}
.ky-crumbs [aria-current="page"]{color:var(--wine);}

/* ---------- 12. 网格 ---------- */
.ky-grid{
  display:grid;
  gap:clamp(20px,2.6vw,36px);
  grid-template-columns:minmax(0,1fr);
}

.ky-grid--asym{grid-template-columns:minmax(0,1fr);}

@media (min-width:900px){
  .ky-grid--asym{grid-template-columns:minmax(0,.9fr) minmax(0,2fr);align-items:start;}
}

/* ---------- 13. 卡片与标签 ---------- */
.ky-card{
  position:relative;
  padding:clamp(18px,2vw,26px);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  background:var(--paper);
  box-shadow:var(--shadow-card);
}

.ky-card--glass{
  background:rgba(250,245,236,.62);
  border-color:rgba(79,95,97,.24);
  box-shadow:none;
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
}

.ky-card--dark{
  background:var(--slate);
  border-color:transparent;
  color:rgba(244,231,208,.88);
}
.ky-card--dark .ky-h3,
.ky-card--dark strong{color:var(--sand-light);}

.ky-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border:1px solid rgba(79,95,97,.2);
  border-radius:999px;
  background:rgba(79,95,97,.1);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--stone);
  white-space:nowrap;
}
.ky-tag--wine{background:rgba(122,33,65,.1);border-color:rgba(122,33,65,.28);color:var(--wine);}
.ky-tag--teal{background:rgba(47,111,115,.1);border-color:rgba(47,111,115,.26);color:var(--teal);}
.ky-tag--clay{background:rgba(198,90,58,.12);border-color:rgba(198,90,58,.3);color:var(--clay);}

/* ---------- 14. 图片容器基础规则 ---------- */
.ky-media{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:16 / 9;
  border:1px solid var(--line-frame);
  border-radius:var(--radius);
  background:linear-gradient(150deg,var(--sand-light) 0%,#E3CEAC 55%,#CDBB9C 100%);
}
.ky-media--wide{aspect-ratio:21 / 9;}
.ky-media--tall{aspect-ratio:4 / 5;}
.ky-media--square{aspect-ratio:1 / 1;}

.ky-media > img,
.ky-media > svg,
.ky-media > picture,
.ky-media > video{
  width:100%;
  height:100%;
  object-fit:cover;
}

.ky-media__grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(250,245,236,.3) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(250,245,236,.3) 1px,transparent 1px);
  background-size:40px 40px;
  mix-blend-mode:soft-light;
}

.ky-media__tag{
  position:absolute;
  left:0;
  bottom:0;
  z-index:1;
  padding:6px 12px;
  background:var(--slate);
  color:var(--sand-light);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
}

/* ---------- 15. 显现动画 ---------- */
.ky-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.ky-reveal.is-visible{opacity:1;transform:none;}

/* ---------- 16. 平板 / 移动端 ---------- */
@media (min-width:1024px) and (max-width:1279.98px){
  :root{--rail-w:206px;}
}

@media (max-width:1279.98px){
  .ky-footer__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(24px,4vw,38px);
  }
  .ky-footer__brand{grid-column:1 / -1;}
}

@media (max-width:1023.98px){
  .ky-navtoggle{display:inline-flex;}

  .ky-topbar__coords{display:none;}

  .ky-rail{
    top:var(--topbar-h);
    left:0;
    right:0;
    bottom:auto;
    width:auto;
    max-height:calc(100vh - var(--topbar-h));
    padding:16px clamp(14px,4vw,26px) 22px;
    border-right:0;
    border-bottom:1px solid var(--line-frame);
    box-shadow:0 24px 44px -30px rgba(28,34,36,.75);
    transform:translateY(-10px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s var(--ease);
  }
  .ky-rail::before{display:none;}

  .ky-header[data-open="true"] .ky-rail{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .ky-nav__label{margin-bottom:10px;padding-left:0;}

  .ky-nav__link{padding:12px 10px;}
  .ky-nav__link::before{width:12px;}

  .ky-rail__foot{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:16px;
    padding-top:16px;
  }
  .ky-rail__note{
    grid-column:1 / -1;
    text-align:center;
  }

  body.ky-nav-open{overflow:hidden;}
}

@media (max-width:639.98px){
  :root{--topbar-h:58px;}

  .ky-brand__line{display:none;}
  .ky-brand__mark{width:34px;height:34px;font-size:11px;}
  .ky-brand__name{font-size:15px;}
  .ky-navtoggle__label{display:none;}

  .ky-footer__grid{grid-template-columns:minmax(0,1fr);}
  .ky-footer__base{flex-direction:column;align-items:flex-start;}
}

/* ---------- 17. 降低动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html{scroll-behavior:auto !important;}
  .ky-reveal{opacity:1;transform:none;}
  .ky-progress{transition:none;}
  .ky-skip{transition:none;}
}