:root{color-scheme:dark;--paper:#c8c8c8;--ink:#030303;--line:rgba(255,255,255,.1);--accent:#ff5b1a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:#fafafa;font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif;-webkit-font-smoothing:antialiased;padding:clamp(18px,5.5vw,106px) clamp(18px,8vw,250px)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid #fff;outline-offset:5px}.frame{width:100%;max-width:1536px;min-height:min(940px,calc(100svh - 12vw));margin:auto;padding:22px 32px 28px;background:var(--ink);border-radius:24px;position:relative;display:flex;flex-direction:column}.top{display:flex;align-items:center;justify-content:space-between;gap:20px}.wordmark{font-size:48px;letter-spacing:-.075em;font-weight:500;line-height:1}.menu-toggle{flex:0 0 auto;width:56px;height:56px;border:0;border-radius:50%;background:#fafafa;display:grid;align-content:center;justify-content:center;gap:5px}.menu-toggle span{width:17px;height:1px;background:#090909;transition:transform .25s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}.intro{padding:clamp(120px,15vw,270px) 0 24px;flex:1;display:flex;align-items:flex-end}.intro h1{margin:0;font-weight:400;font-size:clamp(36px,4.1vw,66px);line-height:1.13;letter-spacing:-.045em;max-width:1200px}.work-row{display:flex;gap:11px;padding:21px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0;scroll-margin-top:24px}.covers{display:flex;gap:11px;min-width:0;flex:1;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;touch-action:pan-x pan-y;cursor:grab}.covers::-webkit-scrollbar{display:none}.covers.dragging{cursor:grabbing;scroll-snap-type:none}.cover{border:0;padding:0;position:relative;flex:1 0 0;min-width:0;height:clamp(160px,15vw,242px);border-radius:11px;overflow:hidden;isolation:isolate;background:#171717;scroll-snap-align:start;cursor:inherit;text-align:left}.cover img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .65s cubic-bezier(.2,.6,.2,1),filter .5s;pointer-events:none}.cover:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#000b);opacity:0;transition:opacity .3s;pointer-events:none}.cover-name{position:absolute;z-index:1;bottom:13px;left:12px;right:10px;font-size:11px;line-height:1.4;opacity:0;transform:translateY(5px);transition:opacity .3s,transform .3s}.cover:hover img,.cover:focus-visible img{transform:scale(1.06);filter:brightness(.85)}.cover:hover:after,.cover:focus-visible:after,.cover:hover .cover-name,.cover:focus-visible .cover-name{opacity:1}.cover:hover .cover-name,.cover:focus-visible .cover-name{transform:none}.about-card{border:0;border-radius:11px;padding:14px;flex:0 0 20%;min-width:165px;background:var(--accent);color:#fff;display:flex;flex-direction:column;justify-content:space-between;text-align:left;transition:background .25s}.about-card:hover{background:#ff702e}.about-top{display:flex;align-items:center;gap:7px;font-size:13px}.about-top i{width:16px;height:16px;border-radius:50%;background:white;display:block}.arrow{margin-left:auto;font-size:19px}.about-bottom{font-size:16px;line-height:1.5}.about-bottom>span{font-size:12px}.bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-top:21px;font-size:12px;line-height:1.4}.bottom p{margin:0}.footer-right{text-align:right}.footer-right time{display:block;margin-bottom:5px;font-variant-numeric:tabular-nums}.footer-right>div{display:flex;gap:13px;justify-content:flex-end}.bottom button{padding:0;border:0;background:none;font-size:12px}.bottom button:hover,.bottom a:hover{color:#aaa}.menu{position:absolute;z-index:5;right:32px;top:97px;width:min(420px,calc(100% - 64px));padding:20px 26px;background:#131313;box-shadow:0 16px 60px #000b;border:1px solid #292929;border-radius:14px}.menu a,.menu button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:21px 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;font-size:23px}.menu span{font-size:10px;color:#888}.menu>*:last-child{border:0}.menu[hidden]{display:none}dialog{padding:0;width:min(840px,calc(100% - 36px));max-height:90svh;border:1px solid #333;border-radius:18px;background:#080808;color:#fafafa}dialog::backdrop{background:#000a;backdrop-filter:blur(10px)}.close{position:absolute;right:15px;top:15px;width:40px;height:40px;z-index:1;border:1px solid #8885;border-radius:50%;background:#080808c9;font-size:26px}.detail-copy{padding:36px}.detail-copy h2{margin:0 0 20px;font-size:clamp(28px,4vw,44px);font-weight:400;letter-spacing:-.035em}.detail-copy>p{line-height:1.8;color:#aaa;white-space:pre-line}.detail-kicker{font-size:10px;letter-spacing:.12em;color:#888;margin-top:0}#detailImage{display:block;width:100%;max-height:44svh;object-fit:cover}#detailImage[hidden],#emailLink[hidden]{display:none}#emailLink{display:block;margin:20px 0;color:#ff7440}.return-button{margin-top:16px;border:1px solid #555;border-radius:30px;padding:12px 20px;background:transparent;font-size:12px}
@media(min-width:1700px){body{padding:5.2vw 12.5vw}.frame{min-height:940px}.intro{padding-top:260px}.intro h1{font-size:66px}.cover{height:242px}}
@media(max-width:1000px){body{padding:30px}.frame{padding:24px;min-height:calc(100svh - 60px)}.intro{padding-top:150px}.intro h1{font-size:clamp(32px,5.2vw,54px)}.cover{flex:0 0 110px;height:190px}.about-card{flex-basis:180px}.wordmark{font-size:42px}.menu{right:24px;top:94px}}
@media(max-width:600px){body{padding:14px}.frame{padding:20px 16px;border-radius:20px;min-height:calc(100svh - 28px)}.wordmark{font-size:35px}.menu-toggle{width:44px;height:44px}.intro{padding:105px 0 24px}.intro h1{font-size:clamp(25px,6.6vw,38px);line-height:1.25;letter-spacing:-.05em}.work-row{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:16px 0}.covers{width:100%;padding:2px}.cover{flex:0 0 96px;height:162px;border-radius:8px}.cover-name{opacity:1;transform:none;font-size:10px;left:9px}.cover:after{opacity:.6}.about-card{min-height:92px;min-width:0;flex-direction:row;padding:14px;border-radius:8px}.about-top{align-self:flex-start;white-space:nowrap}.about-top .arrow{display:none}.about-bottom{text-align:right;align-self:flex-end;font-size:14px}.about-bottom>span{font-size:11px}.bottom{font-size:10px;gap:22px;padding-top:18px;align-items:flex-start}.footer-right{flex-shrink:0}.footer-right>div{gap:9px;flex-wrap:wrap;max-width:140px}.bottom button{font-size:10px}.footer-right time{font-size:10px}.menu{right:16px;top:82px;width:calc(100% - 32px);padding:12px 20px}.detail-copy{padding:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:after{transition:none!important}}

.covers{user-select:none}.cover:focus-visible{outline-offset:-3px}.about-bottom{font-size:13px;line-height:1.6}
/* Full-bleed black homepage */
html,body{background:#030303}
body{padding:0}
.frame{max-width:none;min-height:100svh;border-radius:0;margin:0;padding:24px clamp(24px,4vw,80px) 28px}
@media(min-width:1700px){body{padding:0}.frame{min-height:100svh}.intro{padding-top:clamp(160px,14vw,270px)}}
@media(max-width:1000px){body{padding:0}.frame{padding:24px;min-height:100svh}}
@media(max-width:600px){body{padding:0}.frame{padding:20px 16px;min-height:100svh;border-radius:0}}

/* Three-column portfolio with natural page scrolling. */
.frame{height:auto;min-height:100svh;padding-top:clamp(40px,7vh,90px);padding-bottom:40px}
.intro{flex:none;min-height:34svh;padding:40px 0 48px;align-items:flex-end}
.intro h1{font-size:clamp(30px,4.1vw,66px)}
.work-row{display:flex;flex-direction:column;gap:32px;padding:24px 0 32px}
.work-row .covers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px;width:100%;overflow:visible;cursor:default;touch-action:auto;user-select:auto}
.work-row .cover{display:block;width:100%;height:auto;aspect-ratio:16/10;min-width:0;border-radius:10px;cursor:pointer;scroll-snap-align:none}
.cover-name{opacity:1;transform:none;font-size:clamp(12px,1.15vw,18px);left:20px;bottom:18px}
.cover:after{opacity:1;inset:45% 0 0}
.work-row .about-card{flex:none;min-width:0;min-height:100px;width:100%;padding:22px;flex-direction:row;align-items:center;overflow:visible}
.about-bottom{text-align:right}.about-top{font-size:14px}.about-top .arrow{margin-left:14px}.about-bottom{font-size:14px}
.bottom{padding-top:26px}
@media(max-width:1000px){.intro{min-height:30svh}.work-row .covers{gap:18px 14px}.cover-name{left:12px;bottom:12px}}
@media(max-width:600px){.frame{padding-top:32px}.intro{min-height:26svh;padding:28px 0 32px}.intro h1{font-size:clamp(25px,6.6vw,38px)}.work-row .covers{grid-template-columns:1fr;gap:18px}.cover-name{font-size:15px;left:16px;bottom:16px}.work-row{gap:24px}.work-row .about-card{min-height:92px;padding:18px}.about-top .arrow{display:inline}}

/* Subtle navy ambience at the top of the homepage. */
.frame{isolation:isolate}
.frame:before{content:'';position:absolute;z-index:-1;pointer-events:none;top:0;left:0;right:0;height:min(78svh,820px);background:radial-gradient(ellipse at 26% 0%,#12367380 0%,#0a204c55 32%,#06132c22 56%,transparent 78%),radial-gradient(ellipse at 86% 6%,#12295c55 0%,transparent 62%);opacity:.64;animation:navy-breathe 12s ease-in-out infinite alternate}
@keyframes navy-breathe{from{opacity:.48}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.frame:before{animation:none;opacity:.72}}

/* Homepage introduction at half the previous type size. */
.intro h1{font-size:clamp(15px,2.05vw,33px);line-height:1.4}
@media(max-width:600px){.intro h1{font-size:clamp(12.5px,3.3vw,19px)}}

/* Portrait and a more spacious introduction. */
.intro{flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:46svh;padding-top:44px;padding-bottom:56px}
.avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:center 30%;display:block;margin-bottom:24px;border:1px solid #ffffff26}
@media(max-width:1000px){.intro{min-height:40svh}}
@media(max-width:600px){.intro{min-height:38svh;padding-top:32px;padding-bottom:40px}.avatar{width:68px;height:68px;margin-bottom:20px}}

/* Uneven waves: long drifts alternate with short, brighter pulses. */
.frame:before{background:radial-gradient(ellipse at 25% 8%,#174b998c 0%,#0b285b66 30%,#06132c22 56%,transparent 76%),radial-gradient(ellipse at 78% 12%,#1b3b7b77 0%,#0a1f4833 38%,transparent 68%);background-size:145% 150%,135% 145%;background-repeat:no-repeat;animation:navy-waves 19s linear infinite;will-change:opacity,background-position}
@keyframes navy-waves{
 0%,100%{opacity:.48;background-position:0% 0%,100% 0%;animation-timing-function:cubic-bezier(.45,0,.55,1)}
 24%{opacity:.68;background-position:30% 10%,70% 6%;animation-timing-function:cubic-bezier(.16,1,.3,1)}
 30%{opacity:1;background-position:65% 18%,25% 20%;animation-timing-function:cubic-bezier(.4,0,.6,1)}
 43%{opacity:.57;background-position:80% 8%,15% 10%;animation-timing-function:cubic-bezier(.45,0,.55,1)}
 68%{opacity:.76;background-position:50% 20%,45% 4%;animation-timing-function:cubic-bezier(.16,1,.3,1)}
 73%{opacity:.98;background-position:18% 5%,90% 18%;animation-timing-function:cubic-bezier(.4,0,.6,1)}
 84%{opacity:.59;background-position:8% 12%,85% 8%;animation-timing-function:cubic-bezier(.45,0,.55,1)}
}
@media(prefers-reduced-motion:reduce){.frame:before{animation:none;opacity:.72;background-position:20% 0%,80% 0%;will-change:auto}}

.avatar{width:66px;height:66px}
.profile-links{display:flex;justify-content:flex-end;align-items:center;gap:28px;position:absolute;top:32px;right:clamp(24px,4vw,80px);z-index:2}
.profile-links a,.profile-links button{font:inherit;font-size:14px;color:#eee;padding:6px 0;background:none;border:0;text-decoration:none;cursor:pointer;transition:color .2s}
.profile-links a:hover,.profile-links button:hover{color:#8bb8ff}
@media(max-width:600px){.avatar{width:51px;height:51px}.profile-links{top:20px;right:16px;gap:20px}.profile-links a,.profile-links button{font-size:12px}.intro{padding-top:56px}}

hr{border:0;border-top:1px solid rgba(255,255,255,.1)}

/* Square image edges inside card details. */
#detailImage{border-radius:0}
dialog:has(#detailImage:not([hidden])){border-radius:0}

.detail-copy #detailBody:empty { display: none; }
.contact-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block: 16px; }
.contact-row[hidden] { display: none; }
.contact-qr { display: block; flex: none; position: relative; width: clamp(76px, 25vw, 128px); aspect-ratio: 1; overflow: hidden; border-radius: 6px; }
.contact-qr img { position: absolute; width: 127.3%; max-width: none; left: -13.6%; top: -37.8%; }

@media (min-width: 641px) {
  .contact-row { position: relative; min-height: 180px; }
  .contact-qr { position: absolute; width: 180px; right: 11.2%; top: 50%; transform: translateY(-50%); }
}

.intro-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.offline-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #bcbfca;
  font-size: 13px;
  line-height: 1.5;
}

.offline-notice a {
  flex: none;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 52px;
  height: 34px;
  padding: 0 12px;
  line-height: 1;
  border: 1px solid #ffffff50;
  border-radius: 6px;
  color: #fff;
  white-space: nowrap;
}

.offline-notice a:hover,
.offline-notice a:focus-visible {
  background: #ffffff20;
}

@media (max-width: 760px) {
  .intro-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .offline-notice { font-size: 12px; }
}