/* ============================================================
   欧皇冠军 · 共享外壳样式 /assets/site.css
   01 reset  02 tokens  03 base  04 utilities  05 buttons
   06 tags   07 header 08 nav  09 footer 10 components
   11 media  12 responsive / motion
   ============================================================ */

/* ---------- 01 reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
table{width:100%;border-collapse:collapse}
[hidden]{display:none!important}

/* ---------- 02 tokens ---------- */
:root{
  --ink-950:#08130D;
  --ink-900:#0B1A12;
  --ink-800:#0E3B2E;
  --ink-700:#1B5A47;
  --gold:#D4A017;
  --gold-hi:#F0C75E;
  --red:#C62828;
  --yellow:#F2C200;
  --lime:#7CE38B;
  --paper:#F2EFE6;
  --fog:#9DB3A6;
  --edge:#2A2F2B;
  --line:rgba(212,160,23,.26);
  --line-soft:rgba(242,239,230,.12);
  --shell-w:1220px;
  --pad:clamp(18px,4vw,48px);
  --font-display:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:Georgia,"Times New Roman","Songti SC","Noto Serif CJK SC",serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  --shadow-hard:8px 8px 0 rgba(3,9,6,.72);
  --shadow-gold:8px 8px 0 rgba(212,160,23,.28);
  --ease:160ms cubic-bezier(.22,.61,.36,1);
}

/* ---------- 03 base ---------- */
body{
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.75;
  color:var(--paper);
  background-color:var(--ink-900);
  background-image:
    radial-gradient(900px 520px at 12% -8%,rgba(27,90,71,.55),transparent 62%),
    radial-gradient(700px 420px at 92% 4%,rgba(212,160,23,.14),transparent 58%),
    repeating-linear-gradient(118deg,rgba(242,239,230,.024) 0 1px,transparent 1px 10px);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-weight:900;letter-spacing:-.02em;line-height:1.16}
h1{font-size:clamp(30px,4.4vw,52px)}
h2{font-size:clamp(25px,3.1vw,36px)}
h3{font-size:clamp(20px,2.2vw,26px)}
h4{font-size:clamp(17px,1.6vw,19px);letter-spacing:0}
p{line-height:1.78}
strong,b{font-weight:800;color:var(--gold-hi)}
::selection{background:var(--gold);color:var(--ink-950)}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

/* ---------- 04 utilities ---------- */
.shell{width:100%;max-width:var(--shell-w);margin-inline:auto;padding-inline:var(--pad)}
.content{width:100%;max-width:var(--shell-w);margin-inline:auto;padding:0 var(--pad) clamp(48px,8vw,96px)}
.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}
.num,.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.serif{font-family:var(--font-serif);font-style:italic}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-serif);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-hi)}
.eyebrow::before{content:"";display:inline-block;width:24px;height:2px;background:var(--gold)}
.skip-link{position:fixed;top:-140px;left:14px;z-index:400;padding:12px 18px;background:var(--gold);color:var(--ink-950);font-weight:800;text-decoration:none;border:2px solid var(--ink-950);box-shadow:var(--shadow-hard);transition:top var(--ease)}
.skip-link:focus{top:14px}

/* ---------- 05 buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border:2px solid var(--edge);background:var(--ink-700);color:var(--paper);font-size:14px;font-weight:800;letter-spacing:.05em;text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 rgba(3,9,6,.6);transition:transform var(--ease),box-shadow var(--ease),background var(--ease),color var(--ease),border-color var(--ease)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(3,9,6,.65)}
.btn:active{transform:translate(0,0);box-shadow:2px 2px 0 rgba(3,9,6,.6)}
.btn--gold{background:var(--gold);border-color:var(--gold-hi);color:var(--ink-950)}
.btn--gold:hover{background:var(--gold-hi)}
.btn--lime{background:var(--lime);border-color:var(--lime);color:var(--ink-950)}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--paper);box-shadow:none}
.btn--ghost:hover{background:rgba(212,160,23,.12);box-shadow:none;transform:none}

/* ---------- 06 tags ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border:1px solid rgba(242,239,230,.24);font-family:var(--font-mono);font-size:11.5px;line-height:1.7;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hi);background:rgba(212,160,23,.08);white-space:nowrap}
.tag--gold{background:var(--gold);border-color:var(--gold-hi);color:#1A1400}
.tag--red{background:var(--red);border-color:#E45757;color:#FFF4F4}
.tag--yellow{background:var(--yellow);border-color:#FFDE5C;color:#241C00}
.tag--lime{background:var(--lime);border-color:#A8F0B2;color:#062B12}

/* ---------- 07 header ---------- */
.site-header{position:sticky;top:0;z-index:120;background:rgba(8,19,13,.95);border-bottom:3px solid var(--edge);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.header-band{border-bottom:1px solid var(--line-soft)}
.header-band__inner{display:grid;grid-template-columns:auto minmax(220px,1fr) auto auto;align-items:center;gap:clamp(14px,2vw,26px);padding-block:13px}

.brand{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none;color:var(--paper)}
.brand__chip{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;background:linear-gradient(150deg,var(--gold-hi),var(--gold) 45%,#96700F);color:var(--ink-950);font-size:20px;font-weight:900;line-height:1;border:2px solid rgba(242,239,230,.85);clip-path:polygon(0 0,100% 0,92% 100%,0 100%);box-shadow:4px 4px 0 rgba(3,9,6,.6)}
.brand__text{display:flex;flex-direction:column;min-width:0;line-height:1.24}
.brand__name{font-size:20px;font-weight:900;letter-spacing:.03em;white-space:nowrap}
.brand__line{font-family:var(--font-serif);font-size:11.5px;letter-spacing:.09em;color:var(--fog);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.search-field{display:flex;align-items:stretch;min-width:0;border:2px solid var(--edge);background:rgba(14,59,46,.72);box-shadow:4px 4px 0 rgba(3,9,6,.55);transition:border-color var(--ease),box-shadow var(--ease)}
.search-field:focus-within{border-color:var(--lime);box-shadow:4px 4px 0 rgba(124,227,139,.32)}
.search-field__input{flex:1 1 auto;min-width:0;padding:8px 12px;border:0;background:transparent;color:var(--paper);font-size:14px}
.search-field__input::placeholder{color:rgba(157,179,166,.88)}
.search-field__input:focus{outline:none}
.search-field__btn{flex:0 0 auto;padding:0 15px;border:0;border-left:2px solid var(--edge);background:var(--ink-700);color:var(--paper);font-size:13px;font-weight:800;letter-spacing:.1em;cursor:pointer;transition:background var(--ease),color var(--ease)}
.search-field__btn:hover{background:var(--gold);color:var(--ink-950)}
.search-status{margin:0 0 10px;font-family:var(--font-mono);font-size:12px;line-height:1.6;letter-spacing:.04em;color:var(--lime)}
.search-status:empty{display:none;margin:0}

.header-cta{white-space:nowrap}

.nav-toggle{display:none;align-items:center;gap:9px;padding:9px 13px;border:2px solid var(--gold);background:var(--ink-800);color:var(--paper);font-size:13px;font-weight:800;letter-spacing:.08em;cursor:pointer;box-shadow:4px 4px 0 rgba(3,9,6,.55);transition:background var(--ease),color var(--ease)}
.nav-toggle:hover{background:var(--ink-700)}
.nav-toggle__bars{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:18px;height:14px}
.nav-toggle__bars span{display:block;height:2px;background:var(--gold-hi);transition:transform var(--ease)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.nav-toggle__label{line-height:1}

/* ---------- 08 nav ---------- */
.header-nav{position:relative;background:linear-gradient(90deg,var(--ink-800) 0%,var(--ink-900) 72%)}
.header-nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-nav{min-width:0}
.site-nav__list{display:flex;flex-wrap:wrap;align-items:stretch}
.site-nav__link{position:relative;display:inline-block;padding:14px 18px;font-size:14.5px;font-weight:700;letter-spacing:.06em;text-decoration:none;color:rgba(242,239,230,.82);border-right:1px solid rgba(212,160,23,.16);transition:color var(--ease),background var(--ease)}
.site-nav__list li:first-child .site-nav__link{padding-left:0}
.site-nav__link::after{content:"";position:absolute;left:0;right:100%;bottom:7px;height:3px;background:var(--lime);transition:right var(--ease)}
.site-nav__link:hover{color:var(--gold-hi)}
.site-nav__link:hover::after{right:0}
.site-nav__link[aria-current="page"]{color:var(--ink-950);background:var(--gold);font-weight:900}
.site-nav__link[aria-current="page"]::after{display:none}
.header-nav__note{display:inline-flex;align-items:center;gap:9px;padding-left:16px;border-left:2px solid var(--line);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:var(--fog);white-space:nowrap}
.header-nav__dot{display:inline-block;width:7px;height:7px;background:var(--lime);transform:rotate(45deg)}
.scroll-progress{position:absolute;left:0;right:0;bottom:-3px;height:3px;background:rgba(212,160,23,.16);pointer-events:none}
.scroll-progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--lime),var(--gold-hi));transform:scaleX(0);transform-origin:left center}

/* ---------- 09 footer ---------- */
.site-footer{position:relative;margin-top:clamp(56px,9vw,110px);background:var(--ink-950);border-top:3px solid var(--edge);color:var(--fog);background-image:repeating-linear-gradient(118deg,rgba(242,239,230,.02) 0 1px,transparent 1px 11px)}
.site-footer::before{content:"";position:absolute;top:-3px;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold) 0%,var(--lime) 38%,var(--gold) 72%,var(--gold-hi) 100%)}
.footer-main{display:grid;grid-template-columns:minmax(260px,1.55fr) minmax(120px,.6fr) minmax(130px,.68fr) minmax(220px,1fr);gap:clamp(22px,3.4vw,52px);padding-block:clamp(38px,5vw,66px) clamp(28px,4vw,46px)}
.footer-brand__name{display:inline-block;position:relative;padding-bottom:12px;font-size:clamp(26px,3vw,34px);font-weight:900;letter-spacing:.04em;color:var(--paper)}
.footer-brand__name::after{content:"";position:absolute;left:0;bottom:0;width:68px;height:4px;background:var(--gold)}
.footer-brand__desc{margin-top:18px;max-width:34ch;font-size:15px;line-height:1.8;color:var(--fog)}
.footer-brand__sync{margin-top:16px;max-width:36ch;padding:10px 13px;border-left:3px solid var(--lime);background:rgba(124,227,139,.07);font-size:13.5px;line-height:1.7;color:var(--paper)}
.footer-col{min-width:0}
.footer-col__title{margin-bottom:16px;font-family:var(--font-serif);font-size:12.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi)}
.footer-list{display:flex;flex-direction:column;gap:10px}
.footer-list__link{display:inline-block;padding-bottom:2px;font-size:14.5px;text-decoration:none;color:var(--fog);border-bottom:1px solid transparent;transition:color var(--ease),border-color var(--ease)}
.footer-list__link:hover{color:var(--paper);border-bottom-color:var(--gold)}
.footer-list__link[aria-current="page"]{color:var(--gold-hi);border-bottom-color:var(--gold)}
.footer-contact{display:flex;flex-direction:column;gap:16px}
.footer-contact__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;align-items:start}
.footer-contact__label{grid-column:1 / -1;font-family:var(--font-serif);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hi)}
.footer-contact__value{font-size:14px;line-height:1.7;color:var(--paper);word-break:break-word}
.copy-btn{justify-self:start;padding:4px 10px;border:1px solid rgba(212,160,23,.55);background:transparent;color:var(--gold-hi);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;cursor:pointer;transition:background var(--ease),color var(--ease),border-color var(--ease)}
.copy-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink-950)}
.copy-btn[data-copied="true"]{background:var(--lime);border-color:var(--lime);color:var(--ink-950)}
.footer-base{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px 32px;padding-block:20px 34px;border-top:1px solid rgba(212,160,23,.22);font-size:13px;color:rgba(157,179,166,.9)}
.footer-base__legal{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px}
.footer-base__legal a{text-decoration:none;color:var(--fog);border-bottom:1px solid rgba(157,179,166,.4);transition:color var(--ease),border-color var(--ease)}
.footer-base__legal a:hover{color:var(--gold-hi);border-color:var(--gold)}
.footer-icp{font-family:var(--font-mono);letter-spacing:.04em}
.footer-base__service{max-width:62ch;font-size:12.5px;line-height:1.75;color:rgba(157,179,166,.82)}

/* ---------- 10 components ---------- */
.grid{display:grid;gap:clamp(18px,2.6vw,36px)}
.grid--8-4{grid-template-columns:minmax(0,2.15fr) minmax(0,1fr)}
.grid--3-7{grid-template-columns:minmax(0,1fr) minmax(0,2.15fr)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--stagger>*:nth-child(even){transform:translateY(clamp(10px,1.6vw,22px))}

.card{position:relative;padding:clamp(18px,2.4vw,28px);background:var(--ink-800);border:3px solid var(--edge);box-shadow:var(--shadow-hard)}
.card--gold{border-color:var(--gold);box-shadow:var(--shadow-gold)}
.card--rule{border-left:6px solid var(--gold)}

.breadcrumbs{margin:clamp(20px,3vw,34px) 0 0;font-size:13px;line-height:1.6}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.breadcrumbs li{display:inline-flex;align-items:center}
.breadcrumbs li+li::before{content:"/";margin-right:8px;color:rgba(212,160,23,.6)}
.breadcrumbs a{color:var(--fog);text-decoration:none;transition:color var(--ease)}
.breadcrumbs a:hover{color:var(--gold-hi)}
.breadcrumbs [aria-current="page"]{color:var(--paper)}
.breadcrumbs .serif{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi)}

.prose{max-width:70ch}
.prose>*+*{margin-top:1.05em}
.prose h2{margin-top:2.1em;padding-top:.62em;border-top:2px solid var(--line)}
.prose h3{margin-top:1.7em;color:var(--gold-hi)}
.prose a{color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px}
.prose ul{display:flex;flex-direction:column;gap:.55em}
.prose ul li{position:relative;padding-left:22px}
.prose ul li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}
.prose blockquote{padding-left:18px;border-left:4px solid var(--gold);font-family:var(--font-serif);font-size:1.06em;font-style:italic;color:var(--gold-hi)}
.prose hr{height:0;border:0;border-top:2px solid var(--line);margin-block:2em}

.chapter-link{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:14px;line-height:1.5;text-decoration:none;color:var(--fog);border-left:3px solid transparent;transition:color var(--ease),background var(--ease),border-color var(--ease)}
.chapter-link:hover{color:var(--paper);background:rgba(27,90,71,.4)}
.chapter-link[data-active="true"]{color:var(--ink-950);background:var(--gold);border-left-color:var(--lime);font-weight:800}

/* ---------- 11 media frames ---------- */
.media-frame{position:relative;display:block;overflow:hidden;border:3px solid var(--edge);background:linear-gradient(140deg,var(--ink-800),var(--ink-950));box-shadow:var(--shadow-hard)}
.media-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.08) brightness(.92)}
.media-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,26,18,0) 30%,rgba(11,26,18,.68) 100%),repeating-linear-gradient(0deg,rgba(8,19,13,.18) 0 1px,transparent 1px 3px)}
.media-frame--wide{aspect-ratio:16/9}
.media-frame--tall{aspect-ratio:4/5}
.media-frame--square{aspect-ratio:1/1}
.media-frame--4-3{aspect-ratio:4/3}
.media-frame__caption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 14px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:var(--gold-hi);background:linear-gradient(0deg,rgba(8,19,13,.92),rgba(8,19,13,0));border-top:1px solid rgba(212,160,23,.3)}

/* ---------- 12 responsive ---------- */
@media (max-width:1040px){
  .header-band__inner{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand toggle" "search cta";
    row-gap:11px;
  }
  .brand{grid-area:brand}
  .search-field{grid-area:search}
  .header-cta{grid-area:cta;justify-self:end}
  .nav-toggle{grid-area:toggle;display:inline-flex}
  .header-nav{background:var(--ink-800)}
  .header-nav__inner{display:block;padding-block:8px 12px}
  .header-nav__note{display:none}
  .site-nav{display:none}
  .site-nav[data-open]{display:block;padding-block:6px 16px}
  .site-nav__list{flex-direction:column;align-items:stretch}
  .site-nav__link,
  .site-nav__list li:first-child .site-nav__link{display:block;padding:14px 4px;border-right:0;border-bottom:1px solid rgba(212,160,23,.16)}
  .site-nav__link::after{display:none}
  .site-nav__link[aria-current="page"]{padding-inline:14px}
  .footer-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .footer-brand{grid-column:1 / -1}
  .footer-brand__desc,.footer-brand__sync{max-width:60ch}
  .grid--8-4,.grid--3-7,.grid--2{grid-template-columns:minmax(0,1fr)}
  .grid--stagger>*:nth-child(even){transform:none}
}
@media (max-width:620px){
  body{font-size:16px}
  .header-band__inner{
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:"brand cta toggle" "search search search";
    column-gap:8px;
  }
  .brand__chip{width:34px;height:34px;font-size:16px}
  .brand__name{font-size:17px}
  .brand__line{display:none}
  .header-cta{padding:8px 10px;font-size:12px;letter-spacing:.02em;box-shadow:3px 3px 0 rgba(3,9,6,.6)}
  .nav-toggle{padding:8px 10px;font-size:12px}
  .footer-main{grid-template-columns:minmax(0,1fr)}
  .footer-base{flex-direction:column;align-items:flex-start}
  .footer-base__legal{gap:8px 16px}
  .btn{padding:10px 16px;font-size:13.5px}
}

@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{transform:none}
  .grid--stagger>*:nth-child(even){transform:none}
}