/* Homepage layout. */
.hero{min-height:100svh;display:grid;place-items:center;text-align:center;padding:calc(var(--header) + 40px) 20px 80px}
.hero-inner{display:flex;flex-direction:column;align-items:center}
.hero-logo{width:116px;height:116px;overflow:hidden;mix-blend-mode:screen;margin-bottom:26px}
.hero-logo img{width:100%;height:100%;object-fit:cover;transform:scale(1.45)}
html[data-theme="light"] .hero-logo{mix-blend-mode:multiply}
html[data-theme="light"] .hero-logo img{filter:invert(1)}
.hero h1{margin-top:26px;font-size:clamp(68px,11vw,148px);font-weight:900;line-height:1.05;letter-spacing:.03em;text-shadow:0 0 40px #ffffff22}
html[data-theme="light"] .hero h1{text-shadow:none}
.slogan{margin-top:22px;font-size:clamp(22px,2.7vw,36px);font-weight:900;letter-spacing:.04em}
.hero-desc{margin-top:20px;font-size:16px;color:var(--muted);font-weight:500;line-height:1.9}
.hero-actions{margin-top:38px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.mobile-break{display:none}

.sec-head{margin-bottom:36px}

/* Brand module: one card per brand. */
.brand-card{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);min-height:600px}
.brand-media{position:relative;overflow:hidden;display:block}
.brand-media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;transition:transform 1.2s ease}
.brand-card:hover .brand-media img{transform:scale(1.03)}
.brand-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,var(--card))}
.brand-body{padding:52px 52px 48px;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(ellipse at 100% 0,var(--tea-soft),transparent 65%)}
.brand-tags{display:flex;flex-wrap:wrap;gap:10px}
.brand-body h3{margin-top:26px;font-family:var(--serif);font-size:clamp(46px,5.2vw,70px);font-weight:700;letter-spacing:.14em;line-height:1.2}
.brand-line{margin-top:14px;font-size:20px;font-weight:700;color:var(--tea);letter-spacing:.06em}
.brand-text{margin-top:14px;font-size:15px;color:var(--ink-2);line-height:1.9}
.brand-products{margin-top:30px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.brand-products a{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card-2);transition:transform .25s,border-color .25s}
.brand-products a:hover{transform:translateY(-4px);border-color:var(--line-2)}
.brand-products img{aspect-ratio:1;width:100%;object-fit:cover;background:#fff}
.brand-products span{display:block;padding:10px 10px 12px;font-size:12px;font-weight:700;line-height:1.5}
.brand-actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.next-card{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:34px 40px;border-style:dashed;border-color:var(--line-2);background:transparent}
.next-card h3{font-size:22px;font-weight:900}
.next-card p{margin-top:6px;color:var(--muted);font-size:14px}

/* Activities with the scrolling photo wall. */
.act-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
.act-list{margin-top:32px;display:grid;gap:12px}
.act-list .panel{padding:22px 24px;border-radius:20px}
.act-list .chip{height:26px;padding:0 11px;font-size:11px}
.act-list h3{margin-top:12px;font-size:18px;font-weight:900}
.act-list p{margin-top:4px;font-size:14px;color:var(--muted)}
.wall-toggle{margin-top:24px;min-height:46px;padding:0 20px;font-size:13px}
.wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;height:680px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent)}
.wall-col{min-width:0;overflow:hidden}
.track{animation:wall-up var(--duration,46s) linear infinite}
.wall-col[data-dir="down"] .track{animation-name:wall-down}
.wall:hover .track,.wall:focus-within .track,.wall.paused .track,.wall.offscreen .track{animation-play-state:paused}
.group{display:flex;flex-direction:column;gap:14px;padding-bottom:14px}
@keyframes wall-up{to{transform:translateY(-50%)}}
@keyframes wall-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.wall-card{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card-2);cursor:zoom-in}
.wall-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .3s;filter:saturate(.9)}
.wall-card:hover img,.wall-card:focus-visible img{transform:scale(1.05);filter:none}
.wall-card.tall{aspect-ratio:3/4}
.wall-card.wide{aspect-ratio:4/3}
.wall-card.square{aspect-ratio:1}
.wall-card.arch{aspect-ratio:3/4;border-radius:120px 120px 18px 18px}
.wall-card.leaf{aspect-ratio:4/5;border-radius:18px 18px 90px 18px}
.wall-card>span{position:absolute;inset:auto 0 0;padding:34px 14px 14px;background:linear-gradient(transparent,#000c);color:#fff;font-size:12px;font-weight:700;text-align:left;opacity:0;transition:opacity .25s}
.wall-card:hover>span,.wall-card:focus-visible>span{opacity:1}
.wall-caption{margin-top:18px;display:flex;justify-content:space-between;gap:16px;font-size:12px;font-weight:700;color:var(--muted)}
.wall-caption span:first-child{display:flex;align-items:center;gap:8px}
.wall-caption i{width:6px;height:6px;border-radius:50%;background:var(--tea);box-shadow:0 0 10px var(--tea)}

/* Contact */
.contact-card{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:48px 52px}
.contact-copy h3{font-size:clamp(28px,3.2vw,40px);font-weight:900;line-height:1.45}
.contact-copy p{margin-top:14px;color:var(--ink-2);font-size:15px;max-width:420px}
.qr-list{display:flex;gap:16px}
.qr-tile{margin:0;padding:18px 18px 16px;border:1px solid var(--line);border-radius:20px;background:var(--card-2);text-align:center}
.qr-window{display:block;position:relative;width:150px;height:150px;overflow:hidden;background:#fff;border-radius:10px}
.qr-window img{position:absolute;width:728.5714286%;max-width:none;height:auto;top:-702.5974026%;left:-167.5324675%}
.qr-account img{left:-314.9350649%}
.qr-company img{left:-462.987013%}
/* The web edition uses standalone, lossless QR crops; legacy poster rules remain compatible. */
.qr-window.qr-cropped img{position:static;inset:auto;width:100%;max-width:100%;height:100%;object-fit:contain}
.qr-tile figcaption{margin-top:12px;font-size:12px;color:var(--muted);font-weight:700}
.qr-tile b{display:block;font-size:15px;color:var(--ink);font-weight:900}

@media(max-width:1050px){
  .brand-card{grid-template-columns:1fr}
  .brand-media{height:340px}
  .brand-media::after{background:linear-gradient(180deg,transparent 60%,var(--card))}
  .act-layout{grid-template-columns:1fr}
  .act-list{grid-template-columns:repeat(3,1fr)}
  .contact-card{flex-direction:column;align-items:flex-start}
}
@media(max-width:760px){
  .hero-logo{width:92px;height:92px;margin-bottom:20px}
  .hero h1{margin-top:22px}
  .mobile-break{display:inline}
  .hero-desc{font-size:14px}
  .hero-desc br{display:none}
  .hero-actions{flex-direction:column;width:100%;max-width:320px}
  .brand-media{height:260px}
  .brand-body{padding:28px 22px 30px}
  .brand-line{font-size:17px}
  .brand-text{font-size:14px}
  .brand-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .brand-actions .btn{flex:1 1 100%}
  .next-card{flex-direction:column;align-items:flex-start;padding:26px 22px}
  .act-list{grid-template-columns:1fr}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr));height:540px;gap:10px}
  .wall-col:nth-child(3){display:none}
  .group{gap:10px;padding-bottom:10px}
  .wall-card>span{opacity:1;font-size:11px;padding:28px 10px 10px}
  .wall-caption{flex-direction:column;gap:4px;font-size:11px}
  .contact-card{padding:30px 22px;gap:26px}
  .qr-list{width:100%}
  .qr-tile{flex:1;padding:14px 10px}
  .qr-window{width:100%;height:auto;aspect-ratio:1}
}
@media(prefers-reduced-motion:reduce){.track{animation:none}.wall-col{overflow-y:auto}}

/* ===== V7.1 polish ===== */
/* Hero pieces arrive one after another on load. */
.hero-inner>*{animation:hero-rise 1.2s var(--ease-out) both}
.hero-inner>:nth-child(1){animation-delay:.05s}
.hero-inner>:nth-child(2){animation-delay:.15s}
.hero-inner>:nth-child(3){animation-delay:.25s}
.hero-inner>:nth-child(4){animation-delay:.38s}
.hero-inner>:nth-child(5){animation-delay:.5s}
.hero-inner>:nth-child(6){animation-delay:.62s}
@keyframes hero-rise{from{opacity:0;transform:translateY(22px)}}
/* A slow silver light passes across the name. */
.hero h1{letter-spacing:.01em;background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 40%,color-mix(in srgb,var(--ink) 55%,#8fa6ff) 50%,var(--ink) 60%,var(--ink) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hero-rise 1.2s var(--ease-out) .25s both,name-light 6s ease-in-out 1.6s infinite}
@keyframes name-light{0%{background-position:100% 0}60%,100%{background-position:-50% 0}}
.hero .chip{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* Cards lift a little under the pointer. */
.wall-card{transition:transform .5s var(--ease-out),border-color .3s,box-shadow .5s var(--ease-out)}
.wall-card:hover{box-shadow:0 18px 40px -18px #000c;border-color:var(--line-2)}
.brand-card:hover,.next-card:hover{border-color:var(--line-2)}
.act-list .panel:hover{transform:translateY(-3px)}

/* Contact: club group, club account and the president's WeChat. */
.qr-list{display:grid;grid-template-columns:repeat(3,auto);gap:14px}
.qr-president img{left:-18.5185%;top:-44.4444%;width:137.037%}
.qr-tile-president{border-color:color-mix(in srgb,#7a62ff 45%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,#7a62ff 10%,var(--card-2)),var(--card-2))}
.qr-tile-president b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:1050px){.qr-list{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}.qr-window{width:100%;height:auto;aspect-ratio:1}}
@media(max-width:760px){
  .qr-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qr-tile-president{grid-column:1/-1;justify-self:center;width:calc(50% - 7px)}
}
@media(prefers-reduced-motion:reduce){
  .hero-inner>*{animation:fade-in .4s ease both}
  .hero h1{animation:fade-in .4s ease both;background:none;color:var(--ink)}
  .act-list .panel:hover{transform:none}
}

/* ===== V7.2 apple-design pass ===== */
.hero h1{letter-spacing:-.01em}
.slogan{letter-spacing:.01em}
.brand-body h3{letter-spacing:.08em}
.act-list h3{margin-top:0}