*{box-sizing:border-box}body{margin:0;background:#050505;color:#181818;font:16px/1.6 system-ui,-apple-system,"Noto Sans TC",sans-serif}.frame{max-width:1340px;margin:auto;background:#fff;min-height:100vh;box-shadow:0 0 70px #000}header .banner{display:block;margin:0 auto;max-width:1340px;background:#080808}header .banner img{display:block;width:100%;height:auto;max-height:360px;object-fit:cover}header nav{display:flex;justify-content:center;align-items:stretch;max-width:1340px;margin:auto;background:#050505;min-height:54px}header nav a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 8px;color:#f7f7f7;text-decoration:none;text-align:center;font-size:13px;border-right:1px solid #1e1e1e}header nav a:hover{background:#171717}header nav small{font-size:11px}header nav .search{flex:0 0 55px;background:#a61d27;color:white;font-size:25px}main{max-width:1340px;margin:0 auto;padding:58px 50px 80px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.15em;color:#a61d27;text-transform:uppercase}.news,.article{padding:44px 0}.news-heading{display:flex;align-items:end;justify-content:space-between}.news-heading h2{font-size:32px;margin:0}.news-heading>a,.news-card span{color:#a61d27;text-decoration:none}.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}.news-card{padding:22px;border:1px solid #ddd;color:#222;text-decoration:none}.news-card h3{line-height:1.45}.news-card time{font-size:12px;color:#888}.empty{color:#888;padding:25px;border:1px solid #eee}.article h1{font-size:40px}.article .body{max-width:820px;line-height:1.9}.article .body img{max-width:100%;height:auto}footer{max-width:1340px;margin:auto;border-top:1px solid #ddd;padding:24px 50px;color:#777;font-size:13px}@media(max-width:760px){header nav{overflow:auto;justify-content:flex-start}header nav a{min-width:145px;font-size:11px}main{padding:32px 20px}.news-grid{grid-template-columns:1fr}.article h1{font-size:30px}}
.archive-list .news-heading h1{font-size:36px;margin:0}.archive-list .news-heading p{color:#777}.pagination{display:flex;align-items:center;justify-content:center;gap:24px;margin:32px 0}.pagination a{color:#a61d27;text-decoration:none;padding:10px 14px;border:1px solid #ddd}.article>time{color:#888;font-size:13px}.article>.body{margin-top:26px}.article>.body a{color:#a61d27}.article>.body figure{margin:24px 0}.article>.body figcaption{font-size:14px;color:#777;margin-top:8px}@media(max-width:760px){.archive-list .news-heading h1{font-size:30px}}
/* Homepage contest-results strip, matched to the legacy HKPPA front page. */
.featured-results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:-58px -50px 0;background:#050505;color:#f7f7f7}
.featured-result{display:block;min-width:0;background:#050505;color:#f7f7f7;text-decoration:none;transition:background .2s ease}
.featured-result:hover{background:#181818}
.featured-result img{display:block;width:100%;aspect-ratio:1.8;object-fit:cover;object-position:center}
.featured-result span{display:block;min-height:112px;padding:12px 14px 22px;font-size:19px;font-weight:350;line-height:1.5}
@media(max-width:900px){.featured-results{grid-template-columns:repeat(2,minmax(0,1fr))}.featured-result span{min-height:unset;font-size:16px}}
@media(max-width:760px){.featured-results{margin:-32px -20px 0;grid-template-columns:repeat(2,minmax(0,1fr))}.featured-result span{padding:10px;font-size:13px}}
/* Dropdown menus follow the live HKPPA navigation hierarchy. */
header nav{position:relative;z-index:20}
header nav .nav-group{position:relative;flex:1;min-width:0}
header nav .nav-parent{width:100%;height:54px;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 7px;font-size:12px}
header nav .nav-parent i{font-style:normal;font-size:10px;color:#ddd;flex:none}
header nav .nav-dropdown{display:none;position:absolute;top:100%;left:0;min-width:max(100%,225px);background:#a50910;box-shadow:0 8px 18px #0004;z-index:100}
header nav .nav-group:last-of-type .nav-dropdown{left:auto;right:0}
header nav .nav-group:hover .nav-dropdown,header nav .nav-group:focus-within .nav-dropdown{display:block}
header nav .nav-dropdown a{display:flex;min-width:0;align-items:center;justify-content:flex-start;gap:6px;padding:15px 17px;border:0;border-bottom:1px solid #b62229;background:#a50910;color:#fff;text-align:left;font-size:13px;line-height:1.35;white-space:normal}
header nav .nav-dropdown a:hover,header nav .nav-dropdown a:focus{background:#82000a}
header nav .nav-dropdown small{font-size:11px;color:#fff}
@media(max-width:760px){header nav{overflow-x:auto;overflow-y:hidden;justify-content:flex-start;scrollbar-width:none;overscroll-behavior-x:contain}header nav::-webkit-scrollbar{display:none}header nav .nav-group{flex:0 0 165px}header nav .nav-parent{min-width:0;font-size:11px}header nav .nav-dropdown{position:fixed;top:var(--mobile-dropdown-top,0px);left:var(--mobile-dropdown-left,8px);right:auto;bottom:auto;width:min(225px,calc(100vw - 16px));min-width:0;max-height:var(--mobile-dropdown-max-height,70vh);overflow-y:auto;overscroll-behavior:contain;z-index:1000}header nav .nav-dropdown a{min-width:0}}
/* Responsive navigation: keep the entire mobile frame visible and let menus overlay page content. */
header nav .nav-group{overflow:visible}
header nav .nav-parent-row{display:flex;align-items:stretch;width:100%;height:54px}
header nav .nav-parent-row>.nav-parent{flex:1;min-width:0;height:100%}
header nav .nav-toggle{display:flex;flex:0 0 28px;align-items:center;justify-content:center;padding:0;border:0;border-right:1px solid #1e1e1e;background:#050505;color:#ddd;font:inherit;cursor:pointer}
header nav .nav-toggle:hover,header nav .nav-toggle[aria-expanded="true"]{background:#171717;color:#fff}
header nav .nav-group:hover .nav-dropdown,header nav .nav-group:focus-within .nav-dropdown,header nav .nav-group.is-open .nav-dropdown{display:block}
@media(max-width:760px){
  header nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(60px,auto);overflow:visible;justify-content:initial;align-items:stretch;min-height:0;position:relative;z-index:20}
  header nav .nav-group{min-width:0;flex:none;border-right:1px solid #1e1e1e;border-bottom:1px solid #1e1e1e}
  header nav .nav-group:nth-of-type(3n){border-right:0}
  header nav .nav-parent-row{height:100%;min-height:60px}
  header nav .nav-parent{flex-direction:column;gap:3px;padding:7px 3px;font-size:12px;line-height:1.2;white-space:normal}
  header nav .nav-parent small{font-size:8px;line-height:1.2}
  header nav .nav-toggle{flex-basis:25px;border-right:0}
  header nav .search{grid-column:auto;min-width:0;min-height:60px;width:auto;flex:none;font-size:24px;border-bottom:1px solid #1e1e1e}
  header nav .nav-dropdown{position:absolute;top:100%;left:0;right:auto;bottom:auto;width:min(245px,calc(100vw - 16px));min-width:0;max-height:min(65vh,520px);overflow-y:auto;overscroll-behavior:contain;z-index:1000;transform:none}
  header nav .nav-group:nth-of-type(3n+2) .nav-dropdown{left:50%;right:auto;transform:translateX(-50%)}
  header nav .nav-group:nth-of-type(3n) .nav-dropdown{left:auto;right:0;transform:none}
  header nav .nav-dropdown a{min-width:0;padding:12px 14px;font-size:12px}
  header nav .nav-dropdown small{font-size:9px}
  header nav .nav-group:hover .nav-dropdown,header nav .nav-group:focus-within .nav-dropdown{display:none}
  header nav .nav-group.is-open .nav-dropdown{display:block}
}
.committee-table-wrap{width:100%;overflow-x:auto;margin:24px 0}.committee-table{min-width:680px;border-collapse:collapse;width:100%;font-size:16px}.committee-table th,.committee-table td{padding:12px 16px;border:1px solid #d8d8d8;text-align:left;vertical-align:top}.committee-table th{background:#f6f6f6;font-weight:700}.committee-table td:first-child{white-space:nowrap}.committee-table a{overflow-wrap:anywhere}.committee-updated{color:#666;margin-top:18px}
.membership-rules-confirm{max-width:820px;margin:36px 0 24px;padding:22px;background:#f5f5f2;border:1px solid #e5e5df;border-radius:8px}.membership-rules-confirm label{display:flex;align-items:flex-start;gap:12px;font-weight:600;cursor:pointer}.membership-rules-confirm input{width:20px;height:20px;flex:0 0 20px;margin:4px 0 0;accent-color:#a61d27}.membership-rules-confirm small{display:inline-block;margin-top:6px;color:#666;font-size:14px;font-weight:400}.membership-rules-confirm button{display:block;width:100%;margin-top:20px;padding:15px 20px;border:0;border-radius:5px;background:#a61d27;color:#fff;font:inherit;font-weight:700;cursor:pointer}.membership-rules-confirm button:hover{background:#861720}.membership-rules-confirm button:focus-visible,.membership-rules-confirm input:focus-visible{outline:3px solid #222;outline-offset:3px}.membership-rules-confirm button span{font-size:.88em;font-weight:500}@media(max-width:760px){.membership-rules-confirm{padding:18px 16px;margin-top:28px}.membership-rules-confirm button{padding:14px 12px}.membership-rules-confirm small{font-size:13px}}

/* Match the legacy desktop dropdown: compact red panel with bilingual labels on one line. */
header nav{display:flex;position:relative;overflow:visible;z-index:20}
header nav .nav-controls{display:contents}
header nav .nav-links{display:flex;flex:1;min-width:0}
header nav .nav-group{flex:1;min-width:0;overflow:visible}
header nav .nav-parent-row{position:relative;height:54px}
header nav .nav-parent-row>.nav-parent{height:54px;width:100%;padding:8px 30px 8px 8px;white-space:nowrap}
header nav .nav-parent-row>.nav-parent small{display:inline;font-size:11px}
header nav .nav-toggle{position:absolute;right:0;top:0;width:28px;height:54px;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:#eee;font:inherit;cursor:pointer}
header nav .nav-group:hover>.nav-parent-row,header nav .nav-group:focus-within>.nav-parent-row,header nav .nav-group.is-open>.nav-parent-row{background:#b32020}
header nav .nav-group:hover .nav-parent,header nav .nav-group:focus-within .nav-parent,header nav .nav-group.is-open .nav-parent{background:transparent;color:#fff}
header nav .nav-dropdown{display:none;position:absolute;top:100%;left:0;right:auto;width:200px;min-width:200px;max-height:none;overflow:visible;background:#b32020;box-shadow:none;z-index:1000}
header nav .nav-dropdown a{display:block;width:100%;min-width:0;padding:16px 12px;border:0;border-bottom:1px solid rgba(255,255,255,.18);background:#b32020;color:#fff;text-align:left;font-size:13px;line-height:1.3;white-space:normal}
header nav .nav-dropdown a:hover,header nav .nav-dropdown a:focus{background:#9e1717}
header nav .nav-dropdown small{display:inline;margin-left:4px;font-size:11px;line-height:inherit;color:#fff}
header nav .mobile-menu-toggle{display:none}
header nav .search{position:relative;display:flex;flex:0 0 55px;width:55px;height:54px;align-items:center;justify-content:center}
header nav .search-icon{position:relative;display:block;width:22px;height:22px}
header nav .search-icon:before{position:absolute;top:1px;left:1px;width:13px;height:13px;border:3px solid #fff;border-radius:50%;content:""}
header nav .search-icon:after{position:absolute;top:15px;left:16px;width:9px;height:3px;background:#fff;content:"";transform:rotate(45deg);transform-origin:left center}
.featured-carousel-controls{display:none}
@media(max-width:760px){
  header nav{display:flex;flex-direction:column;align-items:stretch;min-height:0;overflow:visible}
  header nav .nav-controls{display:flex;align-self:stretch;justify-content:flex-end;order:0;height:48px}
  header nav .search{flex:0 0 48px;width:48px;height:48px}
  header nav .mobile-menu-toggle{position:relative;display:block;flex:0 0 48px;width:48px;height:48px;padding:0;border:0;background:#050505;color:#fff;cursor:pointer}
  header nav .mobile-menu-toggle span,header nav .mobile-menu-toggle span:before,header nav .mobile-menu-toggle span:after{position:absolute;left:12px;width:24px;height:3px;background:#fff;content:""}
  header nav .mobile-menu-toggle span{top:22px}
  header nav .mobile-menu-toggle span:before{top:-8px;left:0}
  header nav .mobile-menu-toggle span:after{top:8px;left:0}
  header nav .nav-links{display:none;order:1;flex-direction:column;width:100%;background:#050505}
  header nav.mobile-open .nav-links{display:flex}
  header nav .nav-group{flex:none;width:100%;min-width:0;border:0;border-bottom:1px solid #333}
  header nav .nav-parent-row{height:auto;min-height:58px;border-top:1px solid #333}
  header nav .nav-parent-row>.nav-parent{display:flex;height:auto;min-height:58px;justify-content:flex-start;gap:8px;padding:12px 30px;white-space:normal;font-size:18px;line-height:1.35}
  header nav .nav-parent-row>.nav-parent small{display:inline;font-size:18px;line-height:inherit}
  header nav .nav-toggle{display:none}
  header nav .nav-dropdown,header nav .nav-group:hover .nav-dropdown,header nav .nav-group:focus-within .nav-dropdown,header nav .nav-group.is-open .nav-dropdown{position:static;display:block;width:100%;min-width:0;max-height:none;overflow:visible;transform:none;background:transparent;box-shadow:none}
  header nav .nav-dropdown a{width:100%;padding:10px 30px 10px 54px;border:0;border-top:1px solid #333;background:#050505;font-size:17px;line-height:1.4}
  header nav .nav-dropdown small{font-size:17px}
  header nav .nav-group:hover>.nav-parent-row,header nav .nav-group:focus-within>.nav-parent-row,header nav .nav-group.is-open>.nav-parent-row{background:transparent}
  header nav .nav-group:hover .nav-parent,header nav .nav-group:focus-within .nav-parent,header nav .nav-group.is-open .nav-parent{background:transparent}
  .featured-results{display:block;position:relative;margin:-32px -20px 0;overflow:hidden}
  .featured-result{display:none}
  .featured-result.is-active{display:block}
  .featured-result img{width:100%;aspect-ratio:1.8;object-fit:cover}
  .featured-result span{min-height:0;padding:24px 10px 20px;font-size:23px;font-weight:300;line-height:1.4}
  .featured-carousel-controls{display:block;background:#050505;color:#fff}
  .featured-carousel-dots{display:flex;align-items:center;justify-content:space-around;gap:10px;height:58px;padding:0 10px}
  .featured-carousel-dots button{width:12px;height:12px;padding:0;border:0;background:#505050;cursor:pointer}
  .featured-carousel-dots button[aria-current="true"]{background:#b32020}
  .featured-carousel-arrows{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding-top:8px;background:#fff}
  .featured-carousel-arrows button{height:48px;border:0;background:#050505;color:#fff;font-size:38px;line-height:1;cursor:pointer}
  .featured-carousel-arrows button:first-child{background:#b32020}
}
@media(max-width:760px){header nav .search{flex:0 0 48px;width:48px;height:48px;min-height:48px}}