/* ==========================================================================
   华体会皇马 · 共享站点样式 /assets/site.css
   设计逻辑：框架式导航 + 堆叠画板 + 奶油出版底 + 夜间球场深蓝
   ========================================================================== */

:root{
  --hth-white:#FFFFFF;
  --hth-cream:#F6F1E7;
  --hth-navy:#0A1A3A;
  --hth-midnight:#102A56;
  --hth-cyan:#00E5FF;
  --hth-lime:#A6FF3D;
  --hth-gold:#F2C14E;
  --hth-ink:#1B120C;
  --hth-orange:#FF4D2E;
  --hth-steel:#8A9BB5;
  --hth-cyan-ink:#04708A;

  --hth-shell:1280px;
  --hth-gutter:clamp(18px,4.4vw,56px);
  --hth-band-h:44px;

  --hth-radius-xl:34px;
  --hth-radius-lg:24px;
  --hth-radius-md:16px;
  --hth-radius-pill:999px;

  --hth-font-display:"Haettenschweiler","Arial Narrow","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --hth-font-body:"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --hth-font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;

  --hth-shadow-panel:0 26px 60px -32px rgba(10,26,58,.55);
  --hth-shadow-soft:0 14px 34px -22px rgba(10,26,58,.45);
  --hth-line:rgba(138,155,181,.34);
  --hth-line-dark:rgba(0,229,255,.22);
}

*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:var(--hth-font-body);
  font-size:17px;
  line-height:1.75;
  color:var(--hth-ink);
  background-color:var(--hth-cream);
  background-image:
    radial-gradient(circle at 10% -6%,rgba(0,229,255,.12),transparent 44%),
    radial-gradient(circle at 90% 2%,rgba(242,193,78,.12),transparent 42%);
  min-height:100vh;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block;}
button,input,select,textarea{font:inherit;color:inherit;}
ul,ol{list-style:none;}
a{color:var(--hth-cyan-ink);text-decoration-thickness:1px;text-underline-offset:3px;}
h1,h2,h3,h4{color:var(--hth-navy);font-weight:800;line-height:1.14;letter-spacing:-.012em;text-wrap:balance;}
p{text-wrap:pretty;}
[id]{scroll-margin-top:140px;}

:focus-visible{outline:3px solid var(--hth-cyan);outline-offset:3px;}

.hth-visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.hth-skip{
  position:fixed;left:16px;top:-80px;z-index:400;
  padding:12px 22px;border-radius:var(--hth-radius-pill);
  background:var(--hth-gold);color:var(--hth-ink);
  font-weight:800;font-size:15px;text-decoration:none;
  transition:top .22s ease;
}
.hth-skip:focus{top:14px;}

/* --------------------------------------------------------- 页头框架 ------ */
.hth-header{
  position:sticky;top:0;z-index:200;
  background:var(--hth-navy);
  color:var(--hth-white);
  box-shadow:0 18px 40px -30px rgba(0,0,0,.85);
}

.hth-band{
  background:linear-gradient(90deg,var(--hth-midnight) 0%,var(--hth-navy) 55%,#14336B 100%);
  border-bottom:1px solid var(--hth-line-dark);
}
.hth-band__inner{
  max-width:var(--hth-shell);
  margin-inline:auto;
  padding:7px var(--hth-gutter);
  display:flex;align-items:center;gap:16px;
}
.hth-band__label{
  flex:none;
  font:600 11px/1 var(--hth-font-mono);
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--hth-cyan);
}
.hth-band__list{
  display:flex;align-items:center;gap:8px;
  overflow-x:auto;scrollbar-width:none;
}
.hth-band__list::-webkit-scrollbar{display:none;}
.hth-band__link{
  display:inline-block;white-space:nowrap;
  padding:6px 15px;border-radius:var(--hth-radius-pill);
  border:1px solid rgba(0,229,255,.24);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.86);
  font-size:13.5px;text-decoration:none;
  transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.hth-band__link:hover{
  background:rgba(0,229,255,.16);
  border-color:var(--hth-cyan);
  color:#fff;
  box-shadow:inset 0 -2px 0 0 var(--hth-cyan);
}

.hth-frame{
  position:relative;
  max-width:var(--hth-shell);
  margin-inline:auto;
  padding:12px var(--hth-gutter);
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hth-frame::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--hth-cyan),var(--hth-lime));
}

.hth-brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:#fff;flex:none;}
.hth-brand__mark{
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:15px;
  background:radial-gradient(circle at 28% 18%,rgba(0,229,255,.55),transparent 68%),var(--hth-midnight);
  border:1px solid rgba(0,229,255,.42);
  color:var(--hth-gold);
  font:700 16px/1 var(--hth-font-mono);
  transition:transform .35s cubic-bezier(.4,1.4,.5,1),box-shadow .35s ease;
}
.hth-brand:hover .hth-brand__mark{
  transform:rotate(-8deg) scale(1.04);
  box-shadow:0 0 0 4px rgba(242,193,78,.16);
}
.hth-brand__text{display:grid;gap:2px;}
.hth-brand__name{
  font:800 19px/1.05 var(--hth-font-display);
  letter-spacing:.05em;color:#fff;
}
.hth-brand__sub{
  font:600 10.5px/1 var(--hth-font-mono);
  letter-spacing:.22em;color:var(--hth-steel);
}

.hth-navtoggle{
  display:none;align-items:center;gap:10px;
  padding:9px 16px;border-radius:var(--hth-radius-pill);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(0,229,255,.4);
  color:#fff;cursor:pointer;
  font:700 13px/1 var(--hth-font-body);
  transition:background .25s ease;
}
.hth-navtoggle:hover{background:rgba(0,229,255,.14);}
.hth-navtoggle__bars{display:grid;gap:4px;width:18px;}
.hth-navtoggle__bars span{
  display:block;height:2px;border-radius:2px;background:var(--hth-cyan);
  transition:transform .3s ease,opacity .3s ease;
}
.hth-navtoggle[aria-expanded="true"] .hth-navtoggle__bars span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hth-navtoggle[aria-expanded="true"] .hth-navtoggle__bars span:nth-child(2){opacity:0;}
.hth-navtoggle[aria-expanded="true"] .hth-navtoggle__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.hth-nav{display:flex;align-items:center;gap:6px;}
.hth-nav__list{display:flex;align-items:center;gap:2px;}
.hth-nav__link{
  display:inline-block;
  padding:10px 14px;border-radius:12px;
  color:rgba(255,255,255,.84);font-size:15px;font-weight:600;
  text-decoration:none;
  transition:background .25s ease,color .25s ease;
}
.hth-nav__link:hover{background:rgba(0,229,255,.14);color:#fff;}
.hth-nav__link[aria-current="page"]{
  background:var(--hth-gold);color:var(--hth-navy);font-weight:800;
}

.hth-nav__meta{
  align-self:center;
  margin:0 6px 0 10px;padding-left:12px;
  border-left:1px solid var(--hth-line);
  writing-mode:vertical-rl;
  font:600 10px/1 var(--hth-font-mono);
  letter-spacing:.26em;color:var(--hth-steel);white-space:nowrap;
}

.hth-cta{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:11px 20px;border-radius:var(--hth-radius-pill);
  background:var(--hth-gold);color:var(--hth-ink);
  font-size:14px;font-weight:800;letter-spacing:.02em;text-decoration:none;
  border:1px solid rgba(27,18,12,.18);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.hth-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px -14px rgba(242,193,78,.95);
}
.hth-cta:active{transform:translateY(0);}

.hth-progress{height:3px;background:rgba(255,255,255,.08);}
.hth-progress__bar{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--hth-cyan),var(--hth-lime));
  transition:width .12s linear;
}

/* --------------------------------------------------------- 通用容器 ------ */
.hth-shell{
  width:100%;max-width:var(--hth-shell);
  margin-inline:auto;
  padding-inline:var(--hth-gutter);
}

.hth-section{padding:clamp(46px,7vw,92px) 0;}
.hth-section--dark{
  background:var(--hth-navy);
  color:rgba(255,255,255,.84);
  border-radius:clamp(24px,4vw,42px);
}
.hth-section--dark h2,
.hth-section--dark h3,
.hth-section--dark h4,
.hth-section--dark .hth-title{color:#fff;}
.hth-section--dark .hth-lede{color:rgba(255,255,255,.72);}

.hth-stack{display:grid;gap:clamp(20px,3vw,38px);}

.hth-grid{display:grid;gap:clamp(18px,2.4vw,28px);}
.hth-grid--2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr));}
.hth-grid--3{grid-template-columns:repeat(auto-fit,minmax(228px,1fr));}

.hth-split{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:clamp(22px,3.4vw,52px);
  align-items:center;
}

/* --------------------------------------------------------- 文字组件 ------ */
.hth-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font:600 12px/1 var(--hth-font-mono);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--hth-navy);
  margin-bottom:16px;
}
.hth-eyebrow::before{
  content:"";width:24px;height:2px;border-radius:2px;
  background:var(--hth-cyan);
}
.hth-section--dark .hth-eyebrow{color:var(--hth-cyan);}

.hth-title{
  font-family:var(--hth-font-display);
  font-weight:900;
  font-size:clamp(30px,5.4vw,62px);
  line-height:1.04;
  letter-spacing:.005em;
  color:var(--hth-navy);
}
.hth-lede{
  max-width:64ch;
  margin-top:18px;
  font-size:clamp(16px,1.5vw,18.5px);
  line-height:1.8;
  color:#3A4763;
}

.hth-annot{
  writing-mode:vertical-rl;
  font:600 11px/1 var(--hth-font-mono);
  letter-spacing:.3em;color:var(--hth-steel);
}

.hth-rule{
  height:1px;border:0;
  background:linear-gradient(90deg,var(--hth-navy) 0%,var(--hth-line) 42%,transparent 100%);
  margin:clamp(24px,3.6vw,40px) 0;
}

.hth-breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:20px 0 0;
  font:600 12px/1.4 var(--hth-font-mono);
  letter-spacing:.08em;color:var(--hth-steel);
}
.hth-breadcrumb a{
  color:var(--hth-navy);text-decoration:none;
  border-bottom:1px solid rgba(10,26,58,.28);
}
.hth-breadcrumb a:hover{border-bottom-color:var(--hth-cyan);}
.hth-breadcrumb span[aria-hidden="true"]{color:var(--hth-steel);}

/* --------------------------------------------------------- 面板与标签 ---- */
.hth-panel{
  background:var(--hth-white);
  border:1px solid rgba(10,26,58,.1);
  border-radius:var(--hth-radius-lg);
  padding:clamp(20px,2.6vw,30px);
  box-shadow:var(--hth-shadow-soft);
}
.hth-panel--navy{
  background:linear-gradient(158deg,var(--hth-midnight),var(--hth-navy));
  border-color:var(--hth-line-dark);
  color:rgba(255,255,255,.86);
  box-shadow:var(--hth-shadow-panel);
}
.hth-panel--navy h3,
.hth-panel--navy h4{color:#fff;}
.hth-panel--cream{
  background:var(--hth-cream);
  border-color:rgba(27,18,12,.14);
}

.hth-tag{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 13px;border-radius:var(--hth-radius-pill);
  background:rgba(0,229,255,.14);
  border:1px solid rgba(0,229,255,.44);
  color:var(--hth-navy);
  font:600 12px/1.2 var(--hth-font-mono);letter-spacing:.06em;
}
.hth-tag--gold{
  background:rgba(242,193,78,.22);
  border-color:rgba(242,193,78,.72);
  color:#6B4A05;
}
.hth-tag--live{
  background:rgba(255,77,46,.13);
  border-color:rgba(255,77,46,.55);
  color:#C9331B;
}
.hth-tag--live::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--hth-orange);
  animation:hth-breath 1.9s ease-in-out infinite;
}
.hth-section--dark .hth-tag,
.hth-panel--navy .hth-tag{color:#DFF9FF;}
.hth-section--dark .hth-tag--gold,
.hth-panel--navy .hth-tag--gold{color:var(--hth-gold);}

@keyframes hth-breath{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,77,46,.5);}
  50%{opacity:.6;box-shadow:0 0 0 7px rgba(255,77,46,0);}
}

/* --------------------------------------------------------- 数据组件 ------ */
.hth-stat{display:grid;gap:8px;}
.hth-stat__value{
  font:700 clamp(26px,4vw,42px)/1 var(--hth-font-mono);
  color:var(--hth-navy);letter-spacing:-.02em;
}
.hth-stat__label{
  font:600 11px/1.4 var(--hth-font-mono);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--hth-steel);
}
.hth-section--dark .hth-stat__value,
.hth-panel--navy .hth-stat__value{color:var(--hth-lime);}
.hth-section--dark .hth-stat__label,
.hth-panel--navy .hth-stat__label{color:rgba(255,255,255,.55);}

/* --------------------------------------------------------- 图片容器 ------ */
.hth-media{
  position:relative;overflow:hidden;
  border-radius:var(--hth-radius-xl);
  background:linear-gradient(150deg,var(--hth-midnight),var(--hth-navy));
  aspect-ratio:16/9;
  border:1px solid rgba(10,26,58,.12);
}
.hth-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.7,.28,1);
}
.hth-media:hover img{transform:scale(1.035);}
.hth-media--tall{aspect-ratio:4/5;}
.hth-media--square{aspect-ratio:1/1;}
.hth-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,229,255,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,255,.13) 1px,transparent 1px);
  background-size:46px 46px;
  opacity:.55;
}
.hth-media__caption{
  position:absolute;left:14px;bottom:14px;z-index:2;
  padding:8px 15px;border-radius:var(--hth-radius-pill);
  background:rgba(10,26,58,.78);
  border:1px solid var(--hth-line-dark);
  color:#fff;
  font:600 12px/1.2 var(--hth-font-mono);letter-spacing:.08em;
  backdrop-filter:blur(6px);
}

/* --------------------------------------------------------- 按钮 --------- */
.hth-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:var(--hth-radius-pill);
  border:1px solid transparent;
  font-size:15px;font-weight:800;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease;
}
.hth-btn:hover{transform:translateY(-2px);}
.hth-btn:active{transform:translateY(0);}
.hth-btn--gold{
  background:var(--hth-gold);color:var(--hth-ink);
  box-shadow:0 14px 30px -18px rgba(242,193,78,.95);
}
.hth-btn--cyan{
  background:var(--hth-cyan);color:var(--hth-navy);
  box-shadow:0 14px 30px -18px rgba(0,229,255,.9);
}
.hth-btn--ghost{
  background:transparent;color:var(--hth-navy);
  border-color:rgba(10,26,58,.28);
}
.hth-btn--ghost:hover{background:var(--hth-white);border-color:var(--hth-navy);}
.hth-section--dark .hth-btn--ghost,
.hth-panel--navy .hth-btn--ghost{
  color:#fff;border-color:rgba(255,255,255,.34);
}
.hth-section--dark .hth-btn--ghost:hover,
.hth-panel--navy .hth-btn--ghost:hover{
  background:rgba(0,229,255,.14);border-color:var(--hth-cyan);
}

/* --------------------------------------------------------- 滚动显现 ------ */
[data-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.7,.28,1);
  will-change:opacity,transform;
}
[data-reveal].is-visible{opacity:1;transform:none;}

/* --------------------------------------------------------- 页脚框架 ------ */
.hth-footer{
  position:relative;
  margin-top:clamp(48px,8vw,100px);
  background:var(--hth-navy);
  color:rgba(255,255,255,.76);
  overflow:hidden;
  border-top:4px solid var(--hth-midnight);
}
.hth-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(138,155,181,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(138,155,181,.13) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 82%);
}
.hth-footer__inner{
  position:relative;z-index:1;
  max-width:var(--hth-shell);
  margin-inline:auto;
  padding:clamp(38px,6vw,68px) var(--hth-gutter) 28px;
}
.hth-footer__grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1.2fr;
  gap:clamp(24px,4vw,52px);
  align-items:start;
}
.hth-footer__panel{
  background:linear-gradient(158deg,rgba(16,42,86,.94),rgba(10,26,58,.62));
  border:1px solid var(--hth-line-dark);
  border-radius:var(--hth-radius-xl);
  padding:clamp(22px,2.6vw,30px);
  box-shadow:var(--hth-shadow-panel);
}
.hth-footer__label{
  font:600 11px/1 var(--hth-font-mono);
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--hth-cyan);
  margin-bottom:14px;
}
.hth-footer__brand{
  font:800 clamp(20px,2.6vw,26px)/1.25 var(--hth-font-display);
  letter-spacing:.03em;color:#fff;
  margin-bottom:12px;
}
.hth-footer__note{
  font-size:13.5px;line-height:1.8;
  color:rgba(255,255,255,.62);
}
.hth-footer__nav{display:block;}
.hth-footer__links{display:grid;gap:10px;margin:0;padding:0;}
.hth-footer__link{
  display:inline-flex;align-items:center;gap:12px;
  padding:3px 0;
  color:#fff;font-size:15.5px;font-weight:600;text-decoration:none;
  transition:color .25s ease;
}
.hth-footer__link::before{
  content:"";width:14px;height:2px;border-radius:2px;
  background:var(--hth-cyan);
  transition:width .28s ease,background .28s ease;
}
.hth-footer__link:hover{color:var(--hth-lime);}
.hth-footer__link:hover::before{width:26px;background:var(--hth-lime);}
.hth-footer__contact{display:grid;gap:10px;align-content:start;}
.hth-footer__value{
  font:600 14px/1.5 var(--hth-font-mono);
  letter-spacing:.03em;color:#fff;
  word-break:break-word;
}
.hth-footer__value--text{
  font-family:var(--hth-font-body);
  font-weight:500;font-size:14.5px;
  color:rgba(255,255,255,.72);
}
.hth-footer__legal{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 26px;
  margin-top:clamp(30px,4vw,48px);
  padding-top:20px;
  border-top:1px solid rgba(138,155,181,.26);
  font-size:13px;
}
.hth-footer__copy{color:rgba(255,255,255,.56);}
.hth-footer__icp{
  font-family:var(--hth-font-mono);
  letter-spacing:.08em;
  color:var(--hth-steel);
}

/* --------------------------------------------------------- 响应式 ------- */
@media (max-width:1100px){
  .hth-nav__meta{display:none;}
  .hth-nav__link{padding:10px 11px;font-size:14.5px;}
}

@media (max-width:960px){
  .hth-band__inner{gap:10px;}
  .hth-band__label{display:none;}
  .hth-band__list{padding-bottom:2px;}

  .hth-frame{flex-wrap:wrap;gap:12px;}
  .hth-navtoggle{display:inline-flex;}

  .hth-nav{
    position:absolute;left:0;right:0;top:100%;
    display:none;
    flex-direction:column;align-items:stretch;gap:14px;
    padding:18px var(--hth-gutter) 26px;
    background:var(--hth-navy);
    border-bottom:1px solid var(--hth-line-dark);
    box-shadow:0 34px 54px -32px rgba(0,0,0,.85);
    max-height:82vh;overflow-y:auto;
  }
  .hth-nav[data-open="true"]{display:flex;}
  .hth-nav__list{flex-direction:column;align-items:stretch;gap:6px;}
  .hth-nav__link{
    padding:13px 16px;font-size:16.5px;border-radius:14px;
    border:1px solid rgba(138,155,181,.22);
  }
  .hth-nav__meta{
    display:block;writing-mode:horizontal-tb;
    border-left:0;border-top:1px solid var(--hth-line);
    padding:10px 0 0;margin:0;
    letter-spacing:.22em;
  }
  .hth-cta{align-self:flex-start;}

  .hth-split{grid-template-columns:1fr;}
  .hth-footer__grid{grid-template-columns:1fr;}
}

@media (max-width:640px){
  body{font-size:16px;}
  :root{--hth-radius-xl:26px;--hth-radius-lg:20px;}
  .hth-brand__sub{display:none;}
  .hth-brand__name{font-size:17px;}
  .hth-brand__mark{width:40px;height:40px;border-radius:13px;}
  .hth-tag{font-size:11.5px;padding:5px 11px;}
  .hth-breadcrumb{font-size:11.5px;}
  .hth-media__caption{left:10px;bottom:10px;font-size:11px;padding:6px 12px;}
  .hth-btn{width:100%;}
}

@media (min-width:961px){
  .hth-nav{position:static;}
}

/* --------------------------------------------------- 动效与可访问降级 --- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  [data-reveal]{opacity:1!important;transform:none!important;}
  .hth-media:hover img{transform:none;}
  .hth-cta:hover,.hth-btn:hover{transform:none;}
}