/* ==========================================================================
   米乐赛场 /assets/site.css
   共享外壳：reset、变量、中文排版、头部、页脚、按钮、面包屑、网格、基础组件
   ========================================================================== */

/* ---------- 1. 变量 ---------- */
:root{
  /* 品牌色 */
  --ink:#08251F;
  --ink-soft:#0E2F27;
  --moss:#2E5B47;
  --signal:#FF5A1F;
  --ember:#FF9E5E;
  --steel:#C7D0CA;
  --paper:#F5F0E4;
  --slate:#5C665F;
  --clay:#A7583D;

  /* 派生 */
  --line-dark:rgba(199,208,202,.20);
  --line-dark-strong:rgba(199,208,202,.36);
  --line-light:rgba(92,102,95,.24);
  --signal-wash:rgba(255,90,31,.14);
  --moss-wash:rgba(46,91,71,.10);
  --glass:rgba(8,37,31,.94);

  /* 字体 */
  --font-display:"Barlow Condensed","Oswald","Noto Sans SC","Source Han Sans SC","PingFang SC","Arial Narrow",sans-serif;
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --font-editorial:"Noto Serif SC","Songti SC","SimSun",Georgia,serif;
  --font-mono:"IBM Plex Mono","Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* 布局 */
  --frame-max:1280px;
  --gutter:clamp(16px,3.2vw,36px);
  --radius:2px;

  /* 动效 */
  --dur-fast:140ms;
  --dur-base:200ms;
  --dur-slow:260ms;
  --ease:cubic-bezier(.3,.7,.4,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:118px;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.8;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
table{ border-collapse:collapse; width:100%; }

/* ---------- 3. 中文排版与标题 ---------- */
h1,h2,h3,h4{ font-weight:700; line-height:1.18; letter-spacing:.01em; }
h1{
  font-family:var(--font-display);
  font-size:clamp(34px,5.6vw,72px);
  line-height:1.03;
  letter-spacing:.02em;
}
h2{ font-size:clamp(24px,3vw,36px); }
h3{ font-size:clamp(18px,1.9vw,22px); }
h4{ font-size:1.02rem; }

strong{ font-weight:700; }
small{ font-size:.82em; }

.num,
[data-num]{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}

/* ---------- 4. 焦点与可访问性 ---------- */
:where(a,button,[tabindex],summary,input,select,textarea):focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
  border-radius:var(--radius);
}

.skip-link{
  position:fixed;
  inset-block-start:0;
  inset-inline-start:0;
  z-index:999;
  display:inline-block;
  padding:10px 18px;
  background:var(--signal);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.06em;
  transform:translateY(-130%);
  transition:transform var(--dur-base) var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible{ transform:translateY(0); outline-offset:-3px; }

/* ==========================================================================
   5. 头部：框架式导航
   ========================================================================== */
.site-header{
  position:sticky;
  inset-block-start:0;
  z-index:100;
  background:var(--glass);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  backdrop-filter:blur(12px) saturate(120%);
  color:var(--paper);
  border-bottom:1px solid var(--line-dark);
  isolation:isolate;
}

/* 顶栏 */
.header-bar{
  display:flex;
  align-items:center;
  gap:clamp(12px,2vw,28px);
  max-width:var(--frame-max);
  margin:0 auto;
  padding:11px var(--gutter);
  border-bottom:1px solid var(--line-dark);
}

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

.brand__mark{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:0 0 auto;
  background:var(--signal);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:800;
  letter-spacing:.04em;
  line-height:1;
  clip-path:polygon(0 0, 100% 0, 100% 68%, 68% 100%, 0 100%);
  transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.brand:hover .brand__mark{ background:var(--ember); }

.brand__text{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.brand__name{
  font-family:var(--font-display);
  font-size:1.14rem;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.1;
  color:var(--paper);
}
.brand__tag{
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.08em;
  line-height:1.3;
  color:var(--steel);
  white-space:nowrap;
}

/* 常用入口 */
.header-utility{
  display:flex;
  align-items:center;
  gap:10px;
  margin-inline-start:auto;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  color:rgba(199,208,202,.7);
}
.header-utility__label{ white-space:nowrap; }
.header-utility__link{
  font-family:var(--font-body);
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--paper);
  padding-block-end:2px;
  border-bottom:1px solid var(--signal);
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.header-utility__link:hover{
  color:var(--signal);
  border-bottom-color:var(--ember);
}

/* 移动菜单按钮 */
.nav-toggle{
  display:none;
  align-items:center;
  gap:9px;
  padding:9px 14px;
  border:1px solid var(--line-dark-strong);
  border-radius:var(--radius);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  transition:border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease);
}
.nav-toggle:hover,
.nav-toggle:focus-visible{
  border-color:var(--signal);
  color:var(--signal);
}
.nav-toggle__bars{
  display:inline-flex;
  flex-direction:column;
  gap:4px;
  width:16px;
}
.nav-toggle__bars span{
  display:block;
  height:2px;
  background:currentColor;
  transition:transform var(--dur-slow) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child{
  transform:translateY(3px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child{
  transform:translateY(-3px) rotate(-45deg);
}
.nav-toggle__text{ line-height:1; }

/* 主导航 */
.site-nav{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:12px;
  max-width:var(--frame-max);
  margin:0 auto;
  padding:0 var(--gutter);
}
.site-nav__list{
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
}
.site-nav__item{
  position:relative;
  display:flex;
}
.site-nav__item + .site-nav__item{ border-inline-start:1px solid var(--line-dark); }

.site-nav__link{
  position:relative;
  display:flex;
  align-items:center;
  padding:12px clamp(12px,1.6vw,20px);
  font-size:.92rem;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--steel);
  transition:color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.site-nav__link::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  width:2px;
  background:var(--signal);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease);
  opacity:.5;
}
.site-nav__link:hover{
  color:var(--paper);
  background:rgba(46,91,71,.45);
}
.site-nav__link:hover::before{ transform:scaleY(1); opacity:.75; }
.site-nav__link[aria-current="page"]{
  color:var(--paper);
  font-weight:600;
  background:rgba(46,91,71,.55);
}
.site-nav__link[aria-current="page"]::before{
  transform:scaleY(1);
  opacity:1;
  width:3px;
}

.site-nav__foot{
  display:none;
  align-items:center;
  gap:10px;
  padding-block:10px;
}

/* 滚动进度光带 */
.scroll-meter{
  position:absolute;
  inset-inline:0;
  inset-block-end:-1px;
  height:2px;
  background:transparent;
  pointer-events:none;
}
.scroll-meter__fill{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg, var(--signal), var(--ember));
  transition:width 100ms linear;
}

/* ==========================================================================
   6. 页脚
   ========================================================================== */
.site-footer{
  position:relative;
  margin-block-start:clamp(48px,7vw,104px);
  padding-block:clamp(36px,5vw,64px) clamp(20px,2.4vw,28px);
  background:
    linear-gradient(180deg, rgba(46,91,71,.55), rgba(8,37,31,0) 46%),
    var(--ink);
  color:var(--steel);
  border-top:1px solid var(--line-dark);
}
.site-footer::before{
  content:"";
  position:absolute;
  inset-block-start:-1px;
  inset-inline-start:0;
  width:min(38%,420px);
  height:3px;
  background:var(--signal);
}

.footer-inner{
  max-width:var(--frame-max);
  margin:0 auto;
  padding-inline:var(--gutter);
}

.footer-top{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);
  padding-block-end:clamp(26px,4vw,44px);
  border-bottom:1px solid var(--line-dark);
}

.footer-wordmark{
  font-family:var(--font-display);
  font-size:clamp(28px,4vw,44px);
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
  color:var(--paper);
  margin-block-end:16px;
}
.footer-about{
  max-width:44ch;
  font-size:.95rem;
  line-height:1.85;
  color:var(--steel);
}
.footer-service{
  margin-block-start:14px;
  max-width:46ch;
  font-size:.82rem;
  line-height:1.9;
  color:rgba(199,208,202,.66);
}

.footer-groups{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,40px);
  align-content:start;
}
.footer-group__title{
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--ember);
  margin-block-end:14px;
  padding-block-end:8px;
  border-bottom:1px solid var(--line-dark);
}
.footer-links{ display:grid; gap:9px; }

.footer-link{
  display:inline-block;
  font-size:.92rem;
  color:var(--steel);
  border-bottom:1px solid transparent;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.footer-link:hover,
.footer-link:focus-visible{
  color:var(--paper);
  border-bottom-color:var(--signal);
}

.footer-contact{
  display:flex;
  flex-wrap:wrap;
  gap:8px clamp(18px,3vw,42px);
  padding-block:clamp(16px,2.4vw,26px);
  border-bottom:1px solid var(--line-dark);
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.03em;
  color:var(--steel);
}
.footer-contact__line{ margin:0; }

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 24px;
  padding-block-start:clamp(16px,2.4vw,22px);
}
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 18px;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  color:rgba(199,208,202,.7);
}
.footer-legal__icp{ color:var(--ember); }
.footer-legal__links{
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  font-size:.82rem;
}

/* ==========================================================================
   7. 通用按钮
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:12px 22px;
  border:1px solid transparent;
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-size:.94rem;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.2;
  text-align:center;
  transition:background-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn--signal{
  background:var(--signal);
  color:var(--ink);
}
.btn--signal:hover{ background:var(--ember); }

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

.btn--ghost{
  background:transparent;
  border-color:var(--line-dark-strong);
  color:var(--paper);
}
.btn--ghost:hover{
  border-color:var(--signal);
  color:var(--signal);
}

.btn--sm{
  padding:8px 16px;
  font-size:.82rem;
}

/* ==========================================================================
   8. 版面容器与网格
   ========================================================================== */
.shell{
  width:100%;
  max-width:var(--frame-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.prose{
  max-width:720px;
}

.lede{
  font-size:clamp(17px,1.5vw,20px);
  line-height:1.85;
  color:var(--slate);
}

.eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.2em;
  color:var(--clay);
}

.section-no{
  display:block;
  font-family:var(--font-mono);
  font-size:clamp(30px,4.4vw,56px);
  font-weight:500;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--clay);
}

.grid-12{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(16px,2.4vw,32px);
}
.col-4{ grid-column:span 4; }
.col-5{ grid-column:span 5; }
.col-6{ grid-column:span 6; }
.col-7{ grid-column:span 7; }
.col-8{ grid-column:span 8; }
.col-12{ grid-column:span 12; }

/* ==========================================================================
   9. 基础组件
   ========================================================================== */
.card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line-light);
  border-radius:var(--radius);
  padding:clamp(18px,2.4vw,28px);
}
.card--panel{
  background:var(--ink);
  border-color:transparent;
  color:var(--steel);
}
.card--panel h2,
.card--panel h3,
.card--panel h4{ color:var(--paper); }

.tag{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  padding:3px 9px;
  background:var(--signal-wash);
  border-inline-start:2px solid var(--signal);
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  line-height:1.6;
  color:var(--clay);
}

/* 面包屑 */
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55em;
  padding-block:18px;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--slate);
}
.breadcrumbs__item{ display:flex; align-items:center; gap:.55em; }
.breadcrumbs__link{
  color:var(--slate);
  border-bottom:1px solid transparent;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.breadcrumbs__link:hover{
  color:var(--signal);
  border-bottom-color:var(--signal);
}
.breadcrumbs__sep{ color:var(--steel); }
.breadcrumbs--onDark{ color:rgba(199,208,202,.7); }
.breadcrumbs--onDark .breadcrumbs__link{ color:var(--steel); }
.breadcrumbs--onDark .breadcrumbs__link:hover{ color:var(--ember); }
.breadcrumbs--onDark .breadcrumbs__sep{ color:rgba(199,208,202,.42); }

/* 响应式图片容器（页面阶段放置图片占位） */
.media-frame{
  position:relative;
  display:block;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(46,91,71,.95), rgba(8,37,31,.95)),
    var(--moss);
  border-radius:var(--radius);
  aspect-ratio:16/9;
}
.media-frame--wide{ aspect-ratio:21/9; }
.media-frame--tall{ aspect-ratio:4/5; }
.media-frame--square{ aspect-ratio:1/1; }

.media-frame__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.media-frame__caption{
  position:absolute;
  inset-inline-start:0;
  inset-block-end:0;
  max-width:min(100%,420px);
  padding:8px 12px;
  background:rgba(8,37,31,.82);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.08em;
  line-height:1.6;
}

/* ==========================================================================
   10. 响应式：平板与手机
   ========================================================================== */
@media (max-width:1024px){
  :root{ --gutter:clamp(16px,4vw,28px); }
  .footer-top{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:860px){
  html{ scroll-padding-top:96px; }

  .nav-toggle{
    display:inline-flex;
    margin-inline-start:auto;
  }
  .header-utility{ display:none; }

  .site-nav{
    display:none;
    padding:0;
    border-top:1px solid var(--line-dark);
  }
  .site-nav[data-open="true"]{
    display:block;
    animation:nav-drop var(--dur-slow) var(--ease) both;
  }
  .site-nav__list{
    flex-direction:column;
    align-items:stretch;
    flex-wrap:nowrap;
  }
  .site-nav__item{ display:block; }
  .site-nav__item + .site-nav__item{
    border-inline-start:0;
    border-block-start:1px solid var(--line-dark);
  }
  .site-nav__link{
    width:100%;
    padding:15px var(--gutter);
    font-size:1rem;
  }
  .site-nav__link::before{ width:3px; opacity:0; }
  .site-nav__link:hover::before,
  .site-nav__link[aria-current="page"]::before{ opacity:1; transform:scaleY(1); }

  .site-nav__foot{
    display:flex;
    padding:14px var(--gutter) 18px;
    border-block-start:1px solid var(--line-dark);
  }

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

@media (max-width:720px){
  .grid-12{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .col-4,.col-5,.col-6,.col-7,.col-8{ grid-column:span 6; }
  .col-12{ grid-column:span 6; }

  .footer-groups{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-contact{ font-size:.76rem; }
}

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

  .brand__mark{ width:36px; height:36px; font-size:.92rem; }
  .brand__name{ font-size:1.04rem; }
  .brand__tag{ font-size:.6rem; }
  .nav-toggle__text{ display:none; }

  .grid-12{ grid-template-columns:minmax(0,1fr); }
  .col-4,.col-5,.col-6,.col-7,.col-8,.col-12{ grid-column:1/-1; }

  .footer-groups{ grid-template-columns:minmax(0,1fr); }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-legal__links{ font-size:.8rem; }
  .media-frame--wide{ aspect-ratio:16/9; }
}

/* ==========================================================================
   11. 减少动态偏好
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .btn:hover,
  .site-nav__link:hover{ transform:none; }
}