@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600&family=DM+Mono:wght@400;500&family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;600&family=Noto+Serif+SC:wght@400;500;600&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');

@font-face { font-family:"CKY Editorial CJK"; src:local("STSong"),local("华文宋体"),local("SimSun"),local("宋体"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"CKY Tech CJK"; src:local("Noto Sans SC"),local("Microsoft YaHei UI"),local("Microsoft YaHei"); font-weight:100 900; font-style:normal; font-display:swap; }

:root { --paper:#ebe8e1; --ink:#161616; --muted:#77746e; --line:#c9c4bb; --red:#cc3a39; --white:#f7f5f0; --sidebar:27vw; --editorial-serif:"DM Serif Display","Noto Serif SC","CKY Editorial CJK","STSong","Songti SC","SimSun",serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,"Microsoft YaHei",sans-serif; font-size:15px; }
body.modal-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.11; z-index:20; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
.site-header { display:none; }
.sidebar { position:fixed; top:0; left:0; bottom:0; width:var(--sidebar); padding:42px 42px 36px; display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid var(--line); z-index:10; background:rgba(235,232,225,.9); backdrop-filter:blur(14px); }
.wordmark { position:absolute; top:39px; right:42px; font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.12em; }
.wordmark i { display:inline-block; width:7px; height:7px; margin-left:8px; border-radius:50%; background:var(--red); }
.eyebrow { margin:0; font:500 10px/1.3 "DM Mono",monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.eyebrow.red,.red { color:var(--red); }
.sidebar h1 { margin:38px 0 12px; font-family:var(--editorial-serif); font-size:clamp(46px,6vw,84px); font-weight:400; letter-spacing:-.055em; line-height:.9; }
.sidebar-copy { max-width:190px; margin:0; font-family:var(--editorial-serif); font-size:18px; line-height:1.38; }
.primary-nav { display:flex; flex-direction:column; gap:15px; }
.primary-nav a { display:flex; justify-content:space-between; align-items:center; padding-bottom:10px; border-bottom:1px solid transparent; font-size:13px; color:var(--muted); transition:.25s; }
.primary-nav a span { font:10px "DM Mono",monospace; }
.primary-nav a:hover,.primary-nav a.active { color:var(--ink); border-color:var(--ink); }
.nav-work-group { display:flex; flex-direction:column; }
.group-subnav { display:flex; flex-direction:column; gap:0; margin:7px 0 2px 10px; padding-left:10px; border-left:1px solid var(--line); max-height:230px; overflow:auto; scrollbar-width:none; }
.group-subnav::-webkit-scrollbar { display:none; }
.group-subnav button { display:grid; grid-template-columns:1fr auto; gap:9px; width:100%; padding:3px 0; border:0; background:transparent; color:var(--muted); text-align:left; cursor:pointer; font:11px/1.18 Inter,"Microsoft YaHei",sans-serif; transition:color .2s,transform .2s; }
.group-subnav button b { overflow:hidden; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.group-subnav button span { opacity:.55; }
.group-subnav button:hover,.group-subnav button.is-active { color:var(--group-color,var(--red)); transform:translateX(3px); }
.primary-nav a.tool-link { margin-top:10px; padding-top:16px; border-top:1px solid var(--line); border-bottom:0; color:var(--red); }
.sidebar-bottom { display:flex; flex-direction:column; gap:5px; font:11px/1.5 "DM Mono",monospace; color:var(--muted); }
.sidebar-bottom p { margin:0 0 12px; }
.main-content { margin-left:var(--sidebar); overflow:hidden; }
.hero-section { min-height:100vh; padding:72px 6vw 64px; display:grid; grid-template-columns:.82fr 1.18fr; gap:5vw; align-items:center; }
.hero-copy h2 { margin:26px 0 24px; font:400 clamp(74px,9.5vw,166px)/.79 var(--editorial-serif); letter-spacing:-.07em; }
.hero-copy h2 em,.about-statement em,.site-footer h2 em { color:var(--red); font-style:italic; }
.hero-lede { margin:0; font-size:15px; line-height:1.85; color:#4f4c46; }
.scroll-cue { display:inline-flex; align-items:center; gap:14px; margin-top:70px; font:11px "DM Mono",monospace; color:var(--muted); }
.scroll-cue b { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--ink); font-size:16px; font-weight:400; }
.hero-collage { position:relative; min-height:570px; }
.hero-tile { position:absolute; margin:0; box-shadow:14px 18px 40px rgba(20,18,15,.18); transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.hero-tile:hover { transform:translateY(-10px) rotate(0deg) !important; }
.hero-tile img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(1.04); }
.hero-tile figcaption { position:absolute; left:14px; bottom:12px; color:#fff; font:9px "DM Mono",monospace; letter-spacing:.12em; text-shadow:0 1px 4px #000; }
.tile-a { width:41%; height:58%; left:6%; top:4%; transform:rotate(-4deg); z-index:2; }
.tile-b { width:41%; height:57%; right:2%; top:14%; transform:rotate(5deg); z-index:1; }
.tile-c { width:42%; height:43%; left:28%; bottom:4%; transform:rotate(-2deg); z-index:3; }
.profile-section { position:relative; min-height:92vh; overflow:hidden; padding:88px 6vw 98px; border-top:1px solid #393632; background:#171717; color:var(--white); }
.profile-section::before { content:"CKY"; position:absolute; right:-.035em; bottom:-.18em; color:#ffffff05; font:400 clamp(190px,31vw,520px)/.8 "DM Serif Display",serif; letter-spacing:-.09em; pointer-events:none; }
.profile-index { position:relative; z-index:1; display:flex; justify-content:space-between; gap:20px; padding-bottom:17px; border-bottom:1px solid #47433e; color:#8f8a82; font:9px "DM Mono",monospace; letter-spacing:.14em; }
.profile-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(230px,.52fr); gap:6vw; align-items:end; padding-top:54px; }
.profile-role { margin:0 0 22px; color:var(--red); font:10px "DM Mono",monospace; letter-spacing:.13em; }
.profile-copy h2 { margin:0; font:400 clamp(48px,5vw,82px)/.9 var(--editorial-serif); letter-spacing:-.06em; }
.profile-copy h2 em { color:var(--red); font-style:italic; }
.profile-intro { max-width:760px; margin:42px 0 0; color:#c7c2ba; font:15px/1.9 Inter,"Microsoft YaHei",sans-serif; }
.profile-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; max-width:790px; margin-top:44px; padding-top:24px; border-top:1px solid #47433e; }
.profile-facts article { display:flex; flex-direction:column; gap:7px; }
.profile-facts b { color:var(--red); font:500 10px "DM Mono",monospace; letter-spacing:.1em; }
.profile-facts span { color:#f1eee9; font-size:13px; line-height:1.45; }
.profile-facts small { color:#858078; font:9px/1.55 "DM Mono",monospace; }
.profile-skills { display:flex; flex-wrap:wrap; gap:7px; margin-top:30px; }
.profile-skills span { padding:7px 9px 6px; border:1px solid #4b4741; color:#aaa59d; font:9px "DM Mono",monospace; }
.profile-links { display:flex; gap:24px; margin-top:37px; }
.profile-links a { padding-bottom:6px; border-bottom:1px solid currentColor; color:#f1eee9; font:10px "DM Mono",monospace; letter-spacing:.06em; transition:color .2s,transform .2s; }
.profile-links a:hover { color:var(--red); transform:translateY(-2px); }
.profile-portrait { width:min(100%,350px); margin:0; justify-self:end; align-self:center; }
.profile-portrait > div { position:relative; overflow:hidden; aspect-ratio:4/5; border:1px solid #44403b; background:#d7d4cf; }
.profile-portrait > div::after { content:""; position:absolute; inset:10px; border:1px solid #ffffff38; pointer-events:none; }
.profile-portrait img { width:100%; height:100%; display:block; object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.04); transition:filter .5s,transform .7s cubic-bezier(.2,.8,.2,1); }
.profile-portrait:hover img { filter:grayscale(.15) contrast(1.02); transform:scale(1.025); }
.profile-portrait figcaption { display:flex; justify-content:space-between; gap:12px; padding-top:10px; color:#77736c; font:8px "DM Mono",monospace; letter-spacing:.08em; }
.work-section,.about-section { padding:105px 6vw 120px; border-top:1px solid var(--line); }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:44px; }
.section-head h2 { margin:15px 0 0; font:400 clamp(36px,4.4vw,68px)/1 var(--editorial-serif); letter-spacing:-.05em; }
.section-note { max-width:230px; margin:0; font-size:12px; line-height:1.6; color:var(--muted); }
.filters { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:36px; }
.filter { border:1px solid var(--line); border-radius:99px; padding:9px 14px 8px; background:transparent; cursor:pointer; font:11px "DM Mono",monospace; color:var(--muted); transition:.2s; }
.filter span { margin-left:5px; font-size:9px; opacity:.65; }
.filter:hover,.filter.is-selected { background:var(--group-color,var(--ink)); border-color:var(--group-color,var(--ink)); color:var(--paper); }
.project-grid { display:flex; flex-direction:column; }
.group-divider { display:grid; grid-template-columns:auto 1fr auto; align-items:end; gap:14px; margin-top:32px; padding:13px 14px 10px; border-top:3px solid var(--group-color); border-bottom:1px solid color-mix(in srgb,var(--group-color) 36%,var(--line)); background:linear-gradient(90deg,color-mix(in srgb,var(--group-color) 12%,transparent),transparent 55%); }
.group-divider:first-child { margin-top:0; }
.group-divider.is-hidden { display:none; }
.group-divider span,.group-divider small { color:var(--group-color); font:9px "DM Mono",monospace; letter-spacing:.08em; }
.group-divider strong { color:var(--ink); font:400 24px/1 var(--editorial-serif); }
.project-card { position:relative; z-index:0; display:grid; grid-template-columns:minmax(165px,24%) minmax(220px,1fr) minmax(280px,38%); gap:18px; align-items:center; padding:28px 10px 28px 14px; border-top:1px solid var(--line); border-left:3px solid var(--group-color); background:linear-gradient(90deg,color-mix(in srgb,var(--group-color) 5%,transparent),transparent 34%); cursor:pointer; transform:translateZ(0); transform-origin:center; transition:transform .48s cubic-bezier(.2,.75,.2,1),box-shadow .48s cubic-bezier(.2,.75,.2,1),background-color .35s; will-change:transform; }
.project-card:last-child { border-bottom:1px solid var(--line); }
.project-card.is-hidden { display:none; }
.card-visual { position:relative; aspect-ratio:16 / 10; overflow:hidden; background:#272624; }
.card-visual img { width:100%; height:100%; display:block; object-fit:contain; background:#171717; filter:saturate(.82); transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s; }
.project-card:hover .card-visual img { transform:scale(1.045); filter:saturate(1); }
.card-index { position:absolute; left:14px; top:13px; color:#fff; font:10px "DM Mono",monospace; mix-blend-mode:screen; }
.card-play { position:absolute; right:14px; bottom:14px; width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.7); border-radius:50%; color:#fff; font-size:13px; opacity:.9; }
.card-copy { min-width:0; display:grid; grid-template-columns:1fr auto; gap:10px; }
.card-copy > div { min-width:0; }
.card-copy h3 { width:100%; max-width:100%; margin:12px 0 0; font:400 clamp(28px,3vw,45px)/1.02 var(--editorial-serif); letter-spacing:-.045em; white-space:nowrap; }
.card-copy p { margin:6px 0 0; font:10px "DM Mono",monospace; color:var(--muted); }
.card-copy .card-description {
  max-width:470px; max-height:7em; margin-top:18px; overflow-y:hidden;
  white-space:pre-line; overscroll-behavior:contain; scrollbar-width:none;
  font:12px/1.7 Inter,"Microsoft YaHei",sans-serif; color:#6c6861;
}
.card-copy .card-description::-webkit-scrollbar { display:none; }
.card-kicker { display:block; color:var(--group-color,var(--red)); font:10px "DM Mono",monospace; letter-spacing:.08em; }
.card-type { font:10px "DM Mono",monospace; color:var(--group-color,var(--red)); text-align:right; }
.card-frames { min-width:0; align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
.frames-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.frames-label { display:block; color:var(--muted); font:9px "DM Mono",monospace; letter-spacing:.08em; }
.frames-explore { flex:0 0 auto; color:var(--red); font:8px "DM Mono",monospace; letter-spacing:.08em; opacity:.75; }
.card-frame-strip { display:flex; align-items:stretch; gap:9px; min-width:0; overflow-x:auto; overflow-y:hidden; padding:4px 3px 10px; scrollbar-width:none; scroll-behavior:auto; overscroll-behavior-inline:contain; }
.card-frame-strip::-webkit-scrollbar { display:none; }
.card-frame-button { position:relative; flex:0 0 auto; height:clamp(82px,7.2vw,116px); width:max-content; min-width:0; padding:0; border:0; overflow:hidden; background:transparent; color:#fff; cursor:pointer; scroll-snap-align:start; }
.card-frame-strip img { width:auto; height:100%; max-width:none; max-height:none; display:block; object-fit:contain; background:transparent; filter:saturate(.72); transition:filter .25s,transform .35s; }
.card-frame-button > span { position:absolute; inset:auto 4px 4px; overflow:hidden; color:#fff; font:7px/1.2 "DM Mono",monospace; text-align:left; text-overflow:ellipsis; white-space:nowrap; opacity:0; transform:translateY(3px); transition:.25s; text-shadow:0 1px 4px #000; }
.card-frame-button:hover > span { opacity:1; transform:none; }
.card-frame-button:hover img { transform:scale(1.025); }
.project-card:hover .card-frame-strip img { filter:saturate(1); }
@media (hover:hover) and (pointer:fine) {
  .project-card:hover,.project-card.is-pointer-over { z-index:2; transform:translateY(-2px) scale(1.012); box-shadow:0 15px 34px rgba(24,21,17,.10); background-color:color-mix(in srgb,var(--group-color) 5%,var(--paper)); }
  .project-card:hover .card-frame-strip img,.project-card.is-pointer-over .card-frame-strip img { filter:saturate(1); }
  .project-card.is-pointer-over .card-visual img { transform:scale(1.045); filter:saturate(1); }
}
.about-section { background:#171717; color:var(--white); border-color:#393632; }
.about-section .eyebrow,.about-section .section-note { color:#9a958c; }
.about-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:9vw; }
.about-statement { font:400 clamp(44px,6.3vw,100px)/.95 var(--editorial-serif); letter-spacing:-.06em; }
.about-details { align-self:end; max-width:480px; }
.about-details > p { margin:0; font-size:14px; line-height:1.85; color:#c2beb7; }
.skill-list { display:flex; flex-wrap:wrap; gap:8px; margin:34px 0 42px; }
.skill-list span { padding:8px 10px; border:1px solid #45413c; font:10px "DM Mono",monospace; color:#bcb7ae; }
.timeline { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding-top:18px; border-top:1px solid #45413c; }
.timeline div { display:flex; flex-direction:column; gap:7px; }
.timeline b { color:var(--red); font:10px "DM Mono",monospace; }
.timeline span { color:#aaa59b; font-size:11px; line-height:1.55; }
.site-footer { padding:125px 6vw 35px; display:grid; grid-template-columns:1fr auto; gap:80px; position:relative; }
.site-footer h2 { margin:20px 0 0; font:400 clamp(57px,7.5vw,120px)/.86 var(--editorial-serif); letter-spacing:-.07em; }
.footer-contact { display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; gap:8px; font:12px "DM Mono",monospace; }
.footer-contact a:first-child { color:inherit; }
.footer-meta { grid-column:1/-1; display:flex; justify-content:space-between; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font:10px "DM Mono",monospace; }
.project-modal { position:fixed; inset:0; display:none; z-index:30; }
.project-modal.is-open { display:block; }
.modal-backdrop { position:absolute; inset:0; background:rgba(20,19,18,.76); backdrop-filter:blur(10px); }
.modal-panel { position:absolute; inset:4vh 4vw; overflow:auto; padding:44px 5vw 55px; background:var(--paper); animation:rise .4s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.modal-close { position:absolute; top:18px; right:22px; width:38px; height:38px; border:1px solid var(--line); background:transparent; border-radius:50%; cursor:pointer; font-size:26px; line-height:1; }
.modal-header { max-width:850px; margin-bottom:35px; }
.modal-header h2 { margin:17px 0 12px; font:400 clamp(46px,5.7vw,88px)/.9 var(--editorial-serif); letter-spacing:-.06em; }
.modal-header > p:not(.eyebrow) { max-width:650px; margin:0; color:#5f5b54; font-size:14px; line-height:1.8; white-space:pre-line; }
.modal-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.modal-tags span { padding:6px 8px; border:1px solid var(--line); font:10px "DM Mono",monospace; }
.series-switcher { display:none; flex-wrap:wrap; gap:8px; margin:0 0 24px; padding:12px; border:1px solid var(--line); background:rgba(255,255,255,.22); }
.series-switcher.is-visible { display:flex; }
.series-chip { border:1px solid var(--line); background:transparent; color:var(--muted); padding:9px 11px; cursor:pointer; font:10px "DM Mono",monospace; transition:.2s; }
.series-chip span { display:block; margin-top:4px; font-family:Inter,"Microsoft YaHei",sans-serif; font-size:11px; color:var(--ink); }
.series-chip:hover,.series-chip.is-active { border-color:var(--red); color:var(--red); }
.series-chip.is-active span { color:var(--ink); }
.modal-media { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(180px,.55fr); gap:18px; align-items:start; }
.video-wrap { position:relative; background:#131313; aspect-ratio:16/9; overflow:hidden; cursor:pointer; }
.video-wrap video { width:100%; height:100%; display:block; object-fit:contain; opacity:0; transition:opacity .35s; }
.video-wrap.is-playing video { opacity:1; }
.video-wrap iframe { position:absolute; z-index:3; inset:0; display:none; width:100%; height:100%; border:0; background:#030406; }
.video-wrap.is-external-playing iframe { display:block; }
.modal-cover { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; transition:opacity .35s; }
.video-wrap.is-playing .modal-cover,.video-wrap.is-playing .cover-play,.video-wrap.is-external-playing .modal-cover,.video-wrap.is-external-playing .cover-play { opacity:0; pointer-events:none; }
.cover-play { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:64px; height:64px; border:1px solid rgba(255,255,255,.9); border-radius:50%; background:rgba(15,15,15,.35); color:#fff; cursor:pointer; font-size:18px; transition:transform .25s,background .25s,opacity .35s; }
.cover-play:hover { transform:translate(-50%,-50%) scale(1.08); background:var(--red); }
.video-placeholder { position:absolute; inset:0; display:grid; place-items:center; color:#aaa; font:11px "DM Mono",monospace; pointer-events:none; }
.video-wrap.loaded .video-placeholder { display:none; }
.frame-panel { min-width:0; }
.frame-panel-head { display:flex; flex-direction:column; gap:7px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.frame-panel-head span { color:var(--red); font:10px "DM Mono",monospace; letter-spacing:.12em; }
.frame-panel-head small { color:var(--muted); font-size:11px; line-height:1.5; }
.frame-rail { display:grid; grid-template-columns:repeat(2,1fr); gap:13px 10px; padding-top:14px; }
.frame-button { padding:0; border:0; background:transparent; cursor:pointer; text-align:left; }
.frame-button img { width:100%; height:auto; max-height:260px; aspect-ratio:auto; object-fit:contain; display:block; background:#171717; filter:saturate(.7); opacity:.72; transition:.3s; }
.frame-button:hover img,.frame-button.is-active img { filter:saturate(1); outline:2px solid var(--red); outline-offset:3px; }
.frame-button.is-active img { opacity:1; }
.frame-button span { display:block; padding-top:6px; color:var(--muted); font:9px "DM Mono",monospace; }
.modal-meta { display:flex; flex-wrap:wrap; gap:22px; margin-top:25px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font:10px "DM Mono",monospace; }
@media (max-width:1100px) { :root { --sidebar:31vw; } .sidebar { padding:32px 28px; } .wordmark { right:28px; } .hero-section { grid-template-columns:1fr; padding-top:140px; } .hero-collage { min-height:520px; max-width:720px; width:100%; } .profile-grid { grid-template-columns:minmax(0,1fr) minmax(210px,.46fr); gap:4vw; } }
@media (max-width:720px) { .site-header { display:flex; position:fixed; z-index:25; inset:0 0 auto; height:64px; padding:20px; justify-content:space-between; background:rgba(235,232,225,.92); border-bottom:1px solid var(--line); } .site-header .wordmark { position:static; } .menu-toggle { border:0; background:transparent; display:grid; gap:5px; padding:5px; } .menu-toggle span { display:block; width:22px; height:1px; background:var(--ink); } .sidebar { transform:translateX(-100%); width:min(84vw,330px); padding:92px 28px 28px; transition:transform .35s; box-shadow:10px 0 40px #0002; } .sidebar.is-open { transform:none; } .wordmark { display:none; } .main-content { margin-left:0; } .hero-section { min-height:auto; padding:124px 22px 72px; gap:20px; } .hero-copy h2 { font-size:22vw; } .hero-collage { min-height:400px; } .profile-section { min-height:auto; padding:76px 22px 82px; } .profile-index { align-items:flex-start; flex-direction:column; gap:7px; } .profile-grid { display:flex; flex-direction:column; gap:46px; padding-top:38px; } .profile-copy h2 { font-size:11vw; } .profile-intro { margin-top:30px; font-size:14px; } .profile-facts { grid-template-columns:1fr; gap:20px; margin-top:34px; } .profile-portrait { width:min(76vw,320px); align-self:flex-end; } .work-section,.about-section { padding:76px 22px 82px; } .section-head { display:block; margin-bottom:30px; } .section-note { margin-top:14px; } .project-card,.project-card:nth-child(n) { display:grid; grid-template-columns:1fr; gap:16px; padding:28px 0; } .card-visual { aspect-ratio:16/10; } .card-copy { display:block; } .card-copy h3 { font-size:34px; } .card-copy .card-description { max-width:none; margin-top:14px; } .card-type { display:none; } .card-frames { display:block; } .card-frame-strip { grid-template-columns:repeat(3,1fr); max-width:430px; } .about-grid { display:block; } .about-details { margin-top:46px; } .about-statement { font-size:17vw; } .site-footer { display:block; padding:82px 22px 28px; } .footer-contact { align-items:flex-start; margin-top:50px; } .footer-meta { margin-top:72px; } .modal-panel { inset:0; padding:82px 20px 35px; } .modal-media { display:block; } .frame-rail { grid-template-columns:repeat(3,1fr); margin-top:18px; } .frame-panel { margin-top:22px; } .modal-header h2 { font-size:15vw; } }
@media (max-width:1100px) and (min-width:721px) { .project-card { grid-template-columns:minmax(155px,23%) minmax(190px,1fr) minmax(255px,39%); gap:15px; } }
@media (max-width:720px) { .card-frame-strip { display:flex; gap:8px; width:100%; max-width:none; overflow-x:auto; } .card-frame-button { height:94px; } .frames-explore { display:none; } }
@media (prefers-reduced-motion:reduce) { .project-card,.card-visual img,.card-frame-strip img { transition:none !important; } .project-card:hover,.project-card.is-pointer-over { transform:none !important; } }

/* DIGITAL FASHION LAB / MASTER SYSTEM */
:root { --paper:#08090c; --ink:#f1f2f5; --muted:#8b8f9a; --line:#2a2d35; --red:#553cff; --accent:#553cff; --accent-bright:#6d58ff; --white:#f5f6f8; --panel:#0d0f13; --panel-soft:#111319; --display:"Barlow Condensed","Noto Sans SC","CKY Tech CJK","Microsoft YaHei UI",sans-serif; --editorial-serif:var(--display); }
html { background:#08090c; scrollbar-color:var(--accent) #0b0c10; }
body { color:var(--ink); background:#08090c; font-family:Inter,"Noto Sans SC","Microsoft YaHei",sans-serif; }
body::before { content:""; position:fixed; z-index:-1; inset:0; background:radial-gradient(circle at 68% 18%,rgba(85,60,255,.12),transparent 27%),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:auto,36px 36px,36px 36px; }
::selection { background:var(--accent); color:#fff; }
.grain { opacity:.13; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E"); background-size:72px 72px,72px 72px,180px 180px; mix-blend-mode:screen; }
.sidebar { border-color:#2d3038; background:rgba(7,8,11,.94); backdrop-filter:blur(18px); }
.sidebar::after { content:"SYS / 00\A LAT 24.4798° N\A LON 118.0894° E"; white-space:pre; position:absolute; top:42px; right:22px; color:#555966; font:7px/1.55 "DM Mono",monospace; text-align:right; letter-spacing:.08em; }
.sidebar h1 { margin-top:48px; font-family:var(--display); font-size:clamp(48px,5vw,76px); font-weight:500; letter-spacing:-.045em; line-height:.86; text-transform:uppercase; }
.sidebar-copy { border-left:2px solid var(--accent); padding-left:12px; font-family:"CKY Tech CJK","Noto Sans SC",sans-serif; font-size:13px; line-height:1.65; color:#9c9fa9; }
.primary-nav a { padding:11px 0; border-color:#282b33; font:10px "DM Mono",monospace; letter-spacing:.04em; text-transform:uppercase; }
.primary-nav a:hover,.primary-nav a.active { border-color:var(--accent); color:#fff; }
.primary-nav a.active::before { content:none; }
.group-subnav { border-left-color:#343741; }
.group-subnav button { color:#6f737e; font:9px/1.25 "DM Mono",monospace; }
.group-subnav button:hover,.group-subnav button.is-active { color:var(--accent-bright); }
.primary-nav a.tool-link { color:var(--accent-bright); border-top-color:#2c2f37; }
.sidebar-bottom { color:#626671; }
.main-content { border-left:1px solid #20232a; }
.eyebrow { color:#777b86; font-size:9px; letter-spacing:.18em; }
.eyebrow.red,.red { color:var(--accent-bright); }
.hero-section { position:relative; isolation:isolate; min-height:100vh; grid-template-columns:.72fr 1.28fr; gap:3.4vw; padding:68px 4.5vw 52px; border-bottom:1px solid #2e3139; background:linear-gradient(90deg,rgba(7,8,11,.98) 0 35%,rgba(15,17,22,.84) 35% 100%); }
.hero-section::before { content:"SYSTEMS RESEARCH / 2026"; position:absolute; left:4.5vw; bottom:24px; color:#515560; font:7px "DM Mono",monospace; letter-spacing:.15em; }
.hero-section::after { content:"01"; position:absolute; right:4.5vw; top:50px; color:transparent; -webkit-text-stroke:1px #3a3d47; font:500 clamp(110px,13vw,230px)/1 var(--display); opacity:.55; pointer-events:none; }
.hero-copy { position:relative; z-index:4; }
.hero-copy h2 { margin:28px 0 26px; font-family:var(--display); font-size:clamp(78px,8.2vw,148px); font-weight:500; line-height:.73; letter-spacing:-.035em; text-transform:uppercase; }
.hero-copy h2 em,.about-statement em,.site-footer h2 em { color:var(--accent-bright); font-style:normal; }
.hero-lede { max-width:360px; color:#a4a7b0; font-size:13px; line-height:1.8; }
.hero-protocol { display:grid; width:min(100%,290px); margin-top:36px; border:1px solid #3a3d46; }
.hero-protocol span { padding:7px 11px; border-bottom:1px solid #3a3d46; color:#737781; font:8px "DM Mono",monospace; letter-spacing:.08em; }
.hero-protocol span:last-child { border:0; }
.hero-protocol .is-active { background:var(--accent); color:#fff; }
.scroll-cue { margin-top:38px; color:#777b86; text-transform:uppercase; }
.scroll-cue b { border-color:#5a5e69; color:var(--accent-bright); }
.hero-collage { min-height:650px; border:1px solid #363942; background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),#0b0d11; background-size:26px 26px,26px 26px,auto; }
.hero-collage::before { content:"// VISUAL MATRIX\A LAYER_03 / ACTIVE"; white-space:pre; position:absolute; z-index:7; top:14px; left:16px; color:#b3b5bd; font:8px/1.55 "DM Mono",monospace; letter-spacing:.08em; }
.hero-collage::after { content:"X 035.6895°\A Y 139.6917°"; white-space:pre; position:absolute; z-index:7; right:16px; bottom:14px; color:var(--accent-bright); font:9px/1.5 "DM Mono",monospace; text-align:right; letter-spacing:.1em; }
.hero-tile { box-shadow:none; border:1px solid #464a54; background:#090a0d; }
.hero-tile::after { content:"+"; position:absolute; right:7px; top:5px; color:var(--accent-bright); font:12px "DM Mono",monospace; }
.hero-tile img { filter:saturate(.72) contrast(1.08); }
.hero-tile:hover { transform:translateY(-6px) !important; border-color:var(--accent-bright); }
.hero-tile figcaption { left:9px; bottom:8px; color:#d1d2d6; font-size:7px; }
.tile-a { width:53%; height:80%; left:24%; top:8%; transform:none; z-index:2; }
.tile-b { width:31%; height:44%; right:2%; top:15%; transform:none; z-index:3; }
.tile-c { width:32%; height:34%; left:2%; bottom:5%; transform:none; z-index:4; }
.profile-section { min-height:100vh; border-color:#30333b; background:linear-gradient(90deg,#090a0d 0 68%,#0f1116 68% 100%); }
.profile-section::before { color:#ffffff03; font-family:var(--display); }
.profile-index { border-color:#343741; color:#666a75; }
.profile-role { color:var(--accent-bright); }
.profile-copy h2 { font-family:var(--display); font-weight:500; letter-spacing:-.035em; text-transform:uppercase; }
.profile-copy h2 em { color:var(--accent-bright); font-style:normal; }
.profile-intro { color:#a9acb5; }
.profile-facts { border-color:#343741; }
.profile-facts b { color:var(--accent-bright); }
.profile-facts span { color:#e4e5e9; }
.profile-skills span { border-color:#3b3e48; color:#9da0aa; background:#0d0f13; }
.profile-links a { color:#d9dae0; }
.profile-links a:hover { color:var(--accent-bright); }
.profile-portrait > div { border-color:#565a66; background:#e8e4de; box-shadow:18px 18px 0 rgba(85,60,255,.12); }
.profile-portrait > div::after { border-color:rgba(85,60,255,.5); }
.profile-portrait img { filter:saturate(.92) contrast(1.025); }
.profile-portrait:hover img { filter:saturate(1.05) contrast(1.02); }
.profile-portrait figcaption { color:#646873; }
.work-section,.about-section { border-color:#2b2e36; background:#08090c; }
.work-section { position:relative; }
.work-section::before { content:"// ARCHIVE INDEX / FILTER BY CAPABILITY"; position:absolute; top:40px; right:6vw; color:#555965; font:8px "DM Mono",monospace; letter-spacing:.1em; }
.section-head h2 { font-family:var(--display); font-weight:500; letter-spacing:-.025em; text-transform:uppercase; }
.section-note { color:#777b86; font-family:"DM Mono",monospace; font-size:9px; }
.filters { gap:0; border:1px solid #353841; width:max-content; max-width:100%; }
.filter { border:0; border-right:1px solid #353841; border-radius:0; padding:10px 14px; color:#777b86; background:#0a0c10; }
.filter:last-child { border-right:0; }
.filter:hover,.filter.is-selected { background:var(--accent); color:#fff; }
.group-divider { --panel-accent:color-mix(in srgb,var(--group-color) 48%,var(--accent)); margin-top:42px; border-top:2px solid var(--panel-accent); border-bottom-color:#3a3d46; background:linear-gradient(90deg,color-mix(in srgb,var(--panel-accent) 14%,transparent),transparent 48%); }
.group-divider strong { font-family:var(--display); font-size:25px; font-weight:500; letter-spacing:.015em; text-transform:uppercase; }
.group-divider span,.group-divider small { color:var(--panel-accent); }
.project-card { --panel-accent:color-mix(in srgb,var(--group-color) 48%,var(--accent)); grid-template-columns:minmax(185px,24%) minmax(230px,1fr) minmax(300px,39%); border-top-color:#2b2e36; border-left:2px solid var(--panel-accent); background:linear-gradient(90deg,color-mix(in srgb,var(--panel-accent) 6%,transparent),rgba(255,255,255,.008) 43%,transparent); }
.project-card::after { content:"+"; position:absolute; top:8px; right:9px; color:#454953; font:9px "DM Mono",monospace; }
.project-card:last-child { border-bottom-color:#2b2e36; }
.card-visual { border:1px solid #383b44; background:#050609; }
.card-visual::after { content:"SCAN / ACTIVE"; position:absolute; left:9px; bottom:8px; color:#d7d8dc; font:6px "DM Mono",monospace; letter-spacing:.1em; opacity:.65; }
.card-visual img { background:#07080b; filter:saturate(.72) contrast(1.04); }
.card-index { left:9px; top:8px; color:var(--accent-bright); font-size:8px; }
.card-play { width:32px; height:32px; right:9px; bottom:9px; border-radius:0; border-color:#777b86; color:var(--accent-bright); font-size:10px; background:rgba(7,8,11,.7); }
.card-copy h3 { font-family:var(--display); font-weight:500; letter-spacing:-.015em; text-transform:uppercase; }
.card-copy p { color:#747883; }
.card-copy .card-description { color:#8d919b; font-size:11px; }
.card-kicker,.card-type { color:var(--panel-accent); }
.frames-label { color:#747883; }
.frames-explore { color:var(--accent-bright); }
.card-frame-button { border:1px solid #343741; background:#07080b; }
.card-frame-strip img { filter:saturate(.72) contrast(1.04); }
.card-frame-button:hover { border-color:var(--accent-bright); }
@media (hover:hover) and (pointer:fine) { .project-card:hover,.project-card.is-pointer-over { box-shadow:0 18px 44px rgba(0,0,0,.38),0 0 0 1px color-mix(in srgb,var(--panel-accent) 55%,transparent); background-color:#101218; } }
.about-section { background:linear-gradient(135deg,#0a0b0f,#10121a); }
.about-section .eyebrow,.about-section .section-note { color:#6f737e; }
.about-statement { font-family:var(--display); font-weight:500; letter-spacing:-.025em; text-transform:uppercase; }
.about-details > p { color:#a6a9b2; }
.skill-list span { border-color:#3a3d46; background:#0c0e13; color:#979aa4; }
.timeline { border-color:#343741; }
.timeline b { color:var(--accent-bright); }
.site-footer { border-top:1px solid #2d3038; background:#07080b; }
.site-footer::before { content:"GENERATIVE / VISUAL / ENGINE"; position:absolute; right:6vw; top:48px; color:#343742; font:500 clamp(48px,7vw,120px)/1 var(--display); letter-spacing:.04em; pointer-events:none; }
.site-footer h2 { position:relative; z-index:1; font-family:var(--display); font-weight:500; letter-spacing:-.025em; text-transform:uppercase; }
.footer-meta { border-color:#30333b; }
.project-modal { color:var(--ink); }
.modal-backdrop { background:rgba(0,0,0,.86); }
.modal-panel { border:1px solid #454954; background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),#0b0d11; background-size:28px 28px,28px 28px,auto; }
.modal-close { border-color:#555965; border-radius:0; color:var(--accent-bright); }
.modal-header h2 { font-family:var(--display); font-weight:500; text-transform:uppercase; letter-spacing:-.02em; }
.modal-header > p:not(.eyebrow) { color:#9da1ab; }
.series-switcher { border-color:#393c45; background:#0e1015; }
.series-chip { border-color:#393c45; }
.series-chip span,.series-chip.is-active span { color:#d9dae0; }
.series-chip:hover,.series-chip.is-active { border-color:var(--accent-bright); color:var(--accent-bright); background:rgba(85,60,255,.1); }
.video-wrap { border:1px solid #3c3f48; background:#030406; }
.cover-play { border-radius:0; border-color:#8b8f9a; }
.cover-play:hover { background:var(--accent); }
.frame-button img { background:#050609; }
.frame-button:hover img,.frame-button.is-active img { outline-color:var(--accent-bright); }
.frame-panel-head span { color:var(--accent-bright); }
@media (max-width:1100px) { .hero-section { grid-template-columns:1fr; background:#08090c; } .hero-copy { max-width:680px; } .hero-collage { min-height:580px; } .project-card { grid-template-columns:minmax(165px,23%) minmax(190px,1fr) minmax(270px,39%); } }
@media (min-width:721px) { .section-head h2 { font-size:clamp(34px,3.8vw,60px); white-space:nowrap; } .about-statement { font-size:clamp(42px,5vw,78px); line-height:.94; } }
@media (max-width:720px) { .site-header { background:rgba(7,8,11,.94); border-color:#2e3139; } .menu-toggle span { background:#e8e9ed; } .sidebar { box-shadow:18px 0 50px #000a; } .hero-section { padding-top:104px; } .hero-copy h2 { font-size:24vw; } .hero-protocol { width:100%; } .hero-collage { min-height:430px; } .tile-a { width:61%; height:76%; left:19%; } .tile-b { width:35%; height:42%; right:1%; } .tile-c { width:37%; height:32%; left:1%; } .profile-section { background:#090a0d; } .profile-copy h2 { font-size:13vw; } .profile-portrait { align-self:flex-start; } .work-section::before { display:none; } .filters { width:100%; overflow-x:auto; } .filter { flex:0 0 auto; } .group-divider { margin-top:34px; } .project-card,.project-card:nth-child(n) { border-right:1px solid #292c34; padding:22px 12px; } .card-copy h3 { font-size:34px; } .site-footer::before { opacity:.35; } .modal-panel { background-size:22px 22px,22px 22px,auto; } }

/* READABILITY PASS / SMALL-TYPE ACCESSIBILITY */
:root { --ui-readable:"Noto Sans SC","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif; }
body { font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* Navigation and persistent information must remain readable at a normal viewing distance. */
.eyebrow { font-size:11px; line-height:1.55; letter-spacing:.12em; }
.sidebar::after { font-size:9px; line-height:1.65; color:#777c88; }
.sidebar-copy { font-family:var(--ui-readable); font-size:15px; line-height:1.75; color:#b1b4bd; }
.primary-nav { gap:10px; }
.primary-nav a { min-height:38px; padding:10px 0; font-family:var(--ui-readable); font-size:14px; line-height:1.35; letter-spacing:.01em; text-transform:none; }
.primary-nav a span { font-size:11px; }
.group-subnav { margin-top:10px; max-height:280px; }
.group-subnav button { min-height:27px; padding:5px 0; color:#9397a1; font:12px/1.4 var(--ui-readable); }
.group-subnav button span { font:11px/1.4 "DM Mono",monospace; }
.sidebar-bottom { color:#8d919c; font:12px/1.65 var(--ui-readable); }

/* Profile and editorial supporting copy. */
.profile-index { font-size:11px; line-height:1.5; letter-spacing:.1em; }
.profile-role { margin-bottom:20px; font-size:12px; line-height:1.5; letter-spacing:.1em; }
.profile-intro { color:#c8cad1; font:16px/1.9 var(--ui-readable); }
.profile-facts article { gap:9px; }
.profile-facts b { font-size:12px; line-height:1.4; }
.profile-facts span { font:500 15px/1.55 var(--ui-readable); }
.profile-facts small { color:#a4a7b0; font:12px/1.6 var(--ui-readable); }
.profile-skills { gap:9px; }
.profile-skills span { padding:9px 12px; color:#c0c3ca; font:12px/1.35 var(--ui-readable); }
.profile-links a { padding-bottom:8px; font:500 13px/1.4 var(--ui-readable); letter-spacing:.01em; }
.profile-portrait figcaption { color:#9599a4; font-size:10px; line-height:1.45; }
.profile-credentials {
  display:grid; grid-template-columns:minmax(235px,.72fr) minmax(0,1.28fr); align-items:center; gap:30px;
  max-width:790px; margin-top:38px;
}
.profile-education {
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:15px;
  min-width:0; margin:0; padding:0; border:0;
}
.profile-education > div { display:flex; min-width:0; flex-direction:column; gap:2px; }
.profile-education b { color:var(--accent-bright); font:500 11px/1.45 "DM Mono",monospace; letter-spacing:.08em; white-space:nowrap; }
.profile-education span { color:#e4e5e9; font:500 15px/1.45 var(--ui-readable); }
.profile-education small { color:#969aa5; font:11px/1.5 var(--ui-readable); white-space:normal; }
.profile-credentials .profile-skills { gap:8px; margin:0; }
.profile-credentials .profile-skills span { padding:8px 10px; }

/* Work index, card metadata and captions. */
.section-note { max-width:320px; color:#a1a5af; font:12px/1.7 var(--ui-readable); }
.filter { padding:10px 15px; font:12px/1.3 var(--ui-readable); }
.filter span { font-size:11px; }
.group-divider span,.group-divider small { font-size:11px; line-height:1.45; }
.card-index { font-size:10px; }
.card-kicker,.card-type { font-size:11px; line-height:1.45; letter-spacing:.06em; }
.card-copy p { color:#a1a5ae; font:12px/1.6 var(--ui-readable); }
.card-copy .card-description { color:#a9acb4; font:13px/1.75 var(--ui-readable); }
.frames-label { color:#a0a4ae; font-size:11px; line-height:1.45; }
.frames-explore { font-size:10px; line-height:1.45; opacity:1; }
.card-frame-button > span { font:10px/1.35 var(--ui-readable); }

/* About, footer and modal information. */
.about-details > p { font:15px/1.9 var(--ui-readable); }
.skill-list span { padding:9px 12px; font:12px/1.35 var(--ui-readable); }
.timeline b { font-size:12px; }
.timeline span { font:13px/1.65 var(--ui-readable); }
.footer-contact { font:14px/1.6 var(--ui-readable); }
.footer-meta { color:#9599a4; font:11px/1.5 var(--ui-readable); }
.modal-header > p:not(.eyebrow) { color:#b2b5bd; font:15px/1.85 var(--ui-readable); }
.modal-tags span,.series-chip { font:12px/1.35 var(--ui-readable); }
.series-chip span { font:12px/1.45 var(--ui-readable); }
.video-placeholder { font:12px/1.5 var(--ui-readable); }
.frame-panel-head span { font-size:11px; }
.frame-panel-head small { color:#a4a8b1; font:12px/1.6 var(--ui-readable); }
.frame-button span,.modal-meta { color:#a0a4ae; font:11px/1.5 var(--ui-readable); }

@media (min-width:721px) and (max-width:1280px) {
  .sidebar { padding-left:30px; padding-right:30px; }
  .sidebar::after { display:none; }
  .primary-nav a { font-size:14px; }
  .group-subnav button { font-size:12px; }
}
@media (max-width:720px) {
  .eyebrow { font-size:10px; }
  .primary-nav a { font-size:15px; }
  .group-subnav button { min-height:31px; font-size:13px; }
  .sidebar-bottom { font-size:13px; }
  .profile-index,.profile-role { font-size:11px; }
  .profile-intro { font-size:15px; }
  .profile-facts span { font-size:15px; }
  .profile-skills span,.profile-links a { font-size:13px; }
  .card-kicker,.card-type,.frames-label { font-size:11px; }
}

/* HOMEPAGE REFINEMENT / PORTFOLIO-FIRST HERO */
.sidebar-name-row { display:flex; align-items:flex-end; gap:12px; }
.sidebar-name-row h1 { margin-right:0; }
.name-tool { width:28px; height:28px; margin-bottom:4px; display:grid; place-items:center; border:1px solid #30333b; color:#6d58ff; font:12px/1 "DM Mono",monospace; opacity:.3; transition:opacity .2s,border-color .2s,transform .2s; }
.name-tool:hover,.name-tool:focus-visible { opacity:1; border-color:#6d58ff; transform:rotate(18deg); }
.primary-nav a { position:relative; width:100%; }
.nav-work-group > a { padding-left:0; }
.primary-nav a.tool-link { display:none; }

.hero-section { overflow:hidden; grid-template-columns:minmax(300px,.78fr) minmax(460px,1.22fr); gap:4vw; padding-top:76px; padding-bottom:64px; background:linear-gradient(100deg,rgba(6,7,10,.97) 0 40%,rgba(13,15,20,.91) 72%,rgba(7,8,11,.98)); }
.hero-section::before { content:"CKY / SELECTED PROJECTS / 2021—2026"; z-index:3; font-size:9px; color:#737783; }
.hero-section::after { content:"PORTFOLIO"; top:auto; right:-.02em; bottom:-.13em; z-index:0; color:#ffffff02; -webkit-text-stroke:1px #343742; font-size:clamp(90px,13vw,220px); letter-spacing:.02em; opacity:.55; }
.pixel-blast { position:absolute; z-index:0; inset:0; overflow:hidden; opacity:.48; pointer-events:none; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 100%); mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 100%); }
.pixel-blast::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 68% 43%,transparent 0 24%,rgba(8,9,12,.18) 55%,rgba(8,9,12,.76) 100%); }
.pixel-blast-canvas { width:100%; height:100%; display:block; }
.pixel-blast-fallback { background-image:radial-gradient(circle at 68% 40%,rgba(109,88,255,.26) 0 1px,transparent 1.5px); background-size:14px 14px; }
.hero-copy,.hero-showcase { position:relative; z-index:2; }
.hero-copy { align-self:center; }
.hero-copy h2 { margin:25px 0 28px; max-width:650px; color:#f3f4f7; font-family:var(--ui-readable); font-size:clamp(52px,4.4vw,78px); font-weight:600; line-height:.92; letter-spacing:-.055em; text-transform:none; white-space:nowrap; }
.hero-copy h2 em { display:inline-block; margin-top:13px; color:#6d58ff; font-family:"Barlow Condensed",var(--ui-readable); font-size:.6em; font-weight:500; line-height:1; letter-spacing:.025em; }
.hero-lede { max-width:520px; color:#c1c4cc; font:16px/1.85 var(--ui-readable); }
.hero-meta { width:min(100%,520px); margin-top:34px; border-top:1px solid #41444d; }
.hero-meta > div { display:grid; grid-template-columns:92px 1fr; gap:16px; align-items:center; min-height:48px; border-bottom:1px solid #30333b; }
.hero-meta span { color:#828691; font:12px/1.4 var(--ui-readable); }
.hero-meta strong { color:#e0e2e7; font:500 14px/1.45 var(--ui-readable); }
.scroll-cue { margin-top:32px; color:#c4c6cd; font:13px/1.4 var(--ui-readable); }
.scroll-cue b { width:36px; height:36px; border-color:#5b5f69; color:#8f80ff; }

.hero-showcase { min-height:610px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(190px,.85fr); grid-template-rows:repeat(2,minmax(0,1fr)); gap:12px; padding:14px; border:1px solid #3a3d46; background:rgba(8,9,12,.58); backdrop-filter:blur(3px); }
.hero-showcase::before { content:"精选项目 / SELECTED PROJECTS"; position:absolute; z-index:4; left:14px; top:-27px; color:#969aa4; font:11px/1.4 var(--ui-readable); }
.hero-frame { position:relative; min-width:0; min-height:0; overflow:hidden; border:1px solid #3b3e47; background:rgba(12,14,18,.9); transition:border-color .28s,transform .42s cubic-bezier(.2,.75,.2,1),background-color .28s; }
.hero-frame-main { grid-row:1 / 3; }
.hero-frame img { width:100%; height:100%; display:block; object-fit:contain; filter:saturate(.88) contrast(1.035); transition:filter .3s,transform .6s cubic-bezier(.2,.75,.2,1); }
.hero-frame-main img { object-fit:cover; object-position:center top; }
.hero-frame span { position:absolute; z-index:2; inset:auto 0 0; display:flex; flex-direction:column; gap:4px; padding:15px 16px 13px; background:linear-gradient(transparent,rgba(4,5,7,.9) 32%); transform:translateY(2px); }
.hero-frame b { color:#f2f3f6; font:500 14px/1.4 var(--ui-readable); }
.hero-frame small { color:#a5a8b0; font:10px/1.45 "DM Mono",monospace; letter-spacing:.04em; }
.hero-frame:hover { z-index:3; border-color:#7665ff; transform:translateY(-3px); background:#11131a; }
.hero-frame:hover img { filter:saturate(1.03) contrast(1.02); transform:scale(1.018); }

.profile-section { min-height:auto; padding-bottom:106px; }
.profile-grid { align-items:start; }
.profile-approach { display:grid; grid-template-columns:minmax(210px,.78fr) minmax(260px,1.22fr); gap:32px; max-width:880px; margin-top:40px; padding:28px 0; border-top:1px solid #363942; border-bottom:1px solid #363942; }
.profile-approach blockquote { margin:0; color:#f0f1f4; font:500 clamp(25px,2.5vw,38px)/1.08 var(--ui-readable); letter-spacing:-.035em; }
.profile-approach blockquote span { display:block; margin-top:13px; color:#7665ff; font-size:.68em; line-height:1.35; letter-spacing:-.02em; }
.profile-approach p { margin:0; color:#b0b3bb; font:14px/1.8 var(--ui-readable); }
.profile-tools { display:flex; flex-wrap:wrap; gap:7px; margin-top:19px; }
.profile-tools span { padding:7px 9px; border:1px solid #3c3f48; color:#aeb1b9; font:11px/1.35 var(--ui-readable); }

.work-section { padding-top:92px; }
.work-section .section-head h2 { font-family:var(--ui-readable); font-size:clamp(36px,4vw,62px); font-weight:600; letter-spacing:-.045em; text-transform:none; }
.site-footer { border-top-color:#343741; }

@media (max-width:1100px) {
  .hero-section { grid-template-columns:1fr; gap:76px; padding-top:135px; }
  .hero-copy { max-width:760px; }
  .hero-showcase { width:100%; max-width:820px; min-height:600px; }
  .pixel-blast { -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 100%); }
  .profile-approach { grid-template-columns:1fr; gap:22px; }
}

@media (max-width:720px) {
  .sidebar-name-row h1 { margin-top:26px; }
  .name-tool { margin-bottom:1px; opacity:.55; }
  .primary-nav a.active::before { left:-14px; }
  .hero-section { gap:55px; padding-top:112px; padding-bottom:66px; }
  .hero-copy h2 { font-size:13.5vw; line-height:.96; }
  .hero-copy h2 em { margin-top:10px; font-size:.58em; }
  .hero-lede { font-size:15px; }
  .hero-meta > div { grid-template-columns:78px 1fr; min-height:50px; }
  .hero-meta span { font-size:12px; }
  .hero-meta strong { font-size:13px; }
  .hero-showcase { min-height:560px; grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1.35fr) minmax(0,.65fr); gap:8px; padding:9px; }
  .hero-frame-main { grid-column:1 / 3; grid-row:1; }
  .hero-showcase::before { left:9px; top:-25px; }
  .hero-frame span { padding:12px; }
  .hero-frame b { font-size:12px; }
  .hero-frame small { font-size:9px; }
  .profile-approach { margin-top:32px; padding:24px 0; }
  .profile-approach blockquote { font-size:30px; }
  .profile-approach p { font-size:14px; }
  .work-section .section-head h2 { white-space:normal; font-size:10.5vw; }
}

@media (prefers-reduced-motion:reduce) {
  .pixel-blast { opacity:.32; }
  .hero-frame,.hero-frame img { transition:none; }
}

/* COVER V2 / QUIET ENTRY + VARIABLE PROXIMITY */
.hero-section { min-height:100svh; display:grid; grid-template-columns:1fr; place-items:center; padding:90px clamp(34px,7vw,130px) 76px; background:linear-gradient(118deg,#07080b 0 38%,#0c0e14 72%,#07080b 100%); }
.hero-section::before { content:"00 / COVER · CHEN KUNYONG"; left:clamp(34px,7vw,130px); bottom:34px; }
.hero-section::after { content:"PORTFOLIO"; right:-.03em; bottom:-.16em; font-size:clamp(110px,18vw,320px); opacity:.38; }
.pixel-blast { opacity:.5; -webkit-mask-image:radial-gradient(ellipse at 64% 48%,#000 0 22%,rgba(0,0,0,.92) 40%,transparent 78%); mask-image:radial-gradient(ellipse at 64% 48%,#000 0 22%,rgba(0,0,0,.92) 40%,transparent 78%); }
.pixel-blast::after { background:radial-gradient(ellipse at 64% 48%,transparent 0 25%,rgba(8,9,12,.12) 54%,rgba(8,9,12,.82) 100%); }
.hero-copy { width:100%; max-width:1160px; margin:0 auto; align-self:center; }
.hero-copy .eyebrow { margin-bottom:32px; font-size:12px; }
.hero-copy h2 { width:max-content; max-width:100%; margin:0; font-family:"Roboto Flex",var(--ui-readable); font-size:clamp(84px,9.2vw,168px); font-weight:600; line-height:.78; letter-spacing:-.035em; white-space:nowrap; }
.hero-copy h2 em { margin-top:.28em; font-family:"Roboto Flex","Barlow Condensed",var(--ui-readable); font-size:.43em; letter-spacing:.025em; }
.proximity-line { display:inline-flex; align-items:baseline; white-space:nowrap; }
.proximity-character {
  --proximity:0; display:inline-block; transform-origin:50% 72%;
  will-change:transform,font-variation-settings,text-shadow;
  transition:transform 110ms ease-out,font-variation-settings 110ms ease-out,font-weight 110ms ease-out,filter 110ms ease-out,text-shadow 90ms ease-out;
  filter:brightness(calc(1 + var(--proximity) * .18));
}
.hero-copy h2 > span .proximity-character {
  text-shadow:
    calc(-1px - var(--proximity) * 6px) calc(var(--proximity) * -1px) 0 rgb(0 226 255 / calc(var(--proximity) * .84)),
    calc(1px + var(--proximity) * 6px) calc(var(--proximity) * 1px) 0 rgb(255 42 142 / calc(var(--proximity) * .78)),
    0 calc(var(--proximity) * 3px) 0 rgb(112 78 255 / calc(var(--proximity) * .52));
}
.hero-lede { max-width:640px; margin-top:50px; color:#c7cad2; font:17px/1.9 var(--ui-readable); }
.scroll-cue { margin-top:48px; }
.hero-meta,.hero-showcase { display:none; }

@media (max-width:1100px) {
  .hero-section { min-height:100svh; padding-top:130px; padding-bottom:82px; }
  .hero-copy { max-width:780px; }
  .hero-copy h2 { font-size:clamp(72px,12vw,126px); }
  .pixel-blast { -webkit-mask-image:radial-gradient(ellipse at 70% 46%,#000 0 18%,rgba(0,0,0,.9) 38%,transparent 78%); mask-image:radial-gradient(ellipse at 70% 46%,#000 0 18%,rgba(0,0,0,.9) 38%,transparent 78%); }
}

@media (max-width:720px) {
  .hero-section { min-height:100svh; display:flex; justify-content:center; padding:112px 20px 74px; }
  .hero-section::before { left:20px; bottom:24px; font-size:8px; }
  .hero-copy h2 { font-size:16.2vw; line-height:.82; letter-spacing:-.045em; }
  .hero-copy h2 em { margin-top:.34em; font-size:.5em; }
  .hero-copy .eyebrow { margin-bottom:26px; font-size:10px; }
  .hero-lede { max-width:340px; margin-top:42px; font-size:15px; line-height:1.85; }
  .scroll-cue { margin-top:42px; }
  .pixel-blast { opacity:.43; -webkit-mask-image:radial-gradient(ellipse at 68% 44%,#000 0 18%,rgba(0,0,0,.92) 36%,transparent 76%); mask-image:radial-gradient(ellipse at 68% 44%,#000 0 18%,rgba(0,0,0,.92) 36%,transparent 76%); }
}

@media (prefers-reduced-motion:reduce) {
  .proximity-character { transition:none; transform:none !important; font-variation-settings:'wght' 600,'opsz' 18 !important; text-shadow:none !important; }
}

/* FLUID GLASS / RESTRAINED UI MATERIAL */
.fluid-glass { --glass-x:50%; --glass-y:42%; position:relative; isolation:isolate; overflow:hidden; border:1px solid rgba(152,158,184,.24); background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 52%,rgba(109,88,255,.045)); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.28),0 16px 34px rgba(0,0,0,.18); backdrop-filter:blur(18px) saturate(1.14); -webkit-backdrop-filter:blur(18px) saturate(1.14); }
.fluid-glass::before { content:""; position:absolute; z-index:-1; inset:-30%; pointer-events:none; background:radial-gradient(circle at var(--glass-x) var(--glass-y),rgba(255,255,255,.16) 0,rgba(150,151,255,.07) 9%,transparent 29%); opacity:.82; transition:background-position .2s ease-out; }
.fluid-glass::after { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; opacity:.16; background-image:linear-gradient(115deg,transparent 0 42%,rgba(255,255,255,.15) 47%,transparent 52%),radial-gradient(circle at 20% 10%,rgba(255,255,255,.1),transparent 25%); mix-blend-mode:screen; }
.contact-card { width:100%; max-width:260px; margin-top:auto; padding:16px 16px 14px; display:flex; flex-direction:column; gap:11px; border-radius:2px; }
.contact-card-kicker { color:#8f94a1; font:10px/1.4 "DM Mono",monospace; letter-spacing:.1em; }
.contact-card a,.contact-card > span:not(.contact-card-kicker) { display:flex; flex-direction:column; gap:3px; }
.contact-card small { color:#7c818d; font:10px/1.4 var(--ui-readable); }
.contact-card b { color:#d9dbe2; font:500 12px/1.45 var(--ui-readable); }
.contact-card a:hover b { color:#9a8cff; }

.profile-approach { border-color:rgba(152,158,184,.28); border-radius:2px; }
.filters { border-radius:3px; padding:5px; gap:3px; }
.filters::before { opacity:.45; }
.filter { position:relative; z-index:1; border-color:transparent; background:rgba(7,8,12,.22); }
.filter:hover,.filter.is-selected { background:linear-gradient(135deg,rgba(109,88,255,.92),rgba(85,60,255,.7)); border-color:rgba(208,204,255,.3); box-shadow:0 5px 16px rgba(85,60,255,.18); }

.group-divider { grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:15px; margin-top:42px; padding:15px 17px 14px; border:1px solid color-mix(in srgb,var(--group-color) 50%,rgba(149,155,181,.32)); border-left:3px solid var(--group-color); border-top:1px solid color-mix(in srgb,var(--group-color) 50%,rgba(149,155,181,.32)); border-radius:2px; background:linear-gradient(110deg,color-mix(in srgb,var(--group-color) 11%,rgba(255,255,255,.03)),rgba(255,255,255,.02) 58%,rgba(109,88,255,.03)); }
.group-divider .group-index { position:relative; display:grid; place-items:center; width:34px; height:34px; border:1px solid color-mix(in srgb,var(--group-color) 72%,#5d6271); border-radius:50%; color:var(--group-color); font:11px/1 "DM Mono",monospace; }
.group-divider > div { display:flex; flex-direction:column; gap:5px; min-width:0; }
.group-divider > div small { color:#9499a6; font:10px/1.35 "DM Mono",monospace; letter-spacing:.1em; }
.group-divider strong { color:#eef0f4; font:500 clamp(22px,2.2vw,34px)/1 var(--ui-readable); letter-spacing:-.035em; }
.group-divider > em { color:var(--group-color); font:10px/1.4 "DM Mono",monospace; font-style:normal; letter-spacing:.08em; }
.project-card { border-top-color:rgba(139,144,164,.28); }

.footer-contact { min-width:280px; padding:18px 20px; align-items:stretch; gap:10px; border-radius:2px; }
.footer-contact a,.footer-contact span { display:flex; justify-content:space-between; gap:18px; color:#d9dbe2; font:13px/1.5 var(--ui-readable); }
.footer-contact small { color:#858a96; font:10px/1.5 var(--ui-readable); }
.footer-contact a:hover { color:#9a8cff; }
.footer-meta { font-family:var(--ui-readable); }
.modal-panel { border-radius:3px; }

@media (max-width:720px) {
  .contact-card { max-width:none; margin-top:38px; }
  .group-divider { grid-template-columns:40px minmax(0,1fr); gap:11px; padding:13px 12px; }
  .group-divider > em { grid-column:2; }
  .group-divider .group-index { width:30px; height:30px; }
  .group-divider strong { font-size:23px; }
  .footer-contact { min-width:0; margin-top:40px; }
}

/* MATERIAL + SPACING REFINEMENT / QUIET GLASS, SOFTER EDGES */
:root { --radius-surface:14px; --radius-control:9px; --radius-media:8px; }

/* The cover keeps moving when idle, but on a slow enough cycle to feel ambient. */
.pixel-blast { opacity:.54; transform:none; animation:none; filter:saturate(1.04) brightness(1.02); }

/* A low-contrast glass material: legible first, refraction second. */
.fluid-glass {
  --glass-x:50%; --glass-y:38%;
  border-color:rgba(161,166,186,.22);
  border-radius:var(--radius-surface);
  background:linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.018) 46%,rgba(109,88,255,.027));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 30px rgba(0,0,0,.14);
  backdrop-filter:blur(8px) saturate(1.06);
  -webkit-backdrop-filter:blur(8px) saturate(1.06);
}
.fluid-glass::before {
  inset:-42%;
  background:radial-gradient(ellipse at var(--glass-x) var(--glass-y),rgba(255,255,255,.10),rgba(129,116,255,.035) 18%,transparent 52%);
  opacity:.38;
}
.fluid-glass::after {
  opacity:.075;
  background-image:linear-gradient(118deg,transparent 0 45%,rgba(255,255,255,.16) 50%,transparent 56%);
}
.fluid-glass > * { position:relative; z-index:1; }
.glass-quiet {
  background:linear-gradient(145deg,rgba(20,22,29,.94),rgba(12,14,20,.88));
  backdrop-filter:blur(5px) saturate(1.02);
  -webkit-backdrop-filter:blur(5px) saturate(1.02);
}
.glass-quiet::before { opacity:.2; }
.glass-quiet::after { opacity:.035; }

/* The sidebar hierarchy needs a deliberate pause before the contents list. */
.primary-nav { margin-top:clamp(34px,5.5vh,66px); margin-bottom:26px; }
.group-subnav { margin-top:14px; }

/* Contact rows stay on one line and the whole card can be copied at once. */
.contact-card { max-width:280px; padding:15px; gap:7px; border-radius:var(--radius-surface); }
.contact-card-kicker { margin-bottom:4px; }
.contact-card a,.contact-card > span:not(.contact-card-kicker) {
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:baseline;
  gap:8px;
  min-height:25px;
}
.contact-card small { white-space:nowrap; }
.contact-card b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.copy-card {
  width:100%; min-height:34px; margin-top:5px; padding:7px 10px;
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid rgba(144,149,170,.27); border-radius:var(--radius-control);
  background:rgba(255,255,255,.035); color:#bfc2cb; cursor:pointer;
  font:500 11px/1.35 var(--ui-readable); transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.copy-card i { color:#8072ff; font:normal 15px/1 var(--ui-readable); }
.copy-card:hover,.copy-card:focus-visible { border-color:rgba(128,114,255,.62); background:rgba(109,88,255,.1); color:#fff; transform:translateY(-1px); }
.copy-card.is-copied { border-color:rgba(128,114,255,.65); color:#a99fff; }

/* Remove the manifesto block and keep its practical content as an open text rail. */
.profile-approach {
  display:block; max-width:790px; margin-top:36px; padding:23px 0 0;
  border:0; border-top:1px solid #343741; border-radius:0; background:none; box-shadow:none; backdrop-filter:none;
}
.profile-approach > div { max-width:760px; }
.profile-approach p { max-width:760px; text-wrap:pretty; }
.profile-copy h2 { line-height:1.03; }
.profile-portrait { transform:translateX(clamp(38px,4vw,60px)); }
.profile-portrait > div { border-radius:var(--radius-surface); box-shadow:12px 14px 0 rgba(85,60,255,.09); }
.profile-portrait > div::after { border-radius:calc(var(--radius-surface) - 6px); }

/* One color system per capability group; no extra glass lens over the heading. */
.group-divider,.project-card { --panel-accent:var(--group-color); }
.group-divider {
  border-color:color-mix(in srgb,var(--group-color) 42%,#343844);
  border-left:3px solid var(--group-color); border-radius:var(--radius-surface);
  background:linear-gradient(105deg,color-mix(in srgb,var(--group-color) 12%,#101219),#0b0d12 68%);
  box-shadow:0 8px 22px rgba(0,0,0,.11);
}
.group-divider strong,.group-divider .group-index,.group-divider > em { color:var(--group-color); }
.project-grid { gap:10px; }
.project-card {
  border:1px solid #292d37; border-left:3px solid var(--group-color); border-radius:var(--radius-surface);
  background:linear-gradient(100deg,color-mix(in srgb,var(--group-color) 5%,#0b0d12),#08090c 46%);
  overflow:hidden;
}
.project-card:last-child { border-bottom-color:#292d37; }
.card-kicker,.card-type,.frames-explore { color:var(--group-color); }
.card-visual,.card-frame-button { border-radius:var(--radius-media); }
.card-play,.scroll-cue b,.name-tool { border-radius:var(--radius-control); }

/* Small-radius controls soften the system without turning it into pill UI. */
.filters { border-radius:calc(var(--radius-control) + 2px); }
.filter:first-child { border-radius:var(--radius-control) 0 0 var(--radius-control); }
.filter:last-child { border-radius:0 var(--radius-control) var(--radius-control) 0; }
.profile-skills span,.profile-tools span,.series-switcher,.series-chip,.video-wrap,.frame-button img { border-radius:var(--radius-control); }
.modal-panel { border-radius:18px; }
.modal-close,.cover-play { border-radius:50%; }

/* Keep the modal itself scrollable on tall-content layouts. The fluid-glass
   surface sets overflow:hidden for its decorative lens, which otherwise
   clips the detail panel on wide, short viewports. */
.modal-panel {
  position:absolute;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

/* Reserve a small header lane for the close control so the kicker/title can
   never sit underneath it at intermediate desktop widths. */
.modal-header { position:relative; z-index:1; padding-right:58px; }
.modal-panel > .modal-close { position:absolute; top:18px; right:22px; z-index:4; }
.modal-panel > .modal-close {
  width:36px; height:36px; border:0; border-radius:var(--radius-control);
  background:rgba(109,88,255,.08); color:var(--accent-bright);
  box-shadow:none; transition:background .2s,color .2s,transform .2s;
}
.modal-panel > .modal-close:hover { background:rgba(109,88,255,.24); color:#fff; transform:rotate(90deg); }
.modal-panel > .modal-close:focus-visible { outline:2px solid rgba(143,131,255,.8); outline-offset:3px; }

/* Keep the work/clip name on its own line with a quieter, technical voice. */
.modal-subtitle {
  display:block; max-width:650px; margin:-2px 0 20px;
  color:#a5a8b4; font:500 clamp(14px,1.25vw,18px)/1.45 'DM Mono',var(--ui-readable);
  letter-spacing:.04em;
}

/* Keep footer information above the decorative word and prevent glass highlights crossing text. */
.site-footer { grid-template-columns:minmax(0,1fr) 310px; gap:54px; padding-top:168px; }
.site-footer::before {
  top:42px; left:6vw; right:6vw; overflow:hidden; white-space:nowrap;
  font-size:clamp(42px,5vw,78px); opacity:.72;
}
.site-footer h2 { font-size:clamp(50px,5vw,80px); line-height:1.03; }
.site-footer > div { position:relative; z-index:2; }
.site-footer .eyebrow { display:inline-block; padding:4px 7px; border-radius:6px; background:#07080b; }
.footer-contact { min-width:310px; height:max-content; align-self:end; border-radius:var(--radius-surface); }
.footer-contact a,.footer-contact span { position:relative; z-index:2; white-space:nowrap; }
.footer-contact a:first-child { color:#d9dbe2; }
.footer-contact .copy-card { margin-top:3px; }

/* Desktop navigation can fold into a narrow rail without losing page context. */
.sidebar { overflow-x:hidden; scrollbar-width:none; }
.sidebar::-webkit-scrollbar { display:none; }
.sidebar,.main-content { transition:width .42s cubic-bezier(.2,.75,.2,1),margin-left .42s cubic-bezier(.2,.75,.2,1); }
.sidebar-collapse {
  position:absolute; z-index:12; top:50%; right:4px; width:32px; height:48px;
  display:grid; place-items:center; padding:0; border:0; border-radius:0;
  background:transparent; color:#89809f; cursor:pointer;
  box-shadow:none; transform:translateY(-50%); transition:color .2s,opacity .2s,transform .2s;
}
.sidebar-collapse span { width:10px; height:10px; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .36s cubic-bezier(.2,.75,.2,1); }
.sidebar.is-collapsed .sidebar-collapse span { transform:rotate(225deg); }
.sidebar-collapse:hover,.sidebar-collapse:focus-visible { color:#a99fff; transform:translateY(-50%) translateX(-2px); outline:none; }
.sidebar.is-collapsed .sidebar-collapse:hover,.sidebar.is-collapsed .sidebar-collapse:focus-visible { transform:translateY(-50%) translateX(2px); }

@media (min-width:721px) {
  body.sidebar-collapsed { --sidebar:76px; }
  .sidebar::before {
    content:"CKY"; position:absolute; left:50%; top:38px; opacity:0; visibility:hidden;
    color:#777c88; font:500 11px/1 "DM Mono",monospace; letter-spacing:.18em;
    writing-mode:vertical-rl; transform:translateX(-50%); transition:opacity .2s .12s;
  }
  .sidebar > .sidebar-top,.sidebar > .primary-nav,.sidebar > .sidebar-bottom,.sidebar::after {
    transition:opacity .18s,visibility .18s;
  }
  .sidebar.is-collapsed > .sidebar-top,.sidebar.is-collapsed > .primary-nav,.sidebar.is-collapsed > .sidebar-bottom { opacity:0; visibility:hidden; pointer-events:none; }
  .sidebar.is-collapsed { overflow:hidden; }
  .sidebar.is-collapsed::after { opacity:0; visibility:hidden; }
  .sidebar.is-collapsed::before { opacity:1; visibility:visible; }
}

@media (max-width:1100px) and (min-width:721px) {
  .profile-portrait { transform:translateX(24px); }
  .contact-card { padding:13px; }
  .contact-card a,.contact-card > span:not(.contact-card-kicker) { grid-template-columns:34px minmax(0,1fr); gap:6px; }
  .contact-card b { font-size:11px; }
}

@media (max-height:800px) and (min-width:721px) {
  .sidebar { padding-top:27px; padding-bottom:18px; overflow:hidden; }
  .sidebar::after { top:27px; }
  .sidebar h1 { margin-top:26px; }
  .sidebar-copy { font-size:13px; line-height:1.55; }
  .primary-nav { flex-shrink:0; gap:5px; margin-top:24px; margin-bottom:16px; }
  .primary-nav a { min-height:32px; padding:6px 0; }
  .group-subnav { margin-top:7px; }
  .group-subnav button { min-height:22px; padding:2px 0; font-size:11px; }
  .contact-card { flex-shrink:0; padding:12px 13px; gap:5px; }
  .contact-card a,.contact-card > span:not(.contact-card-kicker) { min-height:22px; }
  .copy-card { min-height:30px; }
}

@media (max-width:720px) {
  :root { --radius-surface:12px; --radius-control:8px; --radius-media:7px; }
  .primary-nav { margin-top:32px; }
  .profile-portrait { transform:none; }
  .project-grid { gap:9px; }
  .site-footer { padding:112px 22px 28px; }
  .site-footer::before { top:36px; left:22px; right:22px; font-size:11vw; }
  .site-footer h2 { font-size:14vw; }
  .footer-contact a,.footer-contact span { white-space:normal; }
  .sidebar-collapse { display:none; }
  .profile-credentials { grid-template-columns:1fr; gap:18px; margin-top:32px; }
  .profile-education { grid-template-columns:auto minmax(0,1fr); gap:14px; }
  .modal-header { padding-right:46px; }
  .modal-subtitle { margin:-2px 0 18px; font-size:14px; line-height:1.5; }
}

@media (prefers-reduced-motion:reduce) {
  .pixel-blast { animation:none; transform:none; }
}

@media (max-width:720px) {
  .card-copy .card-description { max-height:9em; overflow-y:auto; touch-action:pan-y; }
}

/* DEPTH PORTRAIT / MIGRATED FROM THE APPROVED 2.5D STUDY */
.profile-portrait { perspective:940px; }
.profile-portrait > .profile-avatar-depth {
  --avatar-rx:0deg; --avatar-ry:0deg; --avatar-sx:0px; --avatar-sy:0px;
  --avatar-light-angle:106deg; --avatar-sheen-shift:0px;
  position:relative; overflow:hidden; width:100%; aspect-ratio:1792/2400;
  border:0; border-radius:var(--radius-surface); background:transparent;
  box-shadow:12px 14px 0 rgba(85,60,255,.09),0 28px 70px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.12);
  transform:rotateX(var(--avatar-rx)) rotateY(var(--avatar-ry));
  transform-style:preserve-3d; transform-origin:center; will-change:transform;
  transition:box-shadow .45s ease,background .3s ease;
}
.profile-portrait > .profile-avatar-depth.is-white { background:#f7f5f0; box-shadow:12px 14px 0 rgba(85,60,255,.09),0 28px 70px rgba(0,0,0,.24),0 0 0 1px rgba(0,0,0,.16); }
.profile-avatar-depth.is-active { box-shadow:12px 14px 0 rgba(85,60,255,.1),0 34px 78px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.22); }
.profile-avatar-canvas { position:absolute; z-index:1; inset:0; width:100%; height:100%; display:block; }
.profile-portrait .profile-avatar-fallback {
  position:absolute; z-index:0; inset:-3%; width:106%; height:106%; display:block;
  object-fit:cover; object-position:center top;
  transform:translate3d(var(--avatar-sx),var(--avatar-sy),18px) scale(1.025);
  filter:saturate(.84) contrast(1.05); transform-origin:center; will-change:transform;
  transition:opacity .3s ease;
}
.profile-portrait:hover .profile-avatar-fallback { transform:translate3d(var(--avatar-sx),var(--avatar-sy),18px) scale(1.025); filter:saturate(.84) contrast(1.05); }
.profile-avatar-fallback.is-hidden { opacity:0; pointer-events:none; }
.profile-avatar-depth::before {
  content:""; position:absolute; z-index:2; inset:0; pointer-events:none;
  background:linear-gradient(var(--avatar-light-angle),rgba(255,255,255,.06),transparent 30%,rgba(0,0,0,.08) 100%);
  mix-blend-mode:soft-light; transform:translateZ(36px); transition:background .25s ease;
}
.profile-portrait > .profile-avatar-depth::after {
  content:""; position:absolute; z-index:3; inset:12px; pointer-events:none;
  border:1px solid rgba(255,255,255,.3); border-radius:calc(var(--radius-surface) - 6px); transform:translateZ(44px);
}
.profile-avatar-depth.is-white::after { border-color:rgba(0,0,0,.22); }
.profile-avatar-glass {
  position:absolute; z-index:4; inset:0; pointer-events:none;
  background:linear-gradient(112deg,transparent 28%,rgba(255,255,255,.13) 45%,transparent 62%);
  opacity:0; transform:translateX(calc(-45% + var(--avatar-sheen-shift))) translateZ(46px);
  transition:opacity .4s ease,transform .18s linear;
}
.profile-avatar-depth.is-active .profile-avatar-glass { opacity:.78; }
@media (prefers-reduced-motion:reduce) {
  .profile-avatar-depth,.profile-avatar-fallback,.profile-avatar-glass { transition:none !important; }
}

/* MOBILE FILTER + PROFILE FIX */
@media (max-width:720px) {
  .project-card.is-hidden,.group-divider.is-hidden { display:none !important; }
  .filters { touch-action:pan-x; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .filters::-webkit-scrollbar { display:none; }
  .filter { touch-action:manipulation; }
}
@media (max-width:900px) and (min-width:721px) {
  .profile-grid { grid-template-columns:minmax(0,1fr); gap:38px; }
  .profile-portrait { width:min(58vw,330px); justify-self:start; transform:none; }
  .profile-copy { min-width:0; }
  .profile-intro,.profile-approach { max-width:100%; }
}

/* MOBILE SINGLE-LINE TAG RAILS */
@media (max-width:720px) {
  .profile-credentials .profile-skills,.profile-tools {
    width:100%; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    padding:2px 18px 8px 0; scroll-snap-type:x proximity;
    overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .profile-credentials .profile-skills::-webkit-scrollbar,.profile-tools::-webkit-scrollbar { display:none; }
  .profile-credentials .profile-skills span,.profile-tools span {
    flex:0 0 auto; white-space:nowrap; scroll-snap-align:start;
  }
}

/* MOBILE TAG GRID */
@media (max-width:720px) {
  .profile-credentials .profile-skills,.profile-tools {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%; gap:8px; overflow:visible; padding:2px 0 8px;
    scroll-snap-type:none;
  }
  .profile-credentials .profile-skills span,.profile-tools span {
    width:100%; min-width:0; text-align:center; white-space:nowrap;
  }
}

/* MOBILE SINGLE ROW TAGS */
@media (max-width:720px) {
  .profile-credentials .profile-skills,.profile-tools {
    display:flex; flex-wrap:nowrap; align-items:stretch; gap:6px;
    width:100%; overflow-x:auto; overflow-y:hidden; padding:2px 0 8px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain; scroll-snap-type:x proximity;
  }
  .profile-credentials .profile-skills::-webkit-scrollbar,.profile-tools::-webkit-scrollbar { display:none; }
  .profile-credentials .profile-skills span,.profile-tools span {
    flex:0 0 auto; width:auto; min-width:0; white-space:nowrap;
    text-align:center; padding:7px 8px; scroll-snap-align:start;
  }
  .profile-tools span { font-size:12px; }
}

/* FILTERED GROUP TOP SPACING */
.group-divider.is-filter-first { margin-top:0; }

/* MOBILE WORK HEADING */
@media (max-width:720px) {
  .work-section .section-head h2 {
    white-space:nowrap; font-size:clamp(28px,8.8vw,38px);
    letter-spacing:-.055em;
  }
}

/* MOBILE WORK HEADING V2 */
@media (max-width:720px) {
  .work-section .section-head h2 {
    display:block; width:max-content; max-width:none;
    white-space:nowrap; font-size:clamp(28px,8.8vw,38px);
    line-height:1; letter-spacing:-.055em;
  }
  .work-section .filters {
    width:max-content; min-width:100%; max-width:none;
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
  }
}

/* MOBILE PORTRAIT CENTER */
@media (max-width:720px) {
  .profile-portrait {
    align-self:center; justify-self:center; margin-inline:auto;
    width:min(82vw,360px); transform:none;
  }
  .profile-portrait figcaption { width:100%; gap:8px; }
  .profile-portrait figcaption span:last-child { text-align:right; }
}

/* MOBILE COPY WRAPPING */
@media (max-width:720px) {
  .hero-lede {
    max-width:100%; font-size:14px; line-height:1.8;
    letter-spacing:-.015em; text-wrap:pretty;
  }
  .hero-lede br,.approach-break { display:none; }
  .profile-approach p { max-width:100%; text-wrap:pretty; }
}

/* MOBILE COPY SEGMENTS */
@media (max-width:720px) {
  .hero-lede br,.approach-break { display:block; }
}

/* MOBILE APPROACH SEPARATOR */
.mobile-approach-break { display:none; }
@media (max-width:720px) {
  .mobile-approach-break { display:block; }
}