/* 文件：/assets/site.css */

/* ========== 01 Reset & Design Tokens ========== */
:root{
  --color-bg:#0B1B24;
  --color-wine:#4A0E17;
  --color-indigo:#2A134A;
  --color-acid:#C8F542;
  --color-cyan:#00E5FF;
  --color-white:#F2F5F7;
  --color-gray:#8A929B;
  --color-orange:#FF3D00;
  --font-display:Impact,'Arial Black','PingFang SC','Microsoft YaHei',sans-serif;
  --font-data:'Courier New',Consolas,monospace;
  --font-body:Roboto,'PingFang SC','Microsoft YaHei',sans-serif;
  --container:1440px;
  --space-section:clamp(4rem,9vw,7.5rem);
  --line:rgba(0,229,255,.22);
  --card-bg:rgba(242,245,247,.03);
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-white);
  font-family:var(--font-body);
  line-height:1.7;
  overflow-wrap:break-word;
  word-break:break-word;
  -webkit-font-smoothing:antialiased;
}

ul,
ol{
  margin:0;
  padding:0;
}

button{
  font:inherit;
  border-radius:0;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:var(--color-cyan);
  text-decoration-color:rgba(0,229,255,.35);
  text-underline-offset:3px;
}

a:hover{
  color:var(--color-acid);
}

::selection{
  background:var(--color-acid);
  color:var(--color-bg);
}

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

#main-content{
  min-height:65vh;
}

#main-content:focus{
  outline:none;
}

/* ========== 02 Shared Layout ========== */
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,2.5rem);
}

.section{
  padding-block:var(--space-section);
  position:relative;
}

.section--wine{
  background:linear-gradient(135deg,var(--color-wine) 0%,#200609 120%);
}

.section--indigo{
  background:linear-gradient(135deg,var(--color-indigo) 0%,#0F0620 120%);
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
  border-bottom:1px solid var(--line);
  padding-bottom:1rem;
  margin-bottom:2rem;
}

.section-kicker{
  margin:0;
  font-family:var(--font-data);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-cyan);
}

.section-title{
  margin:.4rem 0 0;
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1.05;
  color:var(--color-white);
  letter-spacing:.02em;
  text-transform:uppercase;
}

.chapter-index{
  font-family:var(--font-display);
  font-size:clamp(3rem,8vw,7rem);
  line-height:.85;
  color:rgba(0,229,255,.14);
  margin:0;
  user-select:none;
}

.lede{
  font-size:1.08rem;
  line-height:1.8;
  color:var(--color-gray);
  max-width:60ch;
}

/* ========== 03 Buttons ========== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1.5rem;
  font-family:var(--font-data);
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  border-radius:0;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}

.btn-primary{
  background:var(--color-acid);
  color:var(--color-bg);
  border-color:var(--color-acid);
}

.btn-primary:hover{
  background:var(--color-cyan);
  border-color:var(--color-cyan);
  color:var(--color-bg);
}

.btn-ghost{
  background:transparent;
  color:var(--color-cyan);
  border-color:rgba(0,229,255,.4);
}

.btn-ghost:hover{
  background:rgba(0,229,255,.1);
  color:var(--color-white);
  border-color:var(--color-cyan);
}

/* ========== 04 Skip Link & Header ========== */
.skip-link{
  position:absolute;
  left:1rem;
  top:-4rem;
  z-index:200;
  display:inline-block;
  padding:.7rem 1.2rem;
  background:var(--color-acid);
  color:var(--color-bg);
  font:700 .8rem/1 var(--font-body);
  text-decoration:none;
  transition:top .2s;
}

.skip-link:focus{
  top:1rem;
}

.site-header{
  position:relative;
  z-index:100;
  background:linear-gradient(180deg,#0E2030 0%,var(--color-bg) 100%);
  border-bottom:1px solid var(--line);
}

.masthead{
  position:relative;
  max-width:var(--container);
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:2rem;
  padding:2.2rem clamp(1.25rem,4vw,2.5rem) 1.4rem;
}

.masthead::after{
  content:"";
  position:absolute;
  left:clamp(1.25rem,4vw,2.5rem);
  right:clamp(1.25rem,4vw,2.5rem);
  bottom:0;
  height:1px;
  background:repeating-linear-gradient(90deg,var(--color-cyan) 0 10px,transparent 10px 22px);
  opacity:.35;
}

.masthead-edition{
  margin:0;
  font-family:var(--font-data);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-gray);
}

.masthead-side{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:1.25rem;
}

.masthead-issue{
  margin:0;
  font-family:var(--font-data);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-gray);
  text-align:right;
}

.masthead-issue [data-year]{
  color:var(--color-cyan);
}

.masthead-cta{
  padding:.5rem .9rem;
  font-size:.68rem;
  white-space:nowrap;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  color:var(--color-white);
  text-decoration:none;
  line-height:1.1;
}

.brand:hover{
  color:var(--color-white);
}

.brand-mark{
  display:inline-grid;
  place-items:center;
  width:2.8rem;
  height:2.8rem;
  background:var(--color-acid);
  color:var(--color-bg);
  font-family:var(--font-display);
  font-size:1.7rem;
  border:2px solid var(--color-bg);
  box-shadow:0 0 0 1px var(--color-acid);
  transform:rotate(-3deg);
}

.brand-text{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.12rem;
}

.brand-cn{
  font-family:var(--font-display);
  font-size:1.7rem;
  letter-spacing:.06em;
  color:var(--color-white);
}

.brand-en{
  font-family:var(--font-data);
  font-size:.62rem;
  letter-spacing:.42em;
  color:var(--color-cyan);
  text-transform:uppercase;
}

.brand-footer .brand-mark{
  width:2.4rem;
  height:2.4rem;
  font-size:1.4rem;
}

.brand-footer .brand-cn{
  font-size:1.4rem;
}

/* ========== 05 Navigation ========== */
.site-nav{
  position:sticky;
  top:0;
  z-index:150;
  background:var(--color-indigo);
  border-top:1px solid rgba(200,245,66,.3);
  border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

.scroll-progress{
  position:absolute;
  top:0;
  left:0;
  height:2px;
  width:0;
  background:linear-gradient(90deg,var(--color-acid),var(--color-cyan));
  z-index:2;
  pointer-events:none;
}

.nav-list{
  display:flex;
  justify-content:center;
  align-items:stretch;
  list-style:none;
  margin:0 auto;
  max-width:var(--container);
}

.nav-item{
  flex:0 0 auto;
}

.nav-link{
  display:flex;
  align-items:baseline;
  gap:.5rem;
  padding:.85rem 1.15rem;
  color:var(--color-white);
  text-decoration:none;
  font-family:var(--font-body);
  font-size:.92rem;
  font-weight:500;
  border-bottom:3px solid transparent;
  transition:background .2s,color .2s,border-color .2s;
}

.nav-index{
  font-family:var(--font-data);
  font-size:.62rem;
  color:var(--color-cyan);
}

.nav-label{
  font-family:var(--font-body);
  letter-spacing:.02em;
}

.nav-link:hover,
.nav-link:focus{
  background:rgba(200,245,66,.1);
  color:var(--color-acid);
  border-bottom-color:var(--color-acid);
}

.nav-link[aria-current="page"]{
  background:var(--color-acid);
  color:var(--color-bg);
  border-bottom-color:var(--color-bg);
}

.nav-link[aria-current="page"] .nav-index{
  color:var(--color-bg);
}

.nav-toggle{
  display:none;
}

/* ========== 06 Footer ========== */
.site-footer{
  position:relative;
  overflow:hidden;
  background:linear-gradient(150deg,var(--color-indigo),#160A28 55%,var(--color-bg));
  border-top:2px solid var(--color-cyan);
  color:var(--color-white);
}

.site-footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:repeating-linear-gradient(90deg,var(--color-acid) 0 8px,transparent 8px 22px);
  opacity:.5;
  pointer-events:none;
}

.footer-grid{
  max-width:var(--container);
  margin-inline:auto;
  padding:4rem clamp(1.25rem,4vw,2.5rem) 2rem;
  display:grid;
  grid-template-columns:1.5fr 1fr 1.4fr;
  gap:2rem;
  position:relative;
}

.footer-brand{
  min-width:0;
}

.footer-trust{
  margin:1rem 0 0;
  max-width:34ch;
  color:var(--color-gray);
  font-size:.95rem;
  border-left:2px solid var(--color-acid);
  padding-left:1rem;
}

.footer-nav,
.footer-contact{
  min-width:0;
}

.footer-heading{
  margin:0 0 1rem;
  font-family:var(--font-data);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--color-cyan);
  border-bottom:1px solid var(--line);
  padding-bottom:.5rem;
}

.footer-links{
  list-style:none;
  display:grid;
  gap:.6rem;
}

.footer-links a{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--color-white);
  text-decoration:none;
}

.footer-links a::before{
  content:"/";
  color:var(--color-acid);
  font-family:var(--font-data);
}

.footer-links a:hover{
  color:var(--color-acid);
}

.footer-contact-list{
  list-style:none;
  display:grid;
  gap:.55rem;
}

.footer-contact-list li{
  display:grid;
  gap:.1rem;
}

.footer-contact-list span{
  font-family:var(--font-data);
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-gray);
}

.footer-contact-list strong{
  font-weight:500;
  color:var(--color-white);
  font-size:.92rem;
}

.footer-note{
  margin:1rem 0 0;
  padding-top:.8rem;
  border-top:1px dashed rgba(138,146,155,.35);
  font-size:.78rem;
  color:var(--color-gray);
  line-height:1.6;
}

.footer-bottom{
  max-width:var(--container);
  margin-inline:auto;
  padding:1.1rem clamp(1.25rem,4vw,2.5rem);
  border-top:1px solid rgba(242,245,247,.08);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.5rem 1.5rem;
  font-family:var(--font-data);
  font-size:.72rem;
  color:var(--color-gray);
}

.footer-bottom p{
  margin:0;
}

/* ========== 07 Grids & Cards ========== */
.grid{
  display:grid;
  gap:1.5rem;
}

.grid-2{
  grid-template-columns:repeat(2,1fr);
}

.grid-3{
  grid-template-columns:repeat(3,1fr);
}

.grid-4{
  grid-template-columns:repeat(4,1fr);
}

.card{
  position:relative;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:0;
  padding:1.5rem;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}

.card:hover{
  transform:translateY(-4px);
  border-color:rgba(200,245,66,.5);
  box-shadow:10px 10px 0 rgba(200,245,66,.08);
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--font-data);
  font-size:.64rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-cyan);
  border:1px solid rgba(0,229,255,.3);
  background:rgba(0,229,255,.05);
  padding:.25rem .55rem;
  border-radius:0;
}

.exhibit-label{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--font-data);
  font-size:.64rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-gray);
  border-left:2px solid var(--color-acid);
  padding:.15rem 0 .15rem .6rem;
}

.data-number{
  font-family:var(--font-data);
  font-size:1.6rem;
  color:var(--color-acid);
  font-variant-numeric:tabular-nums;
}

@keyframes dataPulse{
  0%,100%{opacity:1}
  50%{opacity:.65}
}

@media (prefers-reduced-motion: no-preference){
  .data-number{
    animation:dataPulse 2.4s ease-in-out infinite;
  }
}

/* ========== 08 Filter & Utility ========== */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-bottom:2rem;
}

.filter-btn{
  background:transparent;
  border:1px solid var(--line);
  color:var(--color-gray);
  font-family:var(--font-data);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.5rem .9rem;
  cursor:pointer;
  border-radius:0;
  transition:border-color .2s,color .2s,background .2s;
}

.filter-btn:hover{
  border-color:var(--color-cyan);
  color:var(--color-white);
}

.filter-btn[aria-pressed="true"],
.filter-btn.is-active{
  background:var(--color-acid);
  border-color:var(--color-acid);
  color:var(--color-bg);
}

.is-hidden{
  display:none !important;
}

/* ========== 09 Breadcrumb ========== */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  font-family:var(--font-data);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-gray);
  list-style:none;
  margin:1.5rem 0 0;
}

.breadcrumb li+li::before{
  content:"/";
  margin-right:.5rem;
  color:var(--color-cyan);
}

.breadcrumb a{
  color:var(--color-gray);
  text-decoration:none;
}

.breadcrumb a:hover{
  color:var(--color-acid);
}

.breadcrumb [aria-current="page"]{
  color:var(--color-acid);
}

/* ========== 10 Image Containers ========== */
.media-frame{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#0E2230,var(--color-indigo));
  border:1px solid var(--line);
  aspect-ratio:16/9;
}

.media-frame[data-caption]::after{
  content:attr(data-caption);
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:.5rem .8rem;
  background:rgba(11,27,36,.75);
  font-family:var(--font-data);
  font-size:.64rem;
  letter-spacing:.1em;
  color:var(--color-cyan);
}

.media-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.media-frame--hero{
  aspect-ratio:16/7;
}

.media-frame--tall{
  aspect-ratio:3/4;
}

/* ========== 11 Responsive ========== */
@media (max-width:1100px){
  .grid-4{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:900px){
  .masthead{
    grid-template-columns:1fr auto;
    gap:1rem;
    padding:1.2rem 1rem .9rem;
  }

  .masthead-edition{
    display:none;
  }

  .masthead-issue{
    display:none;
  }

  .brand{
    gap:.6rem;
  }

  .brand-mark{
    width:2.2rem;
    height:2.2rem;
    font-size:1.3rem;
  }

  .brand-cn{
    font-size:1.3rem;
  }

  .brand-en{
    font-size:.55rem;
    letter-spacing:.25em;
  }

  .masthead-side{
    gap:.7rem;
  }

  .site-nav{
    position:sticky;
    top:0;
  }

  .nav-toggle{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    margin:.65rem 1rem;
    padding:.55rem .9rem;
    background:transparent;
    color:var(--color-acid);
    border:1px solid rgba(200,245,66,.55);
    cursor:pointer;
    font-family:var(--font-data);
    font-size:.74rem;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .nav-toggle:hover{
    background:rgba(200,245,66,.1);
    border-color:var(--color-acid);
  }

  .nav-toggle[aria-expanded="true"]{
    background:var(--color-acid);
    color:var(--color-bg);
  }

  .nav-toggle-bars{
    display:inline-grid;
    gap:3px;
    width:14px;
  }

  .nav-toggle-bars span{
    display:block;
    height:2px;
    background:currentColor;
    transition:transform .2s,opacity .2s;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){
    transform:translateY(5px) 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(-5px) rotate(-45deg);
  }

  .nav-list{
    display:none;
    flex-direction:column;
    max-height:calc(100vh - 8rem);
    overflow:auto;
    padding:.4rem 1rem 1rem;
  }

  .site-nav[data-open] .nav-list{
    display:flex;
  }

  .nav-link{
    justify-content:space-between;
    padding:.9rem .2rem;
    border-bottom:1px solid rgba(242,245,247,.08);
  }

  .nav-link[aria-current="page"]{
    padding-left:.6rem;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
  }

  .footer-contact{
    grid-column:1 / -1;
  }
}

@media (max-width:720px){
  .grid-2,
  .grid-3,
  .grid-4{
    grid-template-columns:1fr;
  }

  .media-frame--hero{
    aspect-ratio:4/3;
  }
}

@media (max-width:560px){
  .footer-grid{
    grid-template-columns:1fr;
    gap:1.8rem;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ========== 12 Reduced Motion ========== */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}