@font-face { font-family:"Pixer"; src:url("assets/fonts/Pixer-Regular.ttf") format("truetype"); font-display:swap; }
:root { --paper:#f3f1eb; --ink:#24231f; --muted:#77746d; --line:#d7d3ca; --accent:#9d2f25; --white:#faf9f5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans","Noto Sans SC",sans-serif; font-weight:300; }
.home-page { --paper:#fff; --ink:#24231f; --muted:#77746d; --line:#d8d8d8; --accent:#9d2f25; --white:#faf9f5; padding-top:77px; }
button,input,textarea,select { font:inherit; }
button,a { color:inherit; }
.site-header { position:relative; z-index:30; height:96px; padding:0 3vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); background:var(--paper); }
.home-page .site-header { position:fixed; inset:0 0 auto; width:100%; }
.identity-button { justify-self:start; padding:0; display:flex; flex-direction:column; align-items:flex-start; gap:5px; border:0; background:none; cursor:pointer; text-align:left; }
.brand { text-decoration:none; font-size:20px; line-height:1; font-weight:500; letter-spacing:.18em; }
.brand i { color:var(--accent); font-size:10px; vertical-align:top; font-style:normal; letter-spacing:0; }
.identity-caption { color:var(--muted); font-size:10px; line-height:1; letter-spacing:.14em; text-transform:uppercase; transition:color .2s; }
.identity-button:hover .identity-caption { color:var(--accent); }
.header-location { justify-self:center; margin:0; color:var(--muted); font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
.header-sections { justify-self:center; display:flex; gap:42px; }
.header-sections a { position:relative; padding:7px 0; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--muted); letter-spacing:.08em; text-decoration:none; }
.header-sections .nav-cn { font-size:12px; line-height:1; }
.header-sections .nav-en { font-size:10px; line-height:1; letter-spacing:.06em; }
.header-sections a::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink); transform:scaleX(0); transition:transform .25s; }
.header-sections a:hover { color:var(--ink); }
.header-sections a:hover::after { transform:scaleX(1); }
.discipline-tab { position:relative; padding:8px 0; border:0; color:var(--muted); background:none; cursor:pointer; font-size:12px; letter-spacing:.08em; }
.discipline-tab::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink); transform:scaleX(0); transition:transform .25s; }
.discipline-tab.active { color:var(--ink); }
.discipline-tab.active::after { transform:scaleX(1); }
.contact-link { justify-self:end; font-size:11px; font-weight:500; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; }
.interaction-zone { min-height:50vh; padding:3vw 3vw 0; }
.pixel-stage { --scene-width:2172px; --runner-ground:8.5%; height:calc(50vh - 3vw); min-height:360px; position:relative; overflow:hidden; isolation:isolate; background:#21a7e8; image-rendering:pixelated; outline:none; cursor:default; }
.escape-background { position:absolute; z-index:0; inset:0; background:#24aceb url('assets/interaction/escape-8bit/background.png') repeat-x center bottom/auto 100%; image-rendering:pixelated; animation:escape-background-scroll 38s linear infinite; will-change:background-position; }
.escape-title { position:absolute; z-index:12; top:1%; left:50%; width:min(30vw,440px); height:auto; transform:translateX(-50%); image-rendering:pixelated; pointer-events:none; animation:escape-title-float 2.4s steps(4) infinite; }
.pixel-layer { position:absolute; inset:0; background-repeat:repeat-x; background-position:left bottom; background-size:auto 100%; image-rendering:pixelated; will-change:background-position; }
.pixel-sky { z-index:0; background-image:url('assets/interaction/rural-scene/layer-01-sky.png'); animation:pixel-scroll-sky 90s linear infinite; }
.pixel-fields { z-index:1; background-image:url('assets/interaction/rural-scene/layer-02-fields.png'); animation:pixel-scroll-fields 40s linear infinite; }
.pixel-roadside { z-index:3; background-image:url('assets/interaction/rural-scene/layer-03-roadside.png'); animation:pixel-scroll-road 18s linear infinite; }
.pixel-title { position:absolute; z-index:2; top:7%; left:50%; width:min(42vw,640px); height:auto; transform:translateX(-50%); image-rendering:pixelated; filter:drop-shadow(0 4px 0 rgba(40,15,35,.15)); pointer-events:none; }
.pixel-scoreboard { position:absolute; z-index:14; top:16px; left:16px; display:grid; grid-template-columns:1fr 1fr; gap:18px; min-width:190px; padding:0; color:#fff; font-family:"Pixer",monospace; text-transform:uppercase; text-shadow:2px 2px 0 rgba(36,67,111,.55); image-rendering:pixelated; }
.pixel-scoreboard section+section { padding-left:0; border-left:0; }
.pixel-scoreboard h2 { margin:0 0 6px; font:700 10px/1 monospace; letter-spacing:.04em; }
.pixel-scoreboard ul { margin:0; padding:0; display:grid; gap:4px; list-style:none; }
.pixel-scoreboard li { display:grid; grid-template-columns:20px auto; gap:5px; align-items:center; font-size:10px; }
.pixel-scoreboard img { width:18px; height:18px; object-fit:contain; image-rendering:pixelated; }
.score-icon { width:18px; height:18px; display:grid; place-items:center; }
.score-icon-text { border:2px solid currentColor; font:7px/1 "Pixer",monospace; text-shadow:none; }
.score-icon-ds { font-size:6px; }
.pixel-scoreboard b { font-weight:400; }
.pixel-player { --player-size:clamp(118px,12vw,184px); position:absolute; z-index:6; left:12%; bottom:var(--runner-ground); width:var(--player-size); aspect-ratio:220/210; background-image:url('assets/interaction/escape-8bit/player-run-v8-raised.png'); background-repeat:no-repeat; background-size:600% 100%; background-position:0 0; image-rendering:pixelated; transform:translateX(var(--runner-shift,0px)); transform-origin:50% 100%; animation:escape-run .6s steps(1,end) infinite; will-change:transform,background-position; }
.escape-target { --target-height:clamp(62px,6vw,92px); position:absolute; z-index:5; bottom:var(--runner-ground); height:var(--target-height); background-color:transparent; background-repeat:no-repeat; background-size:600% 100%; background-position:0 0; image-rendering:pixelated; transform:translateX(var(--runner-shift,0px)); transform-origin:50% 100%; animation:escape-run .55s steps(1,end) infinite; will-change:transform,background-position; }
.escape-chi { left:28%; width:calc(var(--target-height) / 2); background-image:url('assets/interaction/escape-8bit/chi-run-restored.png'); transform:translateX(var(--runner-shift,0px)) scale(2.45); transform-origin:50% 50%; }
.escape-uist { left:38%; width:calc(var(--target-height) * 1.5); background-image:url('assets/interaction/escape-8bit/uist-run-v2.png'); transform:translateX(var(--runner-shift,0px)) scale(.9); transform-origin:50% 50%; animation-delay:-.18s; }
.escape-dis { left:51%; bottom:calc(var(--runner-ground) + 3%); width:calc(var(--target-height) * 1.25); color:#f7f7f4; background:none; transform:translateX(var(--runner-shift,0px)); animation:none; filter:drop-shadow(3px 3px 0 rgba(58,65,73,.35)); }
.escape-dis span { position:absolute; z-index:2; top:12%; left:50%; color:#f7f7f4; background:transparent; font:clamp(29px,3vw,44px)/1 "Pixer",monospace; letter-spacing:.02em; text-shadow:-2px 0 #747c83,0 2px #747c83,2px 0 #747c83,0 -2px #747c83,2px 2px 0 #929aa1; transform:translateX(-50%); white-space:nowrap; }
.escape-dis i { position:absolute; z-index:1; bottom:-3%; left:43%; width:9px; height:45%; background:#edf0f1; box-shadow:inset -3px 0 0 #858d94,0 3px 0 #6f7780; transform-origin:50% 0; animation:dis-leg-run .3s steps(1,end) infinite; }
.escape-dis i:last-child { left:57%; animation-delay:-.15s; }
.winged-award { position:absolute; z-index:5; left:104%; width:84px; height:34px; background:transparent; image-rendering:pixelated; will-change:left,top,opacity; }
.winged-award img { position:absolute; z-index:2; inset:6px auto auto 4px; width:24px; height:24px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(2px 2px 0 rgba(36,67,111,.28)); }
.winged-award::before,.winged-award::after { content:''; position:absolute; z-index:1; background:#fff; image-rendering:pixelated; animation:award-exhaust .28s steps(2) infinite; }
.winged-award::before { top:10px; right:38px; width:11px; height:11px; box-shadow:10px 4px 0 #fff,20px -2px 0 rgba(255,255,255,.9),30px 5px 0 rgba(255,255,255,.7); }
.winged-award::after { top:18px; right:4px; width:8px; height:8px; box-shadow:-10px -12px 0 rgba(255,255,255,.75); opacity:.75; animation-delay:-.14s; }
.winged-red-dot { animation:award-flight-red 5.4s linear infinite; }
.winged-if { animation:award-flight-if 6.2s linear -2.7s infinite; }
.pixel-collectible { position:absolute; z-index:5; width:42px; height:42px; padding:0; border:0; background:none; cursor:pointer; image-rendering:pixelated; animation:publication-fly 8s linear infinite,pixel-bob 1.2s steps(2) infinite; }
.pixel-collectible img { width:100%; height:100%; display:block; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(3px 3px 0 rgba(30,55,68,.35)); }
.collectible-chi { top:35%; left:72%; }
.collectible-uist { top:23%; left:104%; animation-delay:-3.7s,-.4s; }
@keyframes pixel-scroll-sky { to { background-position-x:-1086px; } }
@keyframes pixel-scroll-fields { to { background-position-x:-2172px; } }
@keyframes pixel-scroll-road { to { background-position-x:-2172px; } }
@keyframes escape-background-scroll { to { background-position-x:-2172px; } }
@keyframes escape-title-float { 0%,100% { transform:translate(-50%,0); } 50% { transform:translate(-50%,7px); } }
@keyframes escape-run {
  0%,16.666% { background-position-x:0; }
  16.667%,33.333% { background-position-x:20%; }
  33.334%,50% { background-position-x:40%; }
  50.001%,66.666% { background-position-x:60%; }
  66.667%,83.333% { background-position-x:80%; }
  83.334%,100% { background-position-x:100%; }
}
@keyframes dis-leg-run {
  0%,16.666% { transform:rotate(-30deg); }
  16.667%,33.333% { transform:rotate(-17deg); }
  33.334%,50% { transform:rotate(-4deg); }
  50.001%,66.666% { transform:rotate(28deg); }
  66.667%,83.333% { transform:rotate(14deg); }
  83.334%,100% { transform:rotate(2deg); }
}
@keyframes award-flight-red {
  0% { left:104%; top:14%; opacity:0; }
  4% { opacity:1; }
  29% { top:calc(88% - 34px); }
  55% { top:0; }
  79% { top:calc(88% - 34px); }
  93% { opacity:1; }
  100% { left:-7%; top:38%; opacity:0; }
}
@keyframes award-flight-if {
  0% { left:108%; top:62%; opacity:0; }
  5% { opacity:1; }
  25% { top:0; }
  51% { top:calc(88% - 34px); }
  76% { top:0; }
  93% { opacity:1; }
  100% { left:-7%; top:54%; opacity:0; }
}
@keyframes award-exhaust { 50% { transform:translateX(5px) scale(.75); opacity:.35; } }
@keyframes publication-fly { from { margin-left:35%; } to { margin-left:-125%; } }
@keyframes pixel-bob { 50% { margin-top:-8px; } }
.profile-zone { height:300px; margin:32px 3vw 0; padding:30px; display:grid; grid-template-columns:minmax(520px,1.6fr) minmax(150px,.5fr) minmax(280px,.9fr); gap:3vw; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.profile-kicker { margin:0 0 24px; color:var(--muted); font-size:10px; letter-spacing:.15em; text-transform:uppercase; }
.profile-intro blockquote { max-width:520px; margin:0; padding:0; }
.profile-intro blockquote p { margin:0; font-size:12px; line-height:1.65; }
.profile-intro blockquote p+ p { margin-top:12px; color:var(--muted); font-size:12px; }
.profile-details { display:grid; grid-template-columns:1.35fr .65fr; gap:42px 32px; align-content:start; }
.profile-group { min-width:0; }
.profile-details>.profile-group:not(.skills-group) { min-height:104px; }
.profile-group h2 { margin:0 0 24px; font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.education-list { margin:0; padding:0; display:grid; gap:20px; list-style:none; }
.education-list li { display:grid; grid-template-columns:78px 1fr; gap:12px; align-items:center; }
.education-list time { color:var(--muted); font-size:10px; }
.education-list div { display:flex; align-items:center; gap:10px; }
.education-list strong { font-size:12px; font-weight:400; }
.education-list span { color:var(--muted); font-size:11px; }
.profile-tags { margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px 12px; list-style:none; }
.profile-tags li { font-size:12px; line-height:1.5; }
.profile-tags li::before { content:'·'; margin-right:7px; color:var(--muted); }
.skills-group { grid-column:1/-1; }
.skill-list { margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.skill-list div { min-width:0; }
.skill-list dt { margin:0 0 6px; color:var(--muted); font-size:11px; }
.skill-list dd { margin:0; font-size:11px; line-height:1.55; }
.profile-photo { height:240px; margin:0; display:grid; place-items:center; align-self:center; overflow:hidden; border:1px dashed var(--line); background:#f7f7f7; }
.profile-photo span { color:var(--muted); font-size:10px; line-height:1.5; letter-spacing:.12em; text-align:center; text-transform:uppercase; }
.works-intro { padding:72px 3vw 0; display:flex; align-items:end; justify-content:space-between; }
.works-intro p { margin:0; font-size:22px; font-weight:400; }
.works-intro span { color:var(--muted); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.hero-carousel { position:relative; min-height:calc(100vh - 96px); padding:3vw; overflow:hidden; }
.carousel-viewport { position:relative; min-height:calc(100vh - 96px - 6vw); overflow:hidden; background:#ddd9d0; }
.carousel-slide { position:absolute; inset:0; display:block; opacity:0; visibility:hidden; cursor:pointer; text-decoration:none; transform:scale(1.015); transition:opacity .65s ease,transform .85s cubic-bezier(.22,.61,.36,1),visibility .65s; }
.carousel-slide.active { opacity:1; visibility:visible; transform:none; }
.slide-placeholder { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; }
.slide-placeholder::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.38)); }
.slide-placeholder img { width:100%; height:100%; display:block; object-fit:cover; }
.slide-placeholder span { position:absolute; right:24px; top:22px; color:rgba(35,34,31,.5); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.slide-one .slide-placeholder { background:linear-gradient(135deg,#c8c4ba,#e4e1da 55%,#b8b2a6); }
.slide-two .slide-placeholder { background:linear-gradient(135deg,#aeb5b1,#dfe2dc 52%,#9aa29e); }
.slide-three .slide-placeholder { background:linear-gradient(135deg,#c4b5ab,#e8ddd5 52%,#aaa09b); }
.slide-caption { position:absolute; z-index:2; left:4vw; bottom:4vw; color:#fff; }
.slide-caption p { margin:0 0 18px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.slide-caption h1 { margin:0; font-size:clamp(42px,6.3vw,96px); line-height:.92; letter-spacing:-.055em; font-weight:300; }
.carousel-controls { position:absolute; z-index:5; inset:3vw; pointer-events:none; }
.carousel-dots { position:absolute; right:3vw; bottom:2vw; display:flex; gap:8px; pointer-events:auto; }
.carousel-dot { width:28px; height:2px; padding:0; border:0; background:rgba(36,35,31,.25); cursor:pointer; transition:width .25s,background .25s; }
.carousel-dot.active { width:48px; background:var(--ink); }
.carousel-arrows { position:absolute; inset:0; }
.carousel-arrows button { position:absolute; top:50%; width:38px; height:38px; padding:0; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(255,255,255,.42); box-shadow:0 2px 14px rgba(0,0,0,.06); backdrop-filter:blur(8px); cursor:pointer; pointer-events:auto; transform:translateY(-50%); transition:background .2s,opacity .2s; }
.carousel-arrows button:first-child { left:18px; }
.carousel-arrows button:last-child { right:18px; }
.carousel-arrows button:hover { background:rgba(255,255,255,.68); }
.carousel-arrows button img { width:17px; height:17px; display:block; filter:brightness(0) invert(1); }
.carousel-arrows button:first-child img { transform:rotate(180deg); }
.content-switcher { position:sticky; top:0; z-index:20; height:84px; padding:0 3vw; display:flex; align-items:center; justify-content:center; gap:54px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(221,221,221,.9); backdrop-filter:blur(16px); }
.content-switcher .discipline-tab { font-size:13px; }
.practice-view { padding:70px 3vw 140px; }
.practice-heading { margin-bottom:24px; display:flex; justify-content:space-between; color:var(--muted); font-size:10px; letter-spacing:.15em; text-transform:uppercase; }
.practice-heading p { margin:0; }
.practice-columns { border-top:1px solid var(--line); }
.practice-column { min-width:0; padding:34px 0 46px; display:grid; grid-template-columns:minmax(150px,.55fr) 2.45fr; gap:3vw; border-bottom:1px solid var(--line); }
.column-head { min-height:0; position:relative; }
.column-head>span { position:absolute; left:0; bottom:0; color:#999; font-size:10px; }
.column-head h2 { margin:0 0 7px; font-size:24px; font-weight:400; letter-spacing:-.03em; }
.column-head p { margin:0; color:var(--muted); font-size:10px; letter-spacing:.1em; }
.column-projects { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.practice-card { min-width:0; color:inherit; text-decoration:none; }
.practice-card-image { aspect-ratio:4/3; overflow:hidden; background:#4a4a4a; }
.practice-card-image img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .55s; }
.practice-card:hover img { transform:scale(1.025); }
.practice-card-meta { padding:12px 0 0; display:flex; justify-content:space-between; gap:15px; }
.practice-card h3 { margin:0; font-size:13px; font-weight:400; }
.practice-card p { margin:2px 0 0; color:var(--muted); font-size:10px; }
.practice-card .project-description { font-size:12px; }
.practice-card[hidden] { display:none; }
.about-dialog { width:min(960px,calc(100% - 40px)); max-height:calc(100vh - 40px); padding:0; border:0; color:#1d1d1b; background:#fff; box-shadow:0 30px 90px rgba(0,0,0,.22); }
.about-dialog::backdrop { background:rgba(25,24,21,.32); backdrop-filter:blur(7px); }
.about-inner { padding:28px 34px; }
.about-head { display:flex; align-items:center; justify-content:space-between; }
.about-head p { margin:0; color:#89867f; font-size:10px; letter-spacing:.15em; text-transform:uppercase; }
.about-head button { width:32px; height:32px; padding:7px; border:0; background:none; cursor:pointer; }
.about-head button img { width:100%; height:100%; display:block; }
.about-content { margin:22px 0 54px; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.about-photo-stage { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:#f1f0ec; }
.about-photo { width:100%; height:100%; display:block; object-fit:cover; object-position:center 62%; }
.about-photo[hidden] { display:none; }
.about-photo-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:#e5e5e5; color:#252525; text-align:center; }
.about-photo-placeholder[hidden] { display:none; }
.about-photo-placeholder span { font-size:18px; }
.about-photo-placeholder small { color:#89867f; font-size:9px; letter-spacing:.12em; }
.about-story h2 { margin:0; font-size:12px; font-style:italic; font-weight:600; letter-spacing:.04em; }
.about-story { align-self:center; max-width:390px; }
.about-story h2 { margin-bottom:28px; font-style:normal; font-size:15px; }
.about-story p { margin:0 0 14px; font-size:12px; line-height:1.9; text-align:justify; }
.about-hobby-block { margin-top:22px; }
.about-hobby-block h3 { margin:0 0 10px; font-size:11px; font-style:italic; font-weight:600; letter-spacing:.04em; }
.about-hobby-buttons { display:flex; flex-wrap:wrap; gap:7px; }
.about-hobby-buttons button { padding:6px 11px; border:1px solid #c9c7c1; border-radius:2px; background:#fff; color:#252525; font:inherit; font-size:11px; line-height:1.3; cursor:pointer; transition:background-color .18s ease,color .18s ease,border-color .18s ease; }
.about-hobby-buttons button:hover { border-color:#252525; }
.about-hobby-buttons button.is-active { border-color:#252525; background:#252525; color:#fff; }
.about-hobby-buttons button:focus-visible { outline:2px solid #252525; outline-offset:2px; }
.hero { min-height:65vh; padding:10vh 5vw 6vh; display:flex; flex-direction:column; justify-content:space-between; }
.eyebrow { margin:0 0 28px; color:var(--accent); font-size:10px; text-transform:uppercase; letter-spacing:.18em; font-weight:500; }
.hero h1 { margin:0; max-width:1050px; font-size:clamp(48px,7.7vw,118px); line-height:.91; letter-spacing:-.055em; font-weight:300; }
.hero h1 em { font-family:Georgia,serif; font-weight:400; }
.hero-meta { display:flex; align-items:flex-end; justify-content:space-between; margin-top:70px; }
.hero-meta p { margin:0; color:var(--muted); font-size:12px; line-height:1.85; }
.scroll-hint { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.scroll-hint i { color:var(--accent); font-style:normal; margin-left:12px; }
.category-nav { position:sticky; top:0; z-index:10; display:flex; justify-content:center; padding:18px 2vw; background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(12px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.tabs { display:flex; align-items:center; gap:7px; padding:5px; background:#e5e2db; border-radius:100px; }
.tab { min-width:150px; padding:11px 18px; border:0; border-radius:100px; color:var(--muted); background:transparent; cursor:pointer; font-size:11px; letter-spacing:.06em; transition:.25s; }
.tab.active { color:var(--white); background:var(--ink); }
.works { padding:70px 3vw 140px; }
.works-heading { display:flex; justify-content:space-between; margin-bottom:24px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.15em; }
.works-heading p { margin:0; }
.project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:85px 20px; }
.project-card { min-width:0; }
.project-card.has-detail { cursor:pointer; }
.project-image { position:relative; aspect-ratio:4/3; overflow:hidden; background:#ddd9d0; }
.project-image img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .7s cubic-bezier(.22,.61,.36,1),filter .4s; }
.project-card:hover img { transform:scale(1.025); }
.card-actions { position:absolute; right:12px; top:12px; display:flex; gap:6px; opacity:0; transition:.2s; }
.project-card:hover .card-actions { opacity:1; }
.attachment,.delete-project { border:0; padding:7px 9px; background:rgba(250,249,245,.92); font-size:10px; text-decoration:none; cursor:pointer; }
.delete-project { color:var(--accent); }
.project-info { width:100%; padding-top:15px; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:30px; row-gap:8px; align-items:center; }
.project-info > div { display:contents; }
.project-info h2 { grid-column:1; grid-row:1; margin:0; font-size:16px; line-height:1.35; font-weight:400; letter-spacing:-.02em; }
.project-info h2 .project-award-logo { width:18px; height:18px; margin-left:8px; display:inline-block; object-fit:contain; vertical-align:-4px; }
.project-description { grid-column:1/-1; grid-row:2; width:100%; max-width:none; margin:0; padding:0; box-sizing:border-box; color:var(--muted); font-size:12px; line-height:1.65; white-space:pre-line; }
.project-year { grid-column:2; grid-row:1; margin:0; color:var(--muted); font-size:10px; line-height:1.35; white-space:nowrap; }
.empty-state { padding:120px 20px; text-align:center; border-top:1px solid var(--line); }
.empty-state p { color:var(--muted); }
.empty-state button { border:0; border-bottom:1px solid; padding:5px 0; background:none; cursor:pointer; }
footer { min-height:270px; padding:45px 3vw; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; color:var(--paper); background:var(--ink); }
.home-page footer { color:#ddd; background:#242424; border-top:1px solid #aaa; }
footer p,footer a { margin:0; font-size:11px; text-decoration:none; }
footer a { justify-self:center; font-family:Georgia,serif; font-size:22px; }
footer .icon-link { display:inline-flex; align-items:center; gap:5px; }
footer .icon-link img { width:13px; height:13px; filter:invert(1); }
footer p:last-child { justify-self:end; color:#8b8982; font-size:10px; letter-spacing:.12em; }
.editor { width:min(620px,calc(100% - 30px)); max-height:90vh; padding:0; border:0; color:var(--ink); background:var(--white); box-shadow:0 24px 80px rgba(0,0,0,.25); }
.editor::backdrop { background:rgba(30,29,26,.55); backdrop-filter:blur(3px); }
.editor form { padding:38px; }
.editor-head { display:flex; justify-content:space-between; margin-bottom:34px; }
.editor h2 { margin:0; font-family:Georgia,serif; font-size:36px; font-weight:400; }
.close-button { align-self:start; border:0; background:none; cursor:pointer; font-size:28px; font-weight:200; }
.editor label { display:block; margin-bottom:22px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.14em; }
.editor input,.editor textarea,.editor select { width:100%; margin-top:8px; padding:11px 0; border:0; border-bottom:1px solid var(--line); outline:none; color:var(--ink); background:transparent; font-size:13px; text-transform:none; letter-spacing:0; border-radius:0; }
.editor textarea { resize:vertical; }
.field-row { display:grid; grid-template-columns:2fr 1fr; gap:22px; }
.file-field span { float:right; color:#aaa69d; }
.file-field input { display:none; }
.file-field b { display:block; margin-top:8px; padding:13px; border:1px dashed var(--line); color:var(--ink); font-size:11px; font-weight:400; text-align:center; text-transform:none; letter-spacing:0; cursor:pointer; }
.submit-button { width:100%; margin-top:8px; padding:15px 18px; display:flex; justify-content:space-between; border:0; color:var(--white); background:var(--ink); cursor:pointer; font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.form-error { min-height:16px; margin:0; color:var(--accent); font-size:11px; }
@media (max-width:700px) {
  .site-header { height:78px; padding:0 4vw; grid-template-columns:1fr auto auto; gap:16px; }
  .brand { font-size:17px; }
  .identity-caption { font-size:10px; }
  .header-location { display:none; }
  .contact-link { grid-column:3; font-size:10px; }
  .interaction-zone { min-height:50vh; padding:12px 12px 0; }
  .pixel-stage { height:calc(50vh - 12px); min-height:340px; }
  .escape-title { top:2%; width:min(42vw,260px); }
  .pixel-title { top:13%; width:min(68vw,420px); }
  .pixel-scoreboard { top:9px; left:9px; min-width:174px; padding:7px; gap:8px; transform:scale(.9); transform-origin:top left; }
  .pixel-stage { --runner-ground:7%; }
  .pixel-player { --player-size:112px; left:10%; }
  .pixel-collectible { width:34px; height:34px; }
  .hero-carousel { min-height:74vh; padding:12px; }
  .carousel-viewport { min-height:calc(74vh - 24px); }
  .slide-caption { left:6vw; bottom:12vh; }
  .slide-caption h1 { font-size:11vw; }
  .carousel-controls { inset:12px; }
  .carousel-arrows button { width:34px; height:34px; }
  .about-dialog { width:calc(100% - 20px); max-height:calc(100vh - 20px); }
  .about-inner { min-height:0; padding:22px 18px 34px; }
  .about-content { margin-top:20px; grid-template-columns:1fr; gap:48px; }
  .about-photo-stage { aspect-ratio:4/3; }
  .about-story { max-width:none; }
  .content-switcher { height:70px; gap:40px; }
  .content-switcher .discipline-tab { font-size:11px; }
  .practice-view { padding:50px 4vw 90px; }
  .practice-column { padding:28px 0 40px; display:block; }
  .column-head { min-height:82px; }
  .column-head>span { right:0; left:auto; top:0; bottom:auto; }
  .column-projects { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; }
  .practice-card { min-width:72vw; scroll-snap-align:start; }
  .practice-card h3 { font-size:11px; }
  .hero { min-height:70vh; padding:9vh 5vw 6vh; }
  .hero h1 { font-size:13.3vw; line-height:.96; }
  .hero-meta { margin-top:45px; }
  .scroll-hint { display:none; }
  .category-nav { padding:12px 10px; overflow:auto; justify-content:flex-start; }
  .tabs { width:100%; }
  .tab { min-width:0; flex:1; padding:10px 7px; font-size:10px; }
  .works { padding:48px 4vw 90px; }
  .project-grid { grid-template-columns:1fr; gap:60px; }
  .card-actions { opacity:1; }
  footer { grid-template-columns:1fr; gap:30px; }
  footer a,footer p:last-child { justify-self:start; }
  .editor form { padding:25px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } .pixel-layer,.pixel-player,.pixel-collectible { animation-play-state:paused!important; } }

/* Homepage portfolio sections */
.portfolio-section { position:relative; padding:52px 3vw 32px; scroll-margin-top:96px; }
.portfolio-section::after { content:''; position:absolute; right:3vw; bottom:0; left:3vw; height:1px; background:var(--line); }
.practice-view { padding-top:52px; }
.section-title-row { margin-bottom:34px; display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }
.section-title-row>div>p { margin:0 0 10px; color:var(--muted); font-size:10px; letter-spacing:.15em; text-transform:uppercase; }
.section-title-row h2 { margin:0; line-height:1; letter-spacing:-.045em; font-weight:300; }
.filter-list { margin:0; padding:0; display:flex; align-items:center; gap:24px; list-style:none; }
.filter-button { padding:7px 0; border:0; border-bottom:1px solid transparent; color:var(--muted); background:none; cursor:pointer; font-size:12px; }
.filter-button.active { color:var(--ink); border-color:var(--ink); }
.portfolio-section .project-grid,.practice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:56px 14px; }
.practice-empty-state { grid-column:1/-1; min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-top:1px solid var(--line); color:var(--muted); text-align:center; }
.practice-empty-state p { margin:0 0 7px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.practice-empty-state span { font-size:11px; }
.portfolio-section .project-card:nth-child(n+4) { display:none; }
.portfolio-section.expanded .project-card:nth-child(n+4) { display:block; }
.practice-card[hidden],.project-card[hidden] { display:none!important; }
.section-more { width:max-content; margin:42px 0 0 auto; padding:0; display:flex; align-items:center; justify-content:flex-end; gap:12px; border:0; color:var(--muted); background:none; cursor:pointer; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.section-more i { width:32px; height:32px; display:grid; place-items:center; order:-1; border:1px solid var(--line); border-radius:50%; font-size:17px; line-height:1; font-style:normal; transition:transform .25s; }
.section-more i img { width:15px; height:15px; display:block; }
.section-more.expanded i { transform:rotate(180deg); }

@media (max-width:1100px) and (min-width:701px) {
  .profile-zone { height:auto; grid-template-columns:1fr 190px; }
  .profile-photo { grid-column:2; grid-row:1; }
  .profile-intro { grid-column:1/-1; }
}

@media (max-width:700px) {
  .home-page { padding-top:62px; }
  .header-sections { gap:16px; }
  .header-sections a { font-size:10px; }
  .profile-zone { height:auto; margin:22px 4vw 0; padding:30px; grid-template-columns:1fr; gap:42px; }
  .profile-details { grid-template-columns:1fr; gap:36px; }
  .profile-details>.profile-group:not(.skills-group) { min-height:0; }
  .profile-tags { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .skills-group { grid-column:auto; }
  .skill-list { grid-template-columns:1fr; gap:14px; }
  .profile-photo { width:min(240px,100%); height:300px; justify-self:start; }
  .works-intro { padding-top:55px; }
  .portfolio-section { padding:52px 4vw 28px; }
  .section-title-row { align-items:flex-start; flex-direction:column; }
  .filter-list { width:100%; gap:18px; overflow-x:auto; }
  .filter-button { white-space:nowrap; }
  .portfolio-section .project-grid,.practice-grid { grid-template-columns:1fr; gap:45px; }
  .portfolio-section .project-card:nth-child(n+4) { display:none; }
}

/* Homepage wrap — aligned with the 1026px project-detail layout */
.home-page .site-header { height:77px; padding:0; display:block; }
.header-wrap,.home-wrap,.footer-wrap { width:calc(100% - 24px); max-width:1026px; margin:0 auto; }
.header-wrap { width:100%; max-width:none; height:100%; padding:0 3vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.interaction-zone { min-height:0; padding:20px 0 0; }
.pixel-stage { width:100%; height:calc(50vh - 3vw); min-height:360px; aspect-ratio:auto; }
.profile-zone { height:auto; min-height:0; margin:32px 0 0; padding:0; display:block; border-bottom:0; }
.profile-details { display:block; }
.profile-details > .profile-group { min-height:0; padding:18px 0; display:grid; grid-template-columns:180px minmax(0,1fr); gap:32px; align-items:start; border-bottom:1px solid var(--line); }
.profile-details > .profile-group:not(.skills-group) { min-height:0; }
.profile-group h2,.profile-kicker { margin:0; padding-top:2px; }
.education-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 36px; }
.profile-tags { display:flex; flex-wrap:wrap; gap:10px 28px; }
.skills-group { grid-column:auto; }
.skill-list { grid-template-columns:repeat(4,minmax(0,1fr)); }
.achievement-list { margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; list-style:none; }
.achievement-list li { min-width:0; display:flex; flex-direction:column; gap:5px; }
.achievement-list strong { font-size:11px; font-weight:400; line-height:1.4; }
.achievement-list span { color:var(--muted); font-size:10px; }
.works-intro { padding:36px 0 0; }
.hero-carousel { min-height:0; padding:20px 0 0; }
.carousel-viewport { width:100%; height:577px; min-height:0; aspect-ratio:auto; }
.carousel-controls { inset:20px 0 0; }
.slide-caption { left:38px; bottom:38px; }
.carousel-dots { right:24px; bottom:24px; }
.portfolio-section,.practice-view,.works { padding-right:0; padding-left:0; }
.portfolio-section::after { right:0; left:0; }
.portfolio-section .project-grid,.practice-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:56px 14px; }
.project-image,.practice-card-image { aspect-ratio:4/3; }
.home-page footer { padding:0; display:block; }
.footer-wrap { min-height:260px; padding:56px 0 30px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:42px; align-items:start; justify-items:center; }
.contact-group { width:100%; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.contact-group h3 { margin:0 0 8px; color:#8b8982; font-size:9px; font-weight:400; letter-spacing:.13em; text-transform:uppercase; }
.footer-wrap .contact-group a,.footer-wrap .contact-group p { justify-self:auto; color:#ddd; font-family:inherit; font-size:11px; line-height:1.6; text-decoration:none; }
.contact-email a { width:min(100%,290px); text-align:left; }
.contact-email h3 { transform:translateX(-18px); }
.contact-email small { margin-left:8px; color:#ddd; font-size:11px; white-space:nowrap; }
.footer-wrap .contact-group a { border-bottom:1px solid transparent; transition:border-color .2s; }
.footer-wrap .contact-group a:hover { border-color:#ddd; }
.footer-wrap .contact-copyright { grid-column:1/-1; justify-self:center; margin-top:25px; color:#8b8982; font-size:9px; letter-spacing:.12em; }

@media (max-width:1100px) and (min-width:701px) {
  .profile-details > .profile-group { grid-template-columns:150px minmax(0,1fr); }
  .skill-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .achievement-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:700px) {
  .home-page .site-header { height:62px; }
  .home-wrap,.footer-wrap { width:calc(100% - 24px); }
  .header-wrap { width:100%; padding:0 4vw; grid-template-columns:1fr auto auto; gap:16px; }
  .interaction-zone { padding-top:12px; }
  .pixel-stage { height:calc(50vh - 12px); min-height:340px; aspect-ratio:auto; }
  .profile-zone { margin-top:22px; padding:0; }
  .profile-details > .profile-group { min-height:0; padding:16px 0; grid-template-columns:1fr; gap:14px; }
  .profile-details > .profile-group:not(.skills-group) { min-height:0; }
  .education-list { grid-template-columns:1fr; }
  .skill-list { grid-template-columns:1fr; gap:14px; }
  .achievement-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .works-intro { padding-top:36px; }
  .hero-carousel { min-height:0; padding:12px 0 0; }
  .carousel-viewport { height:577px; min-height:0; aspect-ratio:auto; }
  .carousel-controls { inset:12px 0 0; }
  .slide-caption { left:22px; bottom:54px; }
  .carousel-dots { right:18px; bottom:18px; }
  .portfolio-section { padding-right:0; padding-left:0; }
  .portfolio-section .project-grid,.practice-grid { grid-template-columns:1fr; gap:45px; }
  .footer-wrap { min-height:180px; grid-template-columns:1fr; gap:34px; padding:42px 0 28px; }
  .contact-group { align-items:flex-start; text-align:left; }
  .contact-email h3 { transform:none; }
  .footer-wrap .contact-copyright { grid-column:auto; justify-self:start; margin-top:8px; }
}

/* Résumé-style profile block */
.profile-zone { margin:0; padding:32px; border:0; background:transparent; }
.profile-primary { display:grid; grid-template-columns:calc((100% - 76px)/3) minmax(0,1fr); gap:38px; align-items:start; }
.profile-primary > .profile-group { min-width:0; }
.profile-group h2 { margin:0 0 12px; padding:0 0 14px; border-bottom:1px solid #aaa; font-size:12px; font-weight:500; letter-spacing:.1em; }
.basic-info-list { margin:0; display:grid; gap:14px; }
.basic-info-list div { height:52px; display:grid; grid-template-rows:28px 24px; align-items:center; }
.basic-info-list dt,.basic-info-list dd { margin:0; font-size:12px; line-height:1.35; }
.basic-info-list dt { color:var(--ink); font-weight:600; }
.basic-info-list dd { color:var(--ink); }
.education-list { display:grid; grid-template-columns:1fr; gap:14px; }
.education-list li { height:52px; padding:0; grid-template-columns:220px minmax(0,1fr); grid-template-rows:28px 24px; column-gap:34px; row-gap:0; align-items:center; }
.education-list time { color:var(--muted); font-size:12px; font-weight:400; line-height:1.35; letter-spacing:.03em; }
.education-list li > div { display:contents; }
.education-list .education-heading strong { grid-column:1; grid-row:1; }
.education-list .education-heading time { grid-column:1; grid-row:2; align-self:center; }
.education-list li > div:last-child > span { grid-column:2; grid-row:1; }
.education-list li > div:last-child > p { grid-column:2; grid-row:2; align-self:center; }
.education-list .education-heading strong { font-size:12px; font-weight:500; line-height:1.25; }
.education-list span { color:var(--ink); font-size:12px; font-weight:500; }
.education-list p { max-width:720px; margin:0; color:var(--muted); font-size:12px; line-height:1.35; }
@media (min-width:1000px) {
  .education-list .education-heading strong,.education-list p { white-space:nowrap; }
}
.profile-secondary { margin-top:34px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:38px; }
.profile-secondary > .profile-group { min-width:0; }
.profile-secondary .profile-group h2 { font-size:12px; }
.profile-secondary .skill-list,.profile-secondary .achievement-list { display:grid; grid-template-columns:1fr; gap:0; }
.profile-secondary .skill-list div,.profile-secondary .achievement-list li { height:30px; padding:0; display:grid; grid-template-columns:minmax(100px,.8fr) 1.2fr; gap:12px; align-items:center; border-bottom:1px solid #ddd; }
.profile-secondary .achievement-list li { grid-template-columns:18px minmax(100px,1fr) auto; gap:9px; }
.profile-secondary .achievement-list img { width:18px; height:18px; display:block; object-fit:contain; }
.profile-secondary .skill-list dt,.profile-secondary .skill-list dd,.profile-secondary .achievement-list strong,.profile-secondary .achievement-list span { margin:0; font-size:11px; line-height:1.4; }
.profile-secondary .skill-list dt,.profile-secondary .achievement-list strong { color:var(--ink); font-weight:400; }
.profile-secondary .skill-list dd,.profile-secondary .achievement-list span { color:var(--muted); }
.profile-secondary .achievement-list span { padding-right:18px; justify-self:end; text-align:right; }
.publication-list p { height:30px; margin:0; padding:0; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #ddd; font-size:11px; line-height:1.4; }
.publication-list p span:last-child:not(:first-child) { padding-right:18px; }
.publication-list p + p { color:var(--muted); }
.profile-secondary .profile-tags { display:grid; grid-template-columns:1fr; gap:0; }
.profile-secondary .profile-tags li { padding:7px 0 0; border-bottom:1px solid #ddd; font-size:11px; }
.profile-secondary .profile-tags li::before { margin-right:10px; }

@media (max-width:800px) {
  .profile-zone { padding:24px; }
  .profile-primary { grid-template-columns:calc((100% - 60px)/3) minmax(0,1fr); gap:30px; }
  .education-list li { grid-template-columns:130px minmax(0,1fr); column-gap:24px; }
  .profile-secondary { grid-template-columns:1fr; gap:32px; }
}

@media (max-width:700px) {
  .profile-primary { grid-template-columns:1fr; gap:34px; }
  .education-list li { height:auto; min-height:72px; padding:6px 0; }
}

@media (max-width:500px) {
  .profile-zone { padding:20px; }
  .profile-primary { grid-template-columns:1fr; gap:34px; }
  .education-list li { grid-template-columns:1fr; grid-template-rows:auto; gap:4px; }
  .education-list .education-heading strong,
  .education-list .education-heading time,
  .education-list li > div:last-child > span,
  .education-list li > div:last-child > p { grid-column:1; grid-row:auto; }
}

/* Prerendered intro: plays once and holds on the final black frame. */
#pixelStage { background:#000; height:auto; min-height:0; aspect-ratio:1280/440; }
.home-intro-video { display:block; width:100%; height:100%; object-fit:cover; background:#000; }
.home-showcase-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; pointer-events:none; }
.home-poemcraft-video { transform:scale(1.03); }