*{box-sizing:border-box}
:root{
  --black:#070707;
  --black2:#0d0d0d;
  --ink:#101010;
  --red:#8f1010;
  --red2:#c91515;
  --red3:#e62323;
  --white:#fff;
  --off:#f3f3f1;
  --gray:#9c9c9c;
  --line:#292929;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,"Noto Sans TC","Microsoft JhengHei",sans-serif;
  background:var(--black);
  color:var(--white);
  line-height:1.5;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
.site-header{
  position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:17px 5vw;
  background:rgba(5,5,5,.9);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
}
.brand{display:flex;gap:12px;align-items:center;font-weight:800;letter-spacing:.14em}
.brand-mark{font-size:1.28rem}
.brand-mark span,.footer-brand span{color:var(--red3)}
.brand-name{font-size:.82rem}
nav{display:flex;gap:24px;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase}
nav a{opacity:.7;transition:.2s}
nav a:hover{opacity:1;color:#fff}

.hero{
  min-height:91vh;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#040404;
}
.hero-art{
  position:absolute;inset:0;
  background-image:url('assets/hero-ttt.png');
  background-size:cover;
  background-position:center;
  opacity:.62;
  filter:saturate(.9) contrast(1.05);
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(3,3,3,.94) 0%,rgba(3,3,3,.76) 45%,rgba(3,3,3,.35) 70%,rgba(3,3,3,.5) 100%),
    linear-gradient(0deg,rgba(3,3,3,.72),transparent 42%);
}
.hero-inner{position:relative;z-index:2;width:min(1180px,90vw);margin:auto;padding:9vh 0}
.eyebrow,.kicker{font-size:.76rem;letter-spacing:.25em;font-weight:800}
.eyebrow{color:#c0c0c0;margin-bottom:24px}
.hero h1{
  margin:0;
  font-size:clamp(4.5rem,11vw,9.7rem);
  line-height:.84;
  letter-spacing:-.06em;
  font-weight:900;
  max-width:980px;
}
.hero h1 span{color:var(--red3)}
.tagline{
  margin:30px 0 0;
  font-size:clamp(1rem,2vw,1.45rem);
  letter-spacing:.27em;
  font-weight:800;
}
.cn{margin:10px 0 0;color:#c9c9c9;letter-spacing:.17em}
.hero-copy{max-width:650px;margin:30px 0;color:#c5c5c5;font-size:1.06rem}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 24px;
  border:1px solid rgba(255,255,255,.4);
  font-size:.8rem;font-weight:900;letter-spacing:.12em;
  transition:.2s;
}
.btn-primary{background:var(--red2);border-color:var(--red2)}
.btn-primary:hover{background:var(--red3);transform:translateY(-1px)}
.btn-ghost:hover{background:#fff;color:#000}
.scroll-cue{
  position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);
  font-size:1.5rem;color:#888;
}

.section{padding:110px 7vw}
.section-light{background:var(--off);color:var(--ink)}
.section-dark{background:#0a0a0a}
.section-red{background:linear-gradient(135deg,#851010 0%,#b81414 55%,#7a0a0a 100%);color:#fff}
.section-contact{background:#fff;color:#111;display:flex;justify-content:space-between;gap:50px;align-items:flex-end}
.section-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;max-width:1220px;margin:auto}
.section-head{max-width:850px}
.section-head.max{margin-bottom:54px}
.section-head h2,.watch-head h2{font-size:clamp(2.3rem,5vw,4.6rem);line-height:.98;margin:10px 0 0;letter-spacing:-.045em}
.section-sub{color:#999;margin-top:18px;max-width:620px}
.kicker{color:#666}
.kicker.red{color:#ef3333}
.kicker.white{color:#fff}
.about-copy{font-size:1.1rem}
.about-copy p{margin-top:0}
.cn-copy{color:#686868}
.section-dark .cn-copy{color:#a7a7a7}
.cn-copy.light{color:#fff}
.statement{
  margin-top:34px;padding:22px 0;border-top:1px solid #bbb;border-bottom:1px solid #bbb;
  font-size:1.35rem;font-weight:800;
}

.timeline{border-top:1px solid #303030}
.event{
  display:grid;grid-template-columns:120px 1fr;gap:36px;align-items:center;
  padding:30px 0;border-bottom:1px solid #2d2d2d;
}
.date{display:flex;flex-direction:column;line-height:1}
.date strong{font-size:3rem;letter-spacing:-.04em;color:#fff}
.date span{margin-top:8px;font-size:.72rem;letter-spacing:.2em;color:#777;font-weight:800}
.status{
  font-size:.65rem;letter-spacing:.18em;font-weight:900;color:#737373;
}
.status.live{color:#ee3030}
.event h3{margin:6px 0 6px;font-size:1.65rem}
.event p{margin:3px 0;color:#b4b4b4}
.event.completed{opacity:.65}
.event-featured{
  margin-top:18px;padding:30px 18px;
  background:linear-gradient(90deg,rgba(174,12,12,.28),rgba(174,12,12,.06),transparent);
  border-left:2px solid var(--red3);
}

.voices-wrap{display:grid;grid-template-columns:1.35fr .75fr;gap:80px;align-items:end;max-width:1220px;margin:auto}
.voices-title h2{font-size:clamp(3.5rem,7.5vw,7rem);line-height:.84;margin:14px 0 20px;letter-spacing:-.055em}
.voices-title h2 span{color:#fff}
.big-copy{font-size:1.2rem;margin-bottom:4px}
.question{font-size:2rem;font-weight:900;line-height:1.15;margin-top:8px}
.rules-card{border:1px solid rgba(255,255,255,.5);padding:30px;background:rgba(0,0,0,.08)}
.rules-head{font-size:.7rem;letter-spacing:.18em;font-weight:900}
.rules-card ul{list-style:none;padding:0;margin:0 0 28px}
.rules-card li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.22)}
.rules-card li span{display:inline-block;width:34px;opacity:.6;font-size:.75rem}
.btn-light{background:white;color:#111;border-color:white}
.btn-light:hover{background:#f0f0f0}

.watch-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:44px}
.watch-head h2 span{font-size:.36em;letter-spacing:.08em;color:#777;font-weight:500}
.watch-head>p{max-width:330px;color:#666;text-align:right}
.watch-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:24px}
.watch-feature{
  display:grid;grid-template-columns:1.1fr .9fr;
  background:#fff;border:1px solid #d6d6d6;min-height:520px;
}
.watch-image{background:#111;overflow:hidden}
.watch-image img{width:100%;height:100%;object-fit:cover;display:block}
.watch-feature-copy{padding:34px;display:flex;flex-direction:column;justify-content:flex-end}
.card-label{font-size:.68rem;letter-spacing:.16em;color:var(--red);font-weight:900}
.watch-feature-copy h3,.watch-item h3{font-size:2rem;margin:16px 0 8px}
.watch-feature-copy p,.watch-item p{color:#555}
.card-link{margin-top:25px;font-size:.72rem;font-weight:900;letter-spacing:.12em}
.watch-list{display:grid;grid-template-rows:1fr 1fr;gap:24px}
.watch-item{
  background:#fff;border:1px solid #d6d6d6;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;
}

.join-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.join-grid article{
  border-top:2px solid var(--red3);padding:28px;background:#111;min-height:260px;
}
.join-grid .num{color:#ef3030;font-weight:900;font-size:.8rem;letter-spacing:.12em}
.join-grid h3{font-size:1.45rem;margin:40px 0 10px}
.join-grid p{color:#9f9f9f}
.independence-wrap{max-width:850px;margin:48px auto 0;text-align:center}
.independence{font-weight:800}
.centered{text-align:center}

.section-contact h2{font-size:clamp(2.5rem,5vw,4.5rem);margin:10px 0 0;letter-spacing:-.045em}
.contact-note{color:#666}
.contact-box{display:flex;flex-direction:column;gap:6px;align-items:flex-end;font-weight:900;font-size:1.2rem}
.contact-box a{color:var(--red)}

footer{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:26px 5vw;border-top:1px solid #222;background:#050505;color:#888;font-size:.8rem;
}
.footer-brand{font-weight:900;letter-spacing:.12em;color:#fff}

@media (max-width:900px){
  nav{display:none}
  .hero{min-height:84vh}
  .hero-art{background-position:center top;opacity:.45}
  .hero-overlay{background:rgba(3,3,3,.74)}
  .section{padding:76px 6vw}
  .section-grid,.voices-wrap,.watch-layout,.join-grid{grid-template-columns:1fr}
  .watch-head{display:block}
  .watch-head>p{text-align:left;margin-top:12px}
  .watch-feature{grid-template-columns:1fr;min-height:auto}
  .watch-image{height:460px}
  .event{grid-template-columns:86px 1fr;gap:20px}
  .date strong{font-size:2.3rem}
  .section-contact{display:block}
  .contact-box{align-items:flex-start;margin-top:34px}
}
@media (max-width:560px){
  .hero h1{font-size:clamp(3.8rem,21vw,6rem)}
  .tagline{letter-spacing:.16em}
  .hero-copy{font-size:.98rem}
  .watch-image{height:390px}
  .event{grid-template-columns:70px 1fr}
  .date strong{font-size:2rem}
}