/* Public-page skin only; original renderers, lightbox and game HUD stay intact. */
:root { color-scheme: dark; }
body.collection-theme { --bg-alt: rgba(255,255,255,.065);
  min-height: 100vh; isolation: isolate; color: var(--text);
}
.collection-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.collection-backdrop::after { content: ''; position: absolute; inset: 0; }
.collection-theme .page-nav { position: sticky; top: 0; z-index: 50; background: rgba(8,16,25,.64); border-color: var(--border); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.jh-nav { margin: 0 auto; display: flex; align-items: center; gap: 24px; font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
.jh-nav a { color: #d1dce7; text-decoration: none; }
.jh-nav .jh-nav__brand { color: #fff; font-weight: 750; padding-right: 10px; }
.jh-nav__links { display: flex; flex-wrap: wrap; }
.jh-nav__links a { transition: color .2s,background .2s,border-color .2s; }
.jh-nav__links a:hover,.jh-nav__links a[aria-current="page"] { color: white; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.15); }
.jh-nav a:focus-visible { outline: 2px solid #a5dcf5; outline-offset: 4px; }
.collection-theme .page-main,body.collection-theme[data-collection] .page-main { width: min(1440px,100%); max-width: 1440px; margin: 0 auto; padding: clamp(40px,7vh,80px) clamp(20px,5vw,72px) 110px; }
.collection-theme .page-hero { padding: 0 0 28px; border-bottom: 1px solid var(--border); animation: collection-enter .75s ease both; }
body.collection-theme[data-collection] .page-hero__title { font-size: clamp(40px,6vw,70px); letter-spacing: -.04em; }
body.collection-theme[data-collection] .page-hero__desc { color: var(--text-2); font-size: 14px; letter-spacing: .08em; }
.collection-theme .gallery-grid,body.collection-theme[data-collection="articles"] .gallery-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),240px)); }
body.collection-theme[data-collection="projects"] .gallery-grid { gap: 24px; }
.collection-theme .article-card,.collection-theme .project,.collection-theme .gallery-item,.collection-theme .article-detail,.collection-theme .err__card { background: rgba(15,26,39,.70); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 14px 45px rgba(0,0,0,.16); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.collection-theme .article-card,.collection-theme .project,.collection-theme .gallery-item { transition: transform .35s ease,border-color .35s ease,box-shadow .35s ease; }
.collection-theme .article-card:hover,.collection-theme .project:hover,.collection-theme .gallery-item:hover { transform: translateY(-6px); border-color: rgba(202,232,255,.42); box-shadow: 0 22px 60px rgba(0,0,0,.3); }
.collection-theme .project::after,.collection-theme .article-card::after,.collection-theme .gallery-item__media::after,.collection-theme .err__card::after { display: none; }
body.collection-theme[data-collection="projects"] .project { min-height: 0; }
body.collection-theme[data-collection="projects"] .project h3 { color: #f5f7fa; }
body.collection-theme[data-collection="projects"] .project p { color: var(--text-2); }

body.collection-theme[data-collection="articles"] .article-card__tag { font-size: 11px; padding: 3px 9px; }

.collection-theme .article-card__media { height: 40%; min-height: 0; flex-shrink: 0; aspect-ratio: auto; }
/* Collection-specific compact sizes; do not stretch a sparse row. */
body.collection-theme[data-collection] .gallery-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),280px)); gap:20px; align-items:start; }

body.collection-theme[data-collection] .gallery-grid > :is(.project,.article-card,.gallery-item) { box-sizing:border-box; position:relative; width:100%; min-height:0; margin:0; border-radius:14px; }
body.collection-theme[data-collection="projects"] .project { aspect-ratio:auto; }

body.collection-theme[data-collection="projects"] .project p { line-height:1.65; -webkit-line-clamp:2; }
/* Full-card cover; the scrim belongs to the image, never a text panel. */
body.collection-theme[data-collection="articles"] .article-card { aspect-ratio:auto; overflow:hidden; isolation:isolate; justify-content:flex-end; }
body.collection-theme[data-collection="articles"] .article-card__media { position:absolute; inset:0; height:100%; width:100%; aspect-ratio:auto; background:transparent; pointer-events:none; z-index:-1; }
body.collection-theme[data-collection="articles"] .article-card__media img { opacity:0; transition:opacity .3s ease,transform .6s ease; }
body.collection-theme[data-collection="articles"] .article-card.has-cover .article-card__media img { opacity:1; }
body.collection-theme[data-collection="articles"] .article-card.has-cover .article-card__media::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.42) 45%,rgba(0,0,0,.8)); }
body.collection-theme[data-collection="articles"] .article-card__body { flex:0 1 auto; min-height:0; overflow:hidden; padding:18px; gap:7px; background:transparent; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; text-shadow:0 1px 5px rgba(0,0,0,.85); }
body.collection-theme[data-collection="articles"] .article-card__title { color:#fff; background:transparent; line-height:1.4; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
body.collection-theme[data-collection="articles"] .article-card__date { color:#e6e7e9; background:transparent; font-size:12px; }
body.collection-theme[data-collection="articles"] .article-card__excerpt { color:#f0f0f2; background:transparent; font-size:13px; line-height:1.6; -webkit-line-clamp:2; }
body.collection-theme[data-collection="articles"] .article-card:focus-visible { outline:2px solid #d6f0ff; outline-offset:4px; }
body.collection-theme[data-collection="gallery"] .gallery-item { height:auto; aspect-ratio:auto; overflow:visible; background:transparent; border:0; box-shadow:none; backdrop-filter:none; }
.collection-theme .gallery-item__media { border-radius:14px; height:auto; aspect-ratio:4/3; }
.collection-theme .gallery-item__caption { position:static; background:none; padding:10px 3px 0; font-size:13px; }
.collection-theme .gallery-item__overlay { opacity:0; transform:translateY(6px); }
.collection-theme .gallery-item:hover .gallery-item__overlay { opacity:1; transform:translateY(0); }

.collection-theme .project:hover { transform:translateY(-9px); }
.collection-theme .gallery-item:hover { transform:none; box-shadow:none; }
.collection-theme .gallery-item:hover .gallery-item__media { transform:translateY(-10px); box-shadow:0 30px 64px #0004; }
@media(hover:none) { .collection-theme .gallery-item__overlay { opacity:1; transform:none; } }
.collection-theme .media-tab { background: rgba(12,23,36,.6); color: var(--text-2); }
.collection-theme .media-tab.is-active,.collection-theme .media-tab:hover { color: #fff; }
.collection-theme .article-detail { max-width: 850px; padding: clamp(24px,5vw,60px); overflow-wrap: anywhere; }
.collection-theme .article-detail:empty { display: none; }
.collection-theme .article-detail__title { line-height: 1.3; }
.collection-theme .article-detail__body { line-height: 1.9; }
.collection-theme .article-detail__body img,.collection-theme .article-detail__body video { max-width: 100%; height: auto; }
.collection-theme .article-detail__body table { display: block; max-width: 100%; overflow-x: auto; }
.collection-theme .article-detail__body pre { max-width: 100%; }
.collection-theme .article-detail__meta { color: var(--text-3); }
.collection-theme .site-load-error { padding: 24px; margin-bottom: 24px; border: 1px solid var(--border); border-radius: 18px; background: rgba(15,26,39,.8); }
body.collection-theme[data-collection="error"] .page-main { min-height: calc(100svh - 78px); }
.collection-theme .err__code { color: #d4edfc; background: none; animation: none; }

.collection-theme .btn--ghost { color: #e0eaf3; border-color: var(--border); background: rgba(255,255,255,.06); }
.collection-theme .reveal { opacity: 1; }
@keyframes collection-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* Game menus share the shell, not the game layout or controls. */
.collection-game #intro,.collection-game #menu { isolation: isolate; padding-top: 98px; }
.collection-game .jh-nav { position: absolute; top: 0; left: 0; right: 0; max-width: none; min-height: 72px; background: rgba(8,16,25,.6); border-bottom: 1px solid rgba(224,239,255,.16); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); touch-action: manipulation; }
.collection-game .intro-card { padding: clamp(22px,4vw,42px); border: 1px solid rgba(224,239,255,.16); border-radius: 24px; background: rgba(15,26,39,.74); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.collection-game #menu .card { background: rgba(15,26,39,.76); border-color: rgba(224,239,255,.2); border-radius: 20px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

@media(max-width:600px) {
 .jh-nav { min-height: 70px; padding: 12px 18px; gap: 10px; } .jh-nav__links { gap: 0; } .jh-nav__links a { font-size: 13px; padding: 8px 10px; }
 .collection-theme .gallery-item__overlay { opacity: 1; transform: none; }
 .collection-theme .page-hero--inline { align-items: stretch; }
 .collection-theme .article-detail { padding: 24px 20px; border-radius: 18px; }
 .collection-theme .article-detail__body p,.collection-theme .article-detail__body ul,.collection-theme .article-detail__body ol { font-size: 16px; }
 .collection-game .intro-card { padding: 22px 18px; } .collection-game #intro,.collection-game #menu { padding-top: 86px; }
}
@media(prefers-reduced-motion:reduce) {
 .collection-theme *, .collection-theme *::before, .collection-theme *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
 .collection-theme .article-card:hover,.collection-theme .project:hover,.collection-theme .gallery-item:hover,.collection-theme .gallery-item:hover img { transform: none; }
}
body.collection-theme[data-collection] .page-hero__title { font-weight: 750; }
.jh-nav .jh-nav__brand { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 2px solid #fff; border-radius: 10px 3px 10px 3px; font-size: 16px; letter-spacing: -1px; transform: skewY(-5deg); }
.jh-nav__brand > span { display: none; }
/* Match the homepage: right-aligned text without a navigation surface. */
.collection-theme .page-nav, .collection-game .jh-nav { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.jh-nav { width: 100%; max-width: none; min-height: 84px; padding: 16px 4vw; justify-content: flex-end; }
.jh-nav__links { gap: 28px; }
.jh-nav__links a { position: relative; padding: 0; border: 0; border-radius: 0; color: #fff; font-size: 16px; font-weight: 600; background: transparent; }
.jh-nav__links a:hover, .jh-nav__links a[aria-current="page"] { background: transparent; border: 0; }
.jh-nav__links a::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.jh-nav__links a:hover::after, .jh-nav__links a[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 900px) { .jh-nav { padding-inline: 5vw; } .jh-nav__links { gap: 20px; } .jh-nav__links a { font-size: 14px; } }
@media (max-width: 640px) { .jh-nav { min-height: 70px; padding: 15px 6vw; } .jh-nav__links { gap: 18px; } .jh-nav__links a { padding: 6px 0; font-size: 13px; } }
.jh-nav__links a[aria-current="page"]::after { transform: scaleX(0); }
.jh-nav__links a:hover::after, .jh-nav__links a:focus-visible::after { transform: scaleX(1); }
.collection-backdrop video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.collection-theme .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
body.collection-theme[data-collection] .page-hero__desc { margin-top:0; }
/* Medium cards, cool-tinted glass and a perimeter-only travelling highlight. */
.collection-theme .project::after,.collection-theme .gallery-item__media::after { display:none; }
@property --card-orbit { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes card-orbit { to { --card-orbit: 360deg; } }

.collection-theme :is(.project,.article-card) { background:rgba(35,37,40,.48); border-color:rgba(235,237,240,.22); }

.collection-theme :is(.project,.article-card,.gallery-item__media)::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:2px; background:conic-gradient(from var(--card-orbit),transparent 0deg,#2684ff 65deg,#fff 105deg,transparent 145deg); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; opacity:0; z-index:5; transition:opacity .25s; }
.collection-theme :is(.project,.article-card):is(:hover,:focus-visible)::before,.collection-theme .gallery-item:is(:hover,:focus-visible) .gallery-item__media::before { opacity:1; animation:card-orbit 2.4s linear infinite; }
.collection-theme :is(.project,.article-card):is(:hover,:focus-visible) { transform:translateY(-6px) scale(1.035); box-shadow:0 18px 45px #060d2270,0 0 25px #1677ff33; }
.collection-theme .gallery-item:is(:hover,:focus-visible) .gallery-item__media { transform:translateY(-6px) scale(1.035); }
@media(prefers-reduced-motion:reduce) { .collection-theme :is(.project,.article-card,.gallery-item__media)::before { animation:none!important; } .collection-theme :is(.project,.article-card):hover,.collection-theme .gallery-item:hover .gallery-item__media { transform:none; } }
/* One size up across all three collections; narrow screens never overflow. */
body.collection-theme[data-collection="projects"] { --collection-card-width:calc((100% - 60px) / 4); }
body.collection-theme[data-collection="projects"] .project { height:150px; padding:21px 22px; }
body.collection-theme[data-collection="projects"] .project h3 { font-size:18px; }
body.collection-theme[data-collection="projects"] .project p { font-size:14px; }
body.collection-theme[data-collection="articles"] { --collection-card-width:calc((100% - 80px) / 5); }
body.collection-theme[data-collection="articles"] .article-card { height:285px; }
body.collection-theme[data-collection="articles"] .article-card__title { font-size:20px; }
/* Fixed desktop counts; fill every row from the left without stretching cards. */
body.collection-theme[data-collection="gallery"] { --collection-card-width:calc((100% - 40px) / 3); }
body.collection-theme:is([data-collection="projects"],[data-collection="articles"],[data-collection="gallery"]) .gallery-grid { display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; gap:20px; }
body.collection-theme[data-collection] .gallery-grid > :is(.project,.article-card,.gallery-item) { flex:0 0 var(--collection-card-width); width:var(--collection-card-width); min-width:0; }
@media(max-width:1100px) {
  body.collection-theme:is([data-collection="articles"],[data-collection="projects"]) { --collection-card-width:calc((100% - 40px) / 3); }
}
@media(max-width:800px) {
  body.collection-theme:is([data-collection="articles"],[data-collection="projects"],[data-collection="gallery"]) { --collection-card-width:calc((100% - 20px) / 2); }
}
@media(max-width:520px) {
  body.collection-theme:is([data-collection="articles"],[data-collection="projects"],[data-collection="gallery"]) { --collection-card-width:100%; }
}
/* Black / white / blue only; content photos and videos keep their original colors. */
body.collection-theme { --bg:#050505; --bg-soft:#111; --text:#fff; --text-2:#ffffffcf; --text-3:#ffffff99; --accent:#2684ff; --accent-strong:#fff; --accent-soft:#1677ff24; --border:#ffffff2b; --on-accent:#000; background:#050505; }
.collection-backdrop { background:radial-gradient(ellipse at 75% 10%,#1677ff30,transparent 60%),#050505; }
.collection-backdrop::after { background:linear-gradient(180deg,#0004,#000a 65%,#000d); }
.collection-theme .media-tab.is-active,.collection-theme .media-tab:hover { background:#1677ff30; border-color:#2684ff; }
.collection-theme :focus-visible { outline-color:#2684ff; }
.collection-theme .btn--primary { background:#2684ff; color:#fff; }
.collection-theme .gallery-item__media { background:#111; }
/* Reading surface floats over the same video configured for the article collection. */
body.article-reading .article-detail { background:linear-gradient(135deg,#ffffff14,transparent 45%,#ffffff08); border:1px solid #ffffff50; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); box-shadow:inset 0 1px 0 #ffffff80,inset 1px 0 0 #ffffff24,inset 0 -1px 0 #ffffff20,0 18px 45px #0004; }
body.article-reading .article-detail__body { color:#fff; text-shadow:0 1px 3px #0009; }
body.article-reading .article-detail__body p,body.article-reading .article-detail__body ul,body.article-reading .article-detail__body ol { color:#ffffffe6; }
/* CSS liquid-glass approximation: clear center, reflective rim, low background blur. */
body.collection-theme[data-collection="projects"] .project { background:linear-gradient(135deg,#ffffff18,transparent 42%,#ffffff08); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); border-color:#ffffff50; box-shadow:inset 0 1px 0 #ffffff80,inset 1px 0 0 #ffffff28,inset 0 -1px 0 #ffffff22,0 10px 30px #0003; }
body.collection-theme[data-collection="projects"] .project:is(:hover,:focus-visible) { background:linear-gradient(135deg,#ffffff24,transparent 45%,#1677ff0c); border-color:#ffffff99; box-shadow:inset 0 1px 1px #ffffffa0,inset 0 -1px 0 #ffffff38,0 16px 40px #0005,0 0 22px #1677ff30; }