/* Only changed identity fields; source layout remains in original.css. */
.personal-logo{background:transparent!important;-webkit-mask:none!important;mask:none!important;color:var(--text);overflow:visible}
.personal-logo>span{display:block;width:max-content;white-space:nowrap;font-family:var(--font-primary);font-weight:800;font-style:italic;font-size:17px;line-height:20px;letter-spacing:-.8px;transform:scaleX(.77);transform-origin:left center;color:#fff}
.site-header.is-on-light .personal-logo>span{color:#111}
.personal-greeting{position:relative;aspect-ratio:214/45;flex:none}
.personal-greeting>img{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(0 40% 0 0)}
.personal-greeting>span{position:absolute;left:64%;bottom:5px;white-space:nowrap;font-family:KaiTi,STKaiti,"Noto Serif CJK SC",serif;font-size:24px;line-height:1.14;font-style:italic;letter-spacing:-.8px;color:#fff}
.portfolio-status{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:3000;max-width:min(540px,calc(100vw - 32px));padding:14px 18px;border-radius:12px;background:#f5f5f2;color:#161616;box-shadow:0 8px 40px #0004;font:500 13px/1.7 var(--font-primary);pointer-events:none;opacity:0;transition:opacity .18s ease}
.portfolio-status.is-visible{opacity:1}
.social-preview.empty-social{padding:18px;font:400 12px/1.6 var(--font-primary);color:#171717;white-space:normal}
@media(max-width:1100px){.personal-greeting>span{font-size:20.5px;bottom:4px}}
@media(max-width:767px){.personal-logo>span{font-size:15px;line-height:18px;transform:scaleX(.76)}.personal-greeting>span{font-size:17px;bottom:3.5px}}

/* The new email is longer than the reference address; only its mobile type scales. */
@media(max-width:767px){html[data-personalized="true"] .email-link{max-width:100%;font-size:clamp(18px,5.5vw,24px)}html[data-personalized="true"] .email-link strong{font-size:inherit}}

/* Keep the official black Grsai mark readable on the dark software row. */
.story-logo-set img[src$="/software/grsai.png"]{filter:invert(1)}
.story-logo-set img[src$="/software/figma.svg"]{transform:scale(2.1)}

/* Preserve the complete HOMEROOM cover only in its small thumbnail. */
.featured-reel-thumb img[src*="/projects/homeroom/cover.png"]{object-fit:contain;background:#e8e8e8}
.featured-reel-thumb img[src*="/projects/amoji/cover.png"]{object-fit:contain;background:#4c6595}
.featured-reel-thumb img[src*="/projects/arc/cover.png"]{object-fit:contain;background:#a84d22}

.music-credit{margin:4px 12px 10px 52px;color:#aaa;font-size:10px;line-height:1.5}
.music-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}


.featured-reel-thumb img[src*="/projects/type-taste/cover.png"]{object-fit:contain;background:#f8f6ef}

.featured-reel-thumb img[src*="/projects/amoji-brand/cover.png"]{object-fit:contain;background:#22386d}

html.project-viewer-open{overflow:hidden}
#project-viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#fff;overflow:auto;overscroll-behavior:contain}
#project-viewer::backdrop{background:#fff}
.project-viewer-content{margin:0 auto}
.project-viewer-content img{display:block;width:100%;height:auto}
.project-viewer-back{position:fixed;top:12px;left:12px;z-index:1;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #d0d0cb;border-radius:50%;background:rgb(250 250 248 / 96%);color:#262522;font:26px/1 Arial,sans-serif;cursor:pointer}
.project-viewer-back:hover{background:#fff;border-color:#77756e}
.project-viewer-back:focus-visible{outline:3px solid #1767d2;outline-offset:3px}

.story-logo-module{position:relative;isolation:isolate}
.featured-reel-sticky{isolation:isolate}
.section-meteors{--meteor-travel:100svh;inset:0;height:100%;z-index:-1}

/* React Bits hover-only project entry. */
.project-sling-cover{position:absolute;inset:0}
.project-sling-cursor{position:absolute;z-index:3;left:var(--sling-x,50%);top:var(--sling-y,50%);width:44px;height:44px;transform:translate(-50%,-50%);pointer-events:none}
.project-sling-cursor .sling-button__pad{pointer-events:auto}
.project-sling-cursor .sling-button__pad[aria-disabled="true"]{opacity:1}

/* Guidance belongs to the five projects, excluding the More work link. */
.featured-reel-projects{position:relative;flex:0 0 auto}
.featured-reel-guidance{position:absolute;top:calc(100% + 32px);left:50%;width:max-content;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%);text-align:center;white-space:nowrap;pointer-events:none}
.featured-reel-guidance-arrow{margin-bottom:7px;color:#9e9e9e;font-size:12px;font-weight:400;line-height:14px}
.featured-reel-guidance-en{color:#b8b8b8;font-size:12px;font-weight:500;line-height:15px;letter-spacing:.22em;text-indent:.22em}
.featured-reel-guidance-zh{margin-top:6px;color:rgb(255 255 255 / 58%);font-size:10px;font-weight:400;line-height:14px}

/* Keep the original fan arrangement while only the hovered project moves. */
.featured-reel-tabs.is-open .featured-reel-tabs-inner{gap:var(--reel-thumb-gap-closed)}
.featured-reel-tabs.is-open .featured-reel-tab{width:var(--reel-thumb-slot)}
.featured-reel-tabs.is-open .featured-reel-thumb{transform:rotate(var(--thumb-angle))}
.featured-reel-tabs .featured-reel-tab{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.featured-reel-tabs .featured-reel-thumb{box-shadow:none}
.featured-reel-tabs .featured-reel-thumb:after{display:none}
.featured-reel-tabs.is-open .featured-reel-tab:hover{transform:none}
.featured-reel-project-name{position:absolute;top:calc(100% + 11px);left:50%;transform:translateX(-50%);color:#b8b8b8;font-size:11px;font-weight:400;line-height:14px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .3s ease}
.featured-reel-tab:focus-visible .featured-reel-project-name{opacity:1}
@media (hover:hover) and (pointer:fine){
  .featured-reel-tabs .featured-reel-tab:hover,.featured-reel-tabs.is-open .featured-reel-tab:hover{z-index:3;transform:translateY(-5px) scale(1.03)}
  .featured-reel-tab:hover .featured-reel-project-name{opacity:1}
}

/* Keep the new caption visible on short screens without resizing the cover. */
.featured-reel-tabs{bottom:max(calc(var(--reel-thumb-size) * -.75),calc(var(--reel-frame-width) * .28125 - 50svh + 74px))}
@media(max-width:767px){
  /* Use the full-width dock as the caption containing block on phones. */
  .featured-reel-projects{position:static}
  .featured-reel-tabs{bottom:max(calc(var(--reel-thumb-size) * -.75),calc(var(--reel-frame-width) * .28125 - 50svh + 83px))}
}
@media(prefers-reduced-motion:reduce){
  .featured-reel-tabs .featured-reel-tab,.featured-reel-project-name{transition:none}
  .featured-reel-tabs .featured-reel-tab:hover,.featured-reel-tabs.is-open .featured-reel-tab:hover{transform:none}
}