:root{
  --red:#E41824; --red-deep:#A80C0C; --gold:#F0D818; --spring:#F8D800; --ink:#201818; --rice:#FFF7E6; --blue:#1F5FBF;
  --sys-cn:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Noto Sans SC','Source Han Sans SC',sans-serif;
  --cn-display:'MaShanZheng','NotoSC',var(--sys-cn);
  --cn:var(--sys-cn);
  --en-display:'NunitoLocal','NotoSC',var(--sys-cn);
  --en:'InterLocal',var(--sys-cn);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--red);color:var(--rice);font-family:var(--en);line-height:1.6;overflow-x:hidden}
img,video{max-width:100%}
:lang(zh){font-family:var(--cn);font-style:normal;letter-spacing:0;line-height:1.85}
h1,h2,h3{letter-spacing:0;line-height:1.15;margin:0;font-family:var(--en-display)}
h2{margin-bottom:8px}
p{margin:0 0 12px}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.cn-display{font-family:var(--cn-display);font-weight:400;color:var(--gold);font-size:clamp(3rem,10vw,7.5rem);line-height:1.1;display:block;text-shadow:0 3px 0 rgba(32,24,24,.25)}
.cn-display.sm{font-size:clamp(2.2rem,6vw,4rem)}
.en-display{font-family:var(--en-display);font-weight:800;font-size:clamp(1.4rem,3.5vw,2.6rem);display:block}
.light .cn-display{color:var(--red);text-shadow:none}
.light .en-display{color:var(--red)}
.sub{font-size:1.1rem;max-width:46em}
.section{padding:72px 0;scroll-margin-top:76px}
.section:not(.light){background:var(--red-deep)}  /* body text sits on the deep red for contrast; bright red is for the hero, band and big type */
@media(max-width:760px){.section{padding:52px 0}}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:var(--red-deep);display:flex;align-items:center;gap:20px;padding:8px 16px;box-shadow:0 2px 12px rgba(0,0,0,.25)}
.disc{border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.nav .disc{width:56px;height:56px}.nav .disc img{width:46px;height:46px;object-fit:contain}
.nav .links{display:flex;gap:22px}
.nav a{color:var(--rice);text-decoration:none;font-weight:700;font-family:var(--en-display)}
.nav .menu{margin-left:auto;display:none;background:none;border:2px solid var(--rice);color:var(--rice);border-radius:8px;font-size:1.3rem;padding:2px 10px;cursor:pointer}
@media(max-width:760px){
  .nav .links{display:none}
  .nav .links.open{display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;background:var(--red-deep);padding:16px;gap:14px;box-shadow:0 8px 16px rgba(0,0,0,.3)}
  .nav .menu{display:block}
}

/* hero */
.hero{position:relative;min-height:92vh;display:grid;place-items:center;overflow:hidden;text-align:center}
.tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;background:var(--red-deep)}
.tiles video{width:100%;height:100%;object-fit:cover;display:block;background:var(--red-deep)}
@media(max-width:760px){.tiles{grid-template-columns:repeat(2,1fr)}.tiles video:nth-child(n+7){display:none}}
/* Darkest behind the headline, clearer at the edges, so the faces in the tiles still read. */
.hero .wash{position:absolute;inset:0;background:
  radial-gradient(ellipse 78% 58% at 50% 50%,rgba(168,12,12,.93) 0%,rgba(168,12,12,.88) 38%,rgba(168,12,12,.60) 76%,rgba(168,12,12,.46) 100%),
  linear-gradient(180deg,rgba(168,12,12,.10) 0%,rgba(168,12,12,0) 40%,rgba(168,12,12,.45) 100%)}
.hero .wrap{position:relative;z-index:1;padding:90px 16px 70px}
/* the tiles move, so the words carry their own shadow rather than relying on the wash alone */
.hero .wrap p,.hero .en-display{text-shadow:0 2px 7px rgba(32,24,24,.6)}
.hero .date{margin-top:30px;font-size:.95rem}
.btn{display:inline-block;padding:14px 28px;border-radius:999px;font-weight:800;text-decoration:none;font-family:var(--en-display);font-size:1.05rem;margin:6px 4px}
.btn.gold{background:var(--gold);color:var(--ink)}
.btn.line{border:2px solid var(--rice);color:var(--rice)}
.btn.red{background:var(--red);color:var(--rice)}

/* steps */
.steps{position:relative;text-align:center;overflow:hidden}
.steps .koi{position:absolute;right:-30px;top:10px;width:min(30vw,260px);opacity:.55;pointer-events:none;transform:rotate(-12deg)}
.steps .three{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px;text-align:left}
@media(max-width:760px){.steps .three{grid-template-columns:1fr}}
.step img{width:100%;aspect-ratio:9/11;object-fit:cover;border-radius:18px;display:block}
.step h3{margin-top:14px;font-size:1.4rem}
.step h3 .zh{font-family:var(--cn-display);font-size:2.2rem;color:var(--gold);margin-right:8px}
.cheer{margin-top:44px}

/* reunion band: full-bleed photo, text stays above it so nothing fights the faces */
.scene{text-align:center;padding-bottom:0;overflow:hidden}
.scenepic{margin:34px 0 0;line-height:0}
.scenepic img{width:100%;height:auto;display:block}
@media(max-width:760px){
  /* a 16:9 crowd shot shrinks the faces to nothing on a phone, so crop in on the middle */
  .scenepic img{aspect-ratio:5/4;object-fit:cover;object-position:52% 42%}
}

/* light sections */
.light{background:var(--rice);color:var(--ink)}

/* range */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 28px}
.tab{border:2px solid var(--red-deep);background:transparent;color:var(--red-deep);border-radius:999px;padding:10px 20px;font-weight:800;cursor:pointer;font-family:var(--en-display);font-size:1rem}
.tab[aria-selected=true]{background:var(--red-deep);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.card{background:#fff;border-radius:18px;padding:16px;box-shadow:0 2px 12px rgba(32,24,24,.08);color:var(--ink)}
.card[hidden]{display:none}
.card img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block}
.card h3{font-size:1.15rem;margin-top:10px;line-height:1.3}
.card h3 .zh{display:block;font-family:var(--cn);font-weight:400;font-size:1rem;color:#5a4a4a}
.card p{margin:8px 0 0;font-size:.95rem}
.pax{display:inline-block;background:var(--blue);color:#fff;border-radius:8px;padding:2px 10px;font-weight:800;font-size:.85rem;font-family:var(--en-display)}
.badge{display:inline-block;background:var(--gold);color:var(--ink);border-radius:8px;padding:2px 10px;font-weight:800;font-size:.8rem;margin-left:6px;font-family:var(--en-display)}
.ask{margin-top:32px;font-weight:700}

/* legacy running banner */
.legacy{padding-bottom:56px;overflow:hidden}
.marquee{overflow:hidden;margin-top:28px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee+.marquee{margin-top:16px}
.track{display:flex;gap:16px;width:max-content;animation:run 90s linear infinite}
.marquee.reverse .track{animation-direction:reverse}
.marquee:hover .track{animation-play-state:paused}
@keyframes run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lp{margin:0;flex:none;background:#fff;border-radius:14px;padding:12px 14px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.lp img{height:150px;width:auto;max-width:280px;object-fit:contain;display:block}
.lp figcaption{font-size:.78rem;color:var(--ink);white-space:nowrap;font-family:var(--en);max-width:280px;overflow:hidden;text-overflow:ellipsis}
.lp figcaption b{color:var(--red-deep);font-family:var(--en-display);margin-right:4px}
@media(max-width:760px){.lp img{height:110px;max-width:200px}.lp{padding:10px 10px 8px}.track{animation-duration:70s}}
@media(prefers-reduced-motion:reduce){.track{animation:none}.marquee{overflow-x:auto}}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-top:28px}
.clip{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#000;cursor:pointer}
.clip img,.clip video{width:100%;height:100%;object-fit:cover;display:block}
/* the video is appended after the poster, so it must be lifted out of normal flow to sit ON
   the poster -- otherwise overflow:hidden clips it away and you get sound with no picture */
.clip video{position:absolute;inset:0;z-index:1;background:#000}
.clip .play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:3rem;background:rgba(0,0,0,.22)}
.clip small{position:absolute;left:10px;bottom:10px;color:#fff;text-shadow:0 1px 3px #000;font-size:.8rem;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip.playing small,.clip.playing .play,.clip.playing img{display:none}

/* logos */
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-top:28px}
.logos div{background:#fff;border-radius:14px;height:96px;display:grid;place-items:center;padding:14px;border:1px solid rgba(32,24,24,.08)}
.logos img{max-width:100%;max-height:62px;width:auto;height:auto;object-fit:contain}
.logos .word{font-family:var(--en-display);font-weight:800;color:var(--ink);text-align:center;font-size:1.05rem;line-height:1.2}

/* trade */
/* the whole range on white, so the red section needs a light card behind it */
.lineup{margin:22px 0 4px;background:var(--rice);border-radius:18px;padding:18px 18px 12px}
.lineup img{width:100%;height:auto;display:block}
.lineup figcaption{margin-top:10px;color:var(--ink);font-size:.9rem;text-align:center}
@media(max-width:760px){.lineup{padding:12px 12px 8px;border-radius:14px}.lineup figcaption{font-size:.82rem}}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:28px 0 36px}
.tcard{background:rgba(0,0,0,.18);border:1px solid rgba(255,247,230,.25);border-radius:18px;padding:20px}
.tcard h3{font-size:1.2rem;margin-bottom:8px}
form.trade{display:grid;gap:12px;max-width:560px}
form.trade input,form.trade textarea{padding:13px 14px;border-radius:10px;border:1px solid rgba(255,247,230,.35);background:rgba(255,255,255,.95);font:inherit;color:var(--ink);width:100%}
form.trade button{justify-self:start;border:0;cursor:pointer}

/* WhatsApp: green is the colour people recognise, so it stays green rather than going brand red */
.btn.wa{background:#25D366;color:#0b3d1f;display:inline-flex;align-items:center;gap:10px}
.wahint{margin-top:4px;font-weight:700}
.wafloat{position:fixed;right:18px;bottom:18px;z-index:30;display:inline-flex;align-items:center;gap:10px;
  background:#25D366;color:#0b3d1f;text-decoration:none;font-family:var(--en-display);font-weight:800;
  border-radius:999px;padding:14px 20px 14px 16px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.wafloat:focus-visible{outline:3px solid var(--rice);outline-offset:3px}
@media(max-width:760px){
  /* shrink to a bubble so it cannot sit over the trade form's Send button */
  .wafloat{padding:14px;right:14px;bottom:14px}
  .walabel{display:none}
}
@media print{.wafloat{display:none}}

/* table band */
.band{position:relative;overflow:hidden;background:var(--red);padding:0}
.band img{display:block;width:100%;max-width:1400px;margin:0 auto}
.band:before,.band:after{content:"";position:absolute;top:0;bottom:0;width:18%;pointer-events:none}
.band:before{left:0;background:linear-gradient(90deg,var(--red),transparent)}
.band:after{right:0;background:linear-gradient(270deg,var(--red),transparent)}

/* footer */
footer{background:var(--red-deep);padding:44px 16px;font-size:.95rem}
footer .cols{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:center}
footer .disc{width:104px;height:104px}footer .disc img{width:86px;height:86px;object-fit:contain}
footer .anchor{margin-top:10px;font-family:var(--en-display);font-weight:800;font-size:1.1rem}

/* phones: two columns for cards and clips, smaller koi, shorter step photos */
@media(max-width:760px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .card{padding:12px;border-radius:14px}
  .card h3{font-size:1rem}.card h3 .zh{font-size:.9rem}.card p{font-size:.85rem}
  .gallery{grid-template-columns:repeat(2,1fr);gap:10px}
  .steps .koi{width:22vw;opacity:.35;right:-20px;top:0}
  .step img{aspect-ratio:4/3}
  .tgrid{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,1fr);gap:12px}
}
@media(max-width:359px){.grid{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html.shot .hero{min-height:760px}
html.shot{scroll-behavior:auto}