/* =========================================================
   威廉赛场 · /assets/site.css
   共享外壳样式：reset / tokens / 排版 / 头部 / 页脚 / 基础组件
   ========================================================= */

/* ---------- 1. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,blockquote,dl,dt,dd{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
input,select,textarea{font:inherit;color:inherit}
hr{border:0}

/* ---------- 2. TOKENS ---------- */
:root{
  --sand:#F3EADA;
  --sand-2:#E6DAC5;
  --ink:#17120C;
  --green:#0D2A21;
  --green-2:#15473B;
  --cyan:#3DF2C0;
  --cyan-mist:#BFF7E6;
  --orange:#FF6B2C;
  --rust:#C9431F;
  --slate:#5E7A6E;
  --rule:#CFC3AE;

  --font-display:"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  --font-data:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono","Courier New",monospace;

  --gutter:clamp(18px,4.2vw,56px);
  --measure:38ch;
  --shell-max:1460px;
  --rail:272px;
  --t-fast:120ms;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 3. BASE ---------- */
body{
  background-color:var(--sand);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.8;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(90deg,var(--rule) 1px,transparent 1px),
    linear-gradient(180deg,var(--rule) 1px,transparent 1px);
  background-size:132px 132px;
  opacity:.16;
}
main{position:relative;z-index:1;display:block}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.06;letter-spacing:-.02em}
h1{font-size:clamp(38px,7vw,104px)}
h2{font-size:clamp(28px,4.2vw,54px)}
h3{font-size:clamp(21px,2.2vw,28px);line-height:1.28;letter-spacing:-.01em}
h4{font-size:clamp(18px,1.6vw,20px);line-height:1.35;letter-spacing:0}

.mono,.u-mono,[data-mono]{
  font-family:var(--font-data);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:.02em;
}

:focus-visible{outline:2px solid var(--rust);outline-offset:3px}
.site-foot :focus-visible,
.site-nav :focus-visible,
.nav-toggle:focus-visible,
.skip-link:focus-visible,
.section--dark :focus-visible,
.panel--dark :focus-visible{outline-color:var(--cyan)}

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

/* ---------- 4. LAYOUT PRIMITIVES ---------- */
.page-shell{
  width:100%;max-width:var(--shell-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
@media (min-width:1024px){
  .page-shell{padding-right:calc(var(--gutter) + var(--rail))}
}

.section{position:relative;padding-block:clamp(52px,8vh,104px)}
.section--lead{padding-top:clamp(118px,17vh,196px)}
.section--tight{padding-block:clamp(28px,4vh,52px)}
.section--paper{background:var(--sand-2)}
.section--dark{background:var(--green);color:var(--sand)}
.section--dark h2,.section--dark h3,.section--dark h4{color:var(--sand)}
.section--dark p{color:rgba(243,234,218,.82)}
.section--dark a{color:var(--cyan)}

.section-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:12px 24px;padding-bottom:14px;
  border-bottom:1px solid var(--rule);
  margin-bottom:clamp(22px,3.6vh,44px);
}
.section-head__meta{display:flex;align-items:baseline;gap:12px}
.section-num{font-family:var(--font-data);font-size:12px;letter-spacing:.18em;color:var(--slate);white-space:nowrap}
.eyebrow{font-family:var(--font-data);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.section--dark .section-num,.section--dark .eyebrow{color:var(--cyan);opacity:.86}

.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.7;max-width:var(--measure)}
.prose{max-width:var(--measure)}
.prose p+p{margin-top:1em}
.prose a{color:var(--rust);border-bottom:1px solid rgba(201,67,31,.45)}
.prose a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.section--dark .prose a{color:var(--cyan)}

/* ---------- 5. GRID ---------- */
.grid{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(4,minmax(0,1fr))}
@media (min-width:768px){.grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (min-width:1024px){.grid{grid-template-columns:repeat(12,minmax(0,1fr))}}

@media (min-width:768px) and (max-width:1023px){
  .col-md-4{grid-column:span 4}
  .col-md-8{grid-column:span 8}
}
@media (min-width:1024px){
  .col-3{grid-column:span 3}
  .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-9{grid-column:span 9}
  .col-12{grid-column:span 12}
  .col-start-4{grid-column-start:4}
  .col-start-5{grid-column-start:5}
  .col-start-7{grid-column-start:7}
}

/* ---------- 6. HEADER ---------- */
.skip-link{
  position:fixed;left:14px;top:-80px;z-index:120;
  padding:11px 18px;
  background:var(--green);color:var(--cyan);
  border:1px solid var(--cyan);
  font-family:var(--font-data);font-size:13px;letter-spacing:.08em;line-height:1.4;
  transition:top var(--t-fast) var(--ease);
}
.skip-link:focus{top:14px}

.site-head{position:fixed;inset:0;z-index:60;pointer-events:none}
.head-brand,.nav-toggle,.site-nav{pointer-events:auto}

.head-brand{
  position:absolute;top:18px;left:var(--gutter);
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:8px 14px 8px 0;
  transition:background-color var(--t-fast) var(--ease),padding var(--t-fast) var(--ease);
}
.brand-lockup{display:inline-flex;align-items:center;gap:9px}
.brand-mark{width:11px;height:11px;flex:0 0 auto;background:var(--orange)}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:.12em;line-height:1;color:var(--ink)}
.brand-lockup:hover .brand-name{color:var(--rust)}
.brand-domain{font-family:var(--font-data);font-size:11px;line-height:1.2;letter-spacing:.08em;color:var(--slate)}
.brand-rule{display:block;width:128px;height:3px;background:linear-gradient(90deg,var(--green) 0 74%,var(--cyan) 74% 100%)}

.site-head[data-stuck] .head-brand{
  background:var(--green);
  padding:10px 16px 10px 14px;
  box-shadow:inset 0 -2px 0 var(--cyan);
}
.site-head[data-stuck] .brand-name{color:var(--sand)}
.site-head[data-stuck] .brand-lockup:hover .brand-name{color:var(--cyan)}
.site-head[data-stuck] .brand-domain{color:var(--cyan-mist);opacity:.8}
.site-head[data-stuck] .brand-mark{background:var(--cyan)}
.site-head[data-stuck] .brand-rule{background:linear-gradient(90deg,rgba(243,234,218,.32) 0 74%,var(--cyan) 74% 100%)}

.nav-toggle{
  position:absolute;top:18px;right:var(--gutter);z-index:3;
  display:none;align-items:center;gap:10px;
  padding:11px 14px;
  background:var(--green);color:var(--sand);
  border:1px solid var(--green-2);
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.nav-toggle-bar{width:20px;height:2px;background:var(--cyan);box-shadow:0 6px 0 var(--cyan),0 -6px 0 var(--cyan)}
.nav-toggle-text{font-family:var(--font-data);font-size:12px;letter-spacing:.16em;line-height:1}
.nav-toggle:hover{background:var(--green-2);color:var(--cyan)}
.nav-toggle[aria-expanded="true"]{background:var(--cyan);color:var(--green);border-color:var(--cyan)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar{background:var(--green);box-shadow:0 6px 0 var(--green),0 -6px 0 var(--green)}

.site-nav{
  position:absolute;top:50%;right:calc(var(--gutter) + 12px);
  transform:translateY(-50%);
  width:236px;
  background:rgba(230,218,197,.96);
  border:1px solid var(--ink);
  border-top:3px solid var(--green);
  padding:14px 14px 12px;
  transition:opacity 200ms var(--ease),visibility 200ms var(--ease);
}
.nav-head{
  display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:8px;margin-bottom:6px;
  border-bottom:1px solid var(--rule);
  font-family:var(--font-data);font-size:11px;letter-spacing:.2em;color:var(--slate);
}
.nav-head-num{color:var(--rust)}
.nav-list{display:flex;flex-direction:column}
.nav-item+.nav-item{border-top:1px solid rgba(207,195,174,.7)}
.nav-link{
  display:flex;align-items:baseline;gap:10px;
  padding:9px 8px;
  border-left:3px solid transparent;
  color:var(--ink);font-size:15px;line-height:1.35;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.nav-num{flex:0 0 auto;font-family:var(--font-data);font-size:11px;letter-spacing:.08em;color:var(--slate)}
.nav-label{font-weight:500}
.nav-link:hover{background:var(--cyan-mist);color:var(--green)}
.nav-link:hover .nav-num{color:var(--green-2)}
.nav-link[aria-current="page"]{background:var(--green);color:var(--cyan);border-left-color:var(--cyan)}
.nav-link[aria-current="page"] .nav-num{color:var(--cyan);opacity:.75}

.season-switcher{margin-top:12px;padding-top:10px;border-top:1px dashed var(--rule)}
.season-head{font-family:var(--font-data);font-size:11px;letter-spacing:.2em;color:var(--slate);margin-bottom:8px}
.season-fallback{font-size:12px;line-height:1.6;color:var(--slate)}
.season-list{display:flex;flex-wrap:wrap;gap:6px}
.season-btn{
  padding:5px 9px;
  border:1px solid var(--rule);
  background:transparent;color:var(--ink);
  font-family:var(--font-data);font-size:12px;letter-spacing:.04em;line-height:1.4;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.season-btn:hover{background:var(--cyan-mist);border-color:var(--green-2)}
.season-btn.is-current{background:var(--green);color:var(--cyan);border-color:var(--green)}
.nav-foot-note{
  margin-top:12px;
  font-family:var(--font-data);font-size:11px;line-height:1.6;letter-spacing:.02em;color:var(--slate);
}

.head-progress{
  position:absolute;top:0;right:0;bottom:0;width:3px;
  background:var(--green);
  opacity:0;pointer-events:none;
  transition:opacity 240ms var(--ease);
}
.site-head[data-stuck] .head-progress{opacity:1}
.progress-line{display:block;width:100%;height:0;background:var(--cyan)}

@media (min-width:1024px){
  .site-head[data-foot-visible] .site-nav{opacity:0;visibility:hidden}
}

/* ---------- 7. FOOTER ---------- */
.site-foot{
  position:relative;z-index:1;
  background:var(--green);
  color:var(--sand);
  border-top:4px solid var(--cyan);
  padding-block:clamp(40px,7vh,84px) 0;
}
.foot-inner,.foot-base{
  width:100%;max-width:var(--shell-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.foot-top{display:grid;gap:clamp(24px,4vw,48px);grid-template-columns:1fr}
@media (min-width:900px){.foot-top{grid-template-columns:minmax(220px,320px) 1fr}}

.foot-brand{min-width:0}
.foot-wordmark{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:.1em;color:var(--sand)}
.foot-domain{margin-top:8px;font-family:var(--font-data);font-size:12px;letter-spacing:.1em;color:var(--cyan)}
.foot-note{margin-top:14px;max-width:36ch;font-size:13px;line-height:1.75;color:rgba(243,234,218,.72)}
.foot-note--small{margin-top:12px;font-size:12px;color:rgba(243,234,218,.58)}

.foot-grid{display:grid;gap:clamp(20px,3vw,36px);grid-template-columns:1fr}
@media (min-width:640px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.foot-col{min-width:0}
.foot-col--contact{grid-column:1/-1}
@media (min-width:1024px){.foot-col--contact{grid-column:auto}}

.foot-heading{
  padding-bottom:10px;margin-bottom:12px;
  border-bottom:1px solid rgba(61,242,192,.28);
  font-family:var(--font-data);font-size:11px;font-weight:400;letter-spacing:.22em;color:var(--cyan);
}
.foot-list{display:flex;flex-direction:column;gap:9px}
.foot-text{font-size:14px;line-height:1.6;color:rgba(243,234,218,.86)}
.foot-label{display:block;margin-bottom:2px;font-family:var(--font-data);font-size:10px;letter-spacing:.2em;color:rgba(191,247,230,.55)}
.foot-link{
  font-size:14px;
  color:rgba(243,234,218,.86);
  border-bottom:1px solid transparent;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.foot-link:hover{color:var(--cyan);border-bottom-color:var(--cyan)}

.foot-legal{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  margin-top:clamp(32px,5vh,56px);padding-top:18px;
  border-top:1px solid rgba(243,234,218,.18);
}
.foot-legal-list{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot-legal-link{font-size:13px;letter-spacing:.04em;color:var(--cyan-mist);transition:color var(--t-fast) var(--ease)}
.foot-legal-link:hover{color:var(--cyan)}
.foot-icp{font-family:var(--font-data);font-size:12px;letter-spacing:.08em;color:rgba(191,247,230,.62)}

.foot-base{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;
  margin-top:clamp(24px,4vh,40px);padding-block:16px 20px;
  border-top:1px dashed rgba(243,234,218,.2);
}
.foot-copy{font-family:var(--font-data);font-size:12px;letter-spacing:.06em;color:rgba(243,234,218,.62)}
.foot-season-line{font-family:var(--font-data);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.foot-season-dot{display:inline-block;width:34px;height:2px;margin-inline:8px;background:var(--cyan);vertical-align:middle}

/* ---------- 8. BUTTONS / TAGS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;
  border:1px solid var(--ink);
  background:var(--sand-2);color:var(--ink);
  font-size:15px;line-height:1;letter-spacing:.04em;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.btn:hover{background:var(--ink);color:var(--sand);border-color:var(--ink)}
.btn--primary{background:var(--orange);border-color:var(--orange);color:#1B0D05;font-weight:700}
.btn--primary:hover{background:var(--rust);border-color:var(--rust);color:var(--sand)}
.btn--ghost{background:transparent}
.btn--on-dark{background:transparent;border-color:var(--cyan);color:var(--cyan)}
.btn--on-dark:hover{background:var(--cyan);border-color:var(--cyan);color:var(--green)}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;
  border:1px solid rgba(13,42,33,.18);
  background:var(--cyan-mist);color:var(--green);
  font-family:var(--font-data);font-size:12px;letter-spacing:.08em;line-height:1.5;
}
.tag--warn{background:rgba(255,107,44,.16);color:var(--rust);border-color:rgba(201,67,31,.32)}
.tag--dark{background:var(--green-2);color:var(--cyan);border-color:var(--green-2)}

/* ---------- 9. BREADCRUMB ---------- */
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--font-data);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);
}
.breadcrumb li{display:flex;align-items:center;gap:8px}
.breadcrumb li+li::before{content:"/";color:var(--rule)}
.breadcrumb a:hover{color:var(--rust)}
.section--dark .breadcrumb{color:rgba(191,247,230,.7)}
.section--dark .breadcrumb a:hover{color:var(--cyan)}

/* ---------- 10. PANELS / RULES / NOTES ---------- */
.panel{position:relative;background:var(--sand-2);border:1px solid var(--rule);padding:clamp(18px,2.6vw,32px)}
.panel--dark{background:var(--green);border-color:var(--green-2);color:var(--sand)}
.panel--dark p{color:rgba(243,234,218,.82)}
.panel--outline{background:transparent}

.tick-corner{position:relative}
.tick-corner::before,.tick-corner::after{content:"";position:absolute;background:var(--cyan);z-index:3}
.tick-corner::before{top:-1px;left:-1px;width:26px;height:3px}
.tick-corner::after{top:-1px;left:-1px;width:3px;height:26px}

.rule{height:1px;background:var(--rule);border:0}
.rule--ticks{height:10px;background:none;background-image:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 14px)}
.rule--cyan{background:var(--cyan)}

.note{
  padding:8px 0 8px 14px;
  border-left:3px solid var(--orange);
  font-size:14px;line-height:1.7;color:var(--slate);
}
.section--dark .note{color:rgba(191,247,230,.75);border-left-color:var(--cyan)}

/* ---------- 11. DATA FIGURE ---------- */
.data-figure{display:flex;flex-direction:column;gap:6px}
.data-figure__value{
  font-family:var(--font-data);font-variant-numeric:tabular-nums;
  font-size:clamp(38px,6vw,88px);line-height:.95;font-weight:700;letter-spacing:-.02em;color:var(--ink);
}
.data-figure__value--accent{color:var(--orange)}
.data-figure__value--cyan{color:var(--green-2)}
.data-figure__label{font-family:var(--font-data);font-size:12px;letter-spacing:.16em;color:var(--slate)}
.section--dark .data-figure__value{color:var(--sand)}
.section--dark .data-figure__value--accent{color:var(--orange)}
.section--dark .data-figure__value--cyan{color:var(--cyan)}
.section--dark .data-figure__label{color:rgba(191,247,230,.7)}

/* ---------- 12. MEDIA FRAMES ---------- */
.media-frame{
  position:relative;width:100%;overflow:hidden;
  aspect-ratio:4/3;
  background:var(--sand-2);
  border:1px solid var(--ink);
}
.media-frame>img,.media-frame>svg,.media-frame>picture{width:100%;height:100%;object-fit:cover;display:block}
.media-frame--wide{aspect-ratio:16/9}
.media-frame--tall{aspect-ratio:3/4}
.media-frame--square{aspect-ratio:1/1}
.media-frame--bleed{border:0}
.media-frame--ticks::before{
  content:"";position:absolute;top:0;left:0;right:0;height:11px;z-index:2;
  background-image:repeating-linear-gradient(90deg,var(--cyan) 0 2px,transparent 2px 18px);
}
.media-frame__label{
  position:absolute;left:0;bottom:0;z-index:2;
  padding:6px 12px;
  background:var(--green);color:var(--cyan);
  font-family:var(--font-data);font-size:11px;letter-spacing:.14em;
}
.media-figure{display:flex;flex-direction:column;gap:8px;margin:0}
.media-figure figcaption{font-family:var(--font-data);font-size:12px;line-height:1.6;letter-spacing:.04em;color:var(--slate)}
.section--dark .media-figure figcaption{color:rgba(191,247,230,.7)}

/* ---------- 13. UTILITIES ---------- */
.u-stack>*+*{margin-top:16px}
.u-accent{color:var(--rust)}
.u-hide{display:none}
@media (min-width:1024px){.u-hide-lg{display:none}}
@media (max-width:1023px){.u-hide-sm{display:none}}

/* ---------- 14. MOBILE HEADER ---------- */
@media (max-width:1023px){
  .nav-toggle{display:inline-flex}

  .site-nav{
    position:fixed;inset:0;
    width:auto;transform:none;
    background:var(--green);
    border:0;border-left:3px solid var(--cyan);
    padding:96px var(--gutter) 48px;
    overflow-y:auto;
    opacity:0;visibility:hidden;
    transition:opacity 180ms var(--ease),visibility 180ms var(--ease);
  }
  .site-nav[data-open]{opacity:1;visibility:visible}

  .nav-head{color:var(--cyan);border-bottom-color:rgba(61,242,192,.3)}
  .nav-head-num{color:var(--cyan)}
  .nav-item+.nav-item{border-top-color:rgba(243,234,218,.14)}
  .nav-link{color:var(--sand);font-size:19px;padding:14px 10px}
  .nav-num{color:rgba(191,247,230,.6)}
  .nav-link:hover{background:var(--green-2);color:var(--cyan)}
  .nav-link[aria-current="page"]{background:var(--cyan);color:var(--green);border-left-color:var(--cyan)}
  .nav-link[aria-current="page"] .nav-num{color:var(--green);opacity:1}

  .season-head{color:rgba(191,247,230,.7)}
  .season-btn{border-color:rgba(243,234,218,.25);color:var(--sand)}
  .season-btn:hover{background:var(--green-2);color:var(--cyan);border-color:var(--cyan)}
  .season-btn.is-current{background:var(--cyan);color:var(--green);border-color:var(--cyan)}
  .nav-foot-note{color:rgba(191,247,230,.55)}

  .head-progress{width:2px}
}

/* ---------- 15. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}