/* ==========================================================================
   拼搏体育看台 / arena-pinbo.com.cn
   Shared kit — reset, tokens, header rail, footer board, base components
   ========================================================================== */

:root{
  --arena:#0A1A2A;
  --tunnel:#14324A;
  --signal:#FF5A1F;
  --amber:#FFB020;
  --turf:#2F7D4E;
  --chalk:#F7F3E8;
  --stone:#B9B3A7;
  --clay:#B65C3D;
  --ink:#111311;
  --mist:#DCE6EA;

  --rail-w:88px;
  --maxw:1180px;
  --gutter:clamp(18px,4vw,52px);

  --font-display:"Barlow Condensed","Oswald","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"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,Consolas,"Liberation Mono",monospace;

  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:74px}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  color:var(--ink);
  background-color:var(--chalk);
  background-image:radial-gradient(rgba(17,19,17,.045) 1px,transparent 1px);
  background-size:6px 6px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.04;
  letter-spacing:.01em;
  text-wrap:balance;
}
h1{font-size:clamp(56px,9vw,132px);letter-spacing:-.01em}
h2{font-size:clamp(30px,4vw,56px)}
h3{font-size:clamp(20px,2.2vw,28px);line-height:1.18}
p{margin:0 0 1em}
p:last-child{margin-block-end:0}
a{color:inherit}
strong,b{font-weight:700}
::selection{background:var(--signal);color:#10120F}

:focus-visible{outline:3px solid var(--turf);outline-offset:3px;border-radius:1px}
.site-header :focus-visible,
.site-footer :focus-visible{outline-color:var(--amber)}

html[data-nav-lock]{overflow:hidden}
#main-content{scroll-margin-block-start:24px}

/* ---------- layout scaffolding ---------- */
@media (min-width:960px){
  body{padding-inline-start:var(--rail-w)}
}

.wrap{
  width:min(100% - (2 * var(--gutter)),var(--maxw));
  margin-inline:auto;
}

.stack{display:grid;gap:var(--stack-gap,14px)}
.grid{display:grid;gap:clamp(18px,3vw,36px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.grid--8-4{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}

@media (max-width:899px){
  .grid--2,.grid--3,.grid--7-5,.grid--8-4{grid-template-columns:minmax(0,1fr)}
}

/* ---------- skip link ---------- */
.skip-link{
  position:fixed;
  inset-block-start:10px;
  inset-inline-start:10px;
  z-index:300;
  transform:translateY(-220%);
  background:var(--signal);
  color:#10120F;
  padding:11px 18px;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  letter-spacing:.1em;
  text-decoration:none;
  transition:transform 180ms var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* ==========================================================================
   HEADER — 看台轨道
   ========================================================================== */
.site-header{
  position:fixed;
  inset-block-start:0;
  inset-inline-start:0;
  z-index:90;
  width:var(--rail-w);
  height:100vh;
  height:100dvh;
  overflow:hidden;
  background:var(--arena);
  color:var(--chalk);
  border-inline-end:1px solid rgba(185,179,167,.3);
}
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(180deg,rgba(247,243,232,.055) 0 1px,transparent 1px 17px),
    radial-gradient(circle at 50% -6%,rgba(255,90,31,.2),transparent 62%);
}

.rail{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  height:100%;
}
.rail::after{
  content:"";
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  height:112px;
  pointer-events:none;
  background:linear-gradient(158deg,transparent 46%,rgba(255,90,31,.22) 46%);
}

/* --- brand lockup (vertical) --- */
.rail__brand{
  flex:none;
  display:grid;
  justify-items:center;
  gap:9px;
  padding:18px 0 16px;
  text-decoration:none;
  color:inherit;
  border-block-end:1px solid rgba(247,243,232,.15);
}
.rail__brand::before{
  content:"";
  width:10px;
  height:10px;
  background:var(--signal);
}
.rail__mark{
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-family:var(--font-display);
  font-size:17px;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1;
  color:var(--chalk);
}

/* --- navigation --- */
.rail__nav{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  padding-block:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(247,243,232,.26) transparent;
}
.rail__nav::-webkit-scrollbar{width:3px}
.rail__nav::-webkit-scrollbar-thumb{background:rgba(247,243,232,.26)}

.rail__item{border-block-end:1px solid rgba(247,243,232,.08)}

.rail__link{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 0;
  text-decoration:none;
  color:rgba(247,243,232,.64);
  border-inline-start:3px solid transparent;
  transition:color 180ms var(--ease),background-color 180ms var(--ease),border-color 180ms var(--ease);
}
.rail__num{
  font-family:var(--font-mono);
  font-size:10px;
  line-height:1;
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  color:rgba(185,179,167,.85);
}
.rail__label{
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-size:12px;
  line-height:1;
  letter-spacing:.16em;
}
.rail__link:hover,
.rail__link:focus-visible{
  color:var(--chalk);
  background:rgba(247,243,232,.07);
  border-inline-start-color:rgba(255,90,31,.5);
}
.rail__link[aria-current="page"]{
  color:var(--chalk);
  background:rgba(255,90,31,.13);
  border-inline-start-color:var(--signal);
}
.rail__link[aria-current="page"] .rail__num{color:var(--signal)}

/* --- rail quick action --- */
.rail__cta{
  flex:none;
  margin:12px 8px 16px;
  margin-block-start:auto;
  padding:9px 4px;
  display:grid;
  justify-items:center;
  gap:2px;
  background:var(--signal);
  color:#10120F;
  font-family:var(--font-display);
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.1;
  text-align:center;
  text-decoration:none;
  transition:background-color 180ms var(--ease),transform 180ms var(--ease);
}
.rail__cta span{
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.04em;
  opacity:.78;
}
.rail__cta:hover{background:var(--amber);transform:translateY(-2px)}

/* --- scroll progress meter --- */
.rail-meter{
  position:absolute;
  z-index:3;
  inset-block:0;
  inset-inline-end:0;
  width:3px;
  background:rgba(247,243,232,.12);
  pointer-events:none;
}
.rail-meter__fill{
  position:absolute;
  inset:0;
  display:block;
  background:var(--signal);
  transform:scaleY(var(--progress,0));
  transform-origin:top center;
}

/* --- mobile masthead (hidden on desktop) --- */
.masthead{display:none}
.masthead__brand{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  letter-spacing:.09em;
  color:var(--chalk);
  text-decoration:none;
}
.nav-toggle{display:none}

/* ==========================================================================
   FOOTER — 赛后复盘板
   ========================================================================== */
.site-footer{
  position:relative;
  overflow:hidden;
  margin-block-start:clamp(40px,7vw,96px);
  padding:clamp(34px,5.5vw,68px) clamp(20px,5vw,60px) 22px;
  background:var(--arena);
  color:rgba(247,243,232,.82);
  border-block-start:3px solid var(--signal);
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(180deg,rgba(247,243,232,.05) 0 1px,transparent 1px 19px),
    linear-gradient(104deg,transparent 62%,rgba(255,90,31,.13) 62%);
}
.site-footer > *{position:relative;z-index:1}

.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,4vw,58px);
  padding-block-end:clamp(24px,4vw,42px);
  border-block-end:1px solid rgba(247,243,232,.2);
}

.footer-brand__lockup{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(24px,3.2vw,34px);
  font-weight:700;
  letter-spacing:.05em;
  color:var(--chalk);
  text-decoration:none;
  line-height:1.1;
}
.footer-brand__lockup span{color:var(--signal)}
.footer-brand__note{
  margin-block:12px 0;
  max-width:32em;
  font-size:15px;
  line-height:1.7;
  color:rgba(247,243,232,.7);
}
.footer-brand__cta{margin-block-start:18px}

.footer-col__title{
  margin-block:0 14px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--amber);
}
.footer-col ul{display:grid;gap:9px}
.footer-col a{
  display:inline-block;
  font-size:15px;
  color:rgba(247,243,232,.82);
  text-decoration:none;
  transition:color 160ms var(--ease),padding-inline-start 160ms var(--ease);
}
.footer-col a:hover{padding-inline-start:6px;color:var(--chalk)}

.footer-contact{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:18px 32px;
  padding-block:clamp(22px,3vw,34px);
  border-block-end:1px solid rgba(247,243,232,.2);
}
.footer-contact__item{min-width:0}
.footer-contact__item--wide{grid-column:span 1}
.footer-contact__label{
  display:block;
  margin-block-end:5px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--stone);
}
.footer-contact__value{
  display:block;
  font-family:var(--font-mono);
  font-size:15px;
  letter-spacing:.01em;
  color:var(--chalk);
  overflow-wrap:anywhere;
}
.footer-contact__hours{
  margin:0;
  font-size:13px;
  line-height:1.65;
  color:rgba(247,243,232,.66);
}

.footer-base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 26px;
  padding-block-start:18px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:rgba(247,243,232,.58);
}
.footer-base p{margin:0}

/* ==========================================================================
   SHARED COMPONENTS
   ========================================================================== */

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 24px;
  border:0;
  background:var(--tunnel);
  color:var(--chalk);
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:transform 180ms var(--ease),background-color 180ms var(--ease),color 180ms var(--ease),box-shadow 180ms var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--signal{background:var(--signal);color:#10120F}
.btn--signal:hover{background:var(--amber)}
.btn--line{
  background:transparent;
  color:var(--tunnel);
  box-shadow:inset 0 0 0 1px var(--tunnel);
}
.btn--line:hover{background:var(--tunnel);color:var(--chalk)}
.btn--ghost{
  background:transparent;
  color:var(--chalk);
  box-shadow:inset 0 0 0 1px rgba(247,243,232,.55);
}
.btn--ghost:hover{background:rgba(247,243,232,.12)}

/* breadcrumbs */
.crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tunnel);
}
.crumbs__item{display:inline-flex;align-items:center;gap:8px}
.crumbs__item + .crumbs__item::before{
  content:"/";
  color:var(--stone);
  margin-inline-end:8px;
}
.crumbs__item a{
  text-decoration:none;
  color:var(--tunnel);
  border-block-end:1px solid rgba(20,50,74,.35);
}
.crumbs__item a:hover{border-block-end-color:var(--signal);color:var(--signal)}
.crumbs__item[aria-current="page"]{color:rgba(17,19,17,.6)}

/* section head */
.sec-head{display:grid;gap:14px;max-width:min(100%,720px)}
.sec-head__index{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--signal);
}
.sec-head__title{font-size:clamp(30px,4vw,56px)}
.sec-head__lead{
  max-width:34em;
  font-size:17px;
  line-height:1.75;
  color:rgba(17,19,17,.75);
}

/* horizontal band */
.band{
  position:relative;
  overflow:hidden;
  padding:clamp(22px,3vw,36px) clamp(20px,3vw,36px);
  background:var(--tunnel);
  color:var(--chalk);
}
.band::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  width:6px;
  background:var(--signal);
}
.band::after{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-end:0;
  width:38%;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 50%,rgba(47,125,78,.32) 50%);
}

/* data plate */
.data-plate{
  position:relative;
  padding:clamp(16px,2.2vw,26px);
  background:var(--chalk);
  border:1px solid var(--stone);
  border-block-start:3px solid var(--tunnel);
}
.data-plate::after{
  content:"";
  position:absolute;
  inset-block-end:-1px;
  inset-inline-end:-1px;
  width:16px;
  height:16px;
  background:linear-gradient(135deg,transparent 50%,var(--stone) 50%);
}
.data-plate__title{
  margin-block:0 10px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--tunnel);
}

/* tags */
.tag{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  line-height:1.6;
  background:var(--mist);
  color:var(--tunnel);
}
.tag--turf{background:var(--turf);color:#F2F7F1}
.tag--clay{background:var(--clay);color:#FBF2EE}
.tag--signal{background:var(--signal);color:#10120F}

/* archive tabs */
.archive-tabs{display:block}
.archive-tabs__list{
  display:flex;
  flex-wrap:wrap;
  border-block-end:2px solid var(--tunnel);
}
.archive-tabs__tab{
  appearance:none;
  margin-inline-end:-1px;
  padding:10px 18px;
  border:1px solid var(--stone);
  border-block-end:0;
  background:var(--mist);
  color:var(--tunnel);
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.4;
  cursor:pointer;
  transition:background-color 180ms var(--ease),color 180ms var(--ease),border-color 180ms var(--ease);
}
.archive-tabs__tab:hover{background:#CFDCE2}
.archive-tabs__tab[aria-selected="true"]{
  background:var(--tunnel);
  border-color:var(--tunnel);
  color:var(--chalk);
}
.archive-tabs__panel{padding-block:clamp(16px,2.6vw,28px)}
.archive-tabs__panel[hidden]{display:none}

/* folds */
.fold{border-block-end:1px solid var(--stone)}
.fold > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:15px 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-display);
  font-size:18px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink);
}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary::after{
  content:"+";
  flex:none;
  font-family:var(--font-mono);
  font-size:20px;
  line-height:1;
  color:var(--signal);
}
.fold[open] > summary::after{content:"–"}
.fold[open] > summary{color:var(--tunnel)}
.fold__body{
  padding-block-end:18px;
  max-width:38em;
  font-size:16px;
  line-height:1.8;
  color:rgba(17,19,17,.82);
}

/* media frame */
.media-frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:16 / 10;
  background:var(--tunnel);
  border:1px solid var(--stone);
}
.media-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.media-frame--tall{aspect-ratio:3 / 4}
.media-frame--diag::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(118deg,rgba(10,26,42,.55) 0 26%,transparent 26%);
}
.media-frame__cap{
  position:absolute;
  z-index:2;
  inset-block-end:0;
  inset-inline:0;
  padding:9px 12px;
  background:rgba(10,26,42,.82);
  color:var(--chalk);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
}

/* prose */
.prose{max-width:38em}
.prose p{margin-block:0 1.1em}
.prose ul,.prose ol{margin-block:0 1.1em;padding-inline-start:1.15em}
.prose ul{list-style:square}
.prose ol{list-style:decimal}
.prose li{margin-block-end:.45em}
.prose h2{margin-block:1.5em .5em;font-size:clamp(24px,3vw,38px)}
.prose h3{margin-block:1.3em .4em}
.prose a{color:var(--tunnel);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--signal)}
.prose code{
  font-family:var(--font-mono);
  font-size:.92em;
  background:var(--mist);
  padding:1px 5px;
}

/* ==========================================================================
   RESPONSIVE — drawer returns on tablet / phone
   ========================================================================== */
@media (max-width:959px){
  html{scroll-padding-top:70px}

  .site-header{
    position:sticky;
    inset-block-start:0;
    inset-inline-start:auto;
    width:100%;
    height:auto;
    border-inline-end:0;
    border-block-end:1px solid rgba(247,243,232,.22);
  }
  .site-header::before{
    background:
      repeating-linear-gradient(90deg,rgba(247,243,232,.055) 0 1px,transparent 1px 17px),
      radial-gradient(circle at 88% -40%,rgba(255,90,31,.22),transparent 66%);
  }

  .masthead{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    gap:14px;
    padding:11px 16px;
    box-shadow:inset 0 -1px 0 rgba(247,243,232,0);
  }

  .nav-toggle{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-inline-start:auto;
    padding:9px 13px;
    background:transparent;
    border:1px solid rgba(247,243,232,.42);
    color:var(--chalk);
    font-family:var(--font-display);
    font-size:13px;
    font-weight:700;
    letter-spacing:.16em;
    cursor:pointer;
    transition:border-color 180ms var(--ease),background-color 180ms var(--ease);
  }
  .nav-toggle:hover{border-color:var(--signal);background:rgba(255,90,31,.14)}
  .nav-toggle__bars{display:grid;gap:4px;width:18px}
  .nav-toggle__bars span{
    display:block;
    height:2px;
    background:currentColor;
    transition:transform 200ms var(--ease),opacity 160ms var(--ease);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .nav-toggle__text{line-height:1}

  .rail{display:block;height:auto}
  .rail::after{display:none}
  .rail__brand{display:none}

  .rail__nav{
    position:absolute;
    z-index:2;
    inset-block-start:100%;
    inset-inline:0;
    max-height:0;
    overflow:hidden;
    visibility:hidden;
    display:flex;
    flex-direction:column;
    padding-block:0;
    background:var(--arena);
    border-block-start:1px solid rgba(247,243,232,.16);
    transition:max-height 220ms var(--ease);
  }
  .rail__nav[data-open]{
    max-height:calc(100dvh - 62px);
    overflow-y:auto;
    visibility:visible;
  }

  .rail__list{flex:none}
  .rail__item{border-block-end:1px solid rgba(247,243,232,.1)}
  .rail__link{
    flex-direction:row;
    justify-content:flex-start;
    align-items:baseline;
    gap:16px;
    padding:14px 18px;
  }
  .rail__num{font-size:12px;color:var(--signal)}
  .rail__label{
    writing-mode:horizontal-tb;
    text-orientation:mixed;
    font-size:16px;
    letter-spacing:.14em;
    color:var(--chalk);
  }

  .rail__cta{
    margin:16px 18px 20px;
    margin-block-start:16px;
    padding:13px 12px;
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:8px;
    font-size:15px;
  }
  .rail__cta span{font-size:11px}

  .rail-meter{
    position:absolute;
    inset-block:auto 0;
    inset-inline:0;
    width:100%;
    height:2px;
    background:rgba(247,243,232,.16);
  }
  .rail-meter__fill{
    transform:scaleX(var(--progress,0));
    transform-origin:left center;
  }

  .site-footer{margin-block-start:clamp(34px,8vw,60px)}
}

@media (max-width:899px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-brand{grid-column:1 / -1}
}

@media (max-width:599px){
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .footer-contact{grid-template-columns:minmax(0,1fr)}
  .footer-base{justify-content:flex-start}
  .archive-tabs__tab{flex:1 1 auto;text-align:center;padding-inline:12px}
}

@media (max-width:419px){
  body{font-size:16px}
  .masthead__brand{font-size:17px}
}

/* ---------- reduced motion ---------- */
@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;
  }
  .rail__cta:hover,.btn:hover{transform:none}
}