/* Approved refinement, 13 October 2026. Keeps the established scene and motion. */
:root{--layout-space:clamp(20px,4vw,52px)}
body{font-size:16px}h2{letter-spacing:-.035em;font-size:clamp(34px,4vw,56px)}
.site-header{height:88px;padding-inline:var(--layout-space)}.location{font-size:13px;letter-spacing:.7px;left:13%}.header-email{font-size:14px;min-height:44px}
.studio-pin{height:calc(100svh - 88px);min-height:540px;padding-bottom:24px}.studio-intro p{font-size:18px;letter-spacing:1.4px}.studio-intro>span{font-size:14px;letter-spacing:.6px}.studio-role{display:none}
.studio-signature{font-size:14px;padding:14px 22px}.hero-bottom p{font-size:14px;line-height:1.7}.hero-bottom{margin-top:20px}.explore-link{font-size:15px;padding:12px 22px;background:var(--color-ink);color:var(--color-surface);border-radius:28px}.arrow-circle{border:0;width:20px;height:20px}.hero-zalo{font-size:14px;padding:12px 0}
.nav-pill a{font-size:14px;padding:12px 22px}.nav-pill{border:0;box-shadow:0 10px 26px -18px #20222035}
#work{padding:72px var(--layout-space) 80px;background:#fafbf9;border:0;max-width:1280px}.section-heading{margin-bottom:48px}.section-heading>p{font-size:16px;line-height:1.8;max-width:380px}.section-heading h2 span,.about-intro h2 span{color:inherit}
.work-layout{grid-template-columns:240px minmax(0,1fr);gap:48px}.profile-card{padding:0;background:transparent;border-radius:0}.profile-avatar{width:80px;height:80px;margin-bottom:24px}.work-sidebar h3,.profile-card h3{font-size:20px;font-weight:600;letter-spacing:-.5px}.profile-card h3 span{font-size:14px;margin-top:10px}.profile-card p{font-size:16px;margin:24px 0;line-height:1.8}.profile-card a{font-size:14px;padding:14px 0;min-height:44px}.expertise{margin:32px 0}.expertise li{font-size:15px;padding:14px 0}.toolbox{padding:0}.toolbox p{font-size:14px}.tool{width:36px;height:36px}.gpt{font-size:12px}.side-contact{font-size:15px;padding:18px 20px;border-radius:10px}
.library-top{align-items:flex-start;gap:14px}.filters{gap:4px 8px}.filters button{font-size:14px;padding:12px 14px;min-height:44px}.filters small{font-size:13px}.search-toggle{padding:14px;border:0;background:var(--color-paper)}.search-toggle svg{width:20px;height:20px}.collection-intro{font-size:14px;margin:26px 0 18px}.original-library{background:transparent;border:0;border-radius:0;padding:12px 0 20px;margin-bottom:28px;box-shadow:none!important;align-items:center;border-bottom:1px solid var(--color-rule)}.original-library strong{font-size:16px}.original-library small{font-size:14px}.original-library>span:last-child{font-size:24px}
.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}.project-image{aspect-ratio:1/1;border-radius:14px}.project-image::after{display:none}.project-meta{font-size:13px;text-transform:none;letter-spacing:0;margin-bottom:8px}.project-info{padding-top:18px}.project-info h3{font-size:18px;line-height:1.6;letter-spacing:-.3px}.play-dot{width:48px;height:48px;font-size:15px;right:14px;bottom:14px}.video-time{font-size:13px;left:14px;bottom:20px;padding:6px 9px}.project-arrow{font-size:20px!important}.load-more{font-size:15px;min-height:54px;border-radius:10px}.library-foot{font-size:14px;line-height:1.8}
.about-section{max-width:1176px;padding-top:80px}.about-intro{gap:64px}.about-intro h2{font-size:48px;letter-spacing:-.035em}.about-intro p:not(.section-label){font-size:16px;line-height:1.9}.about-photo span{font-size:13px;letter-spacing:.4px}.journey h3{font-size:22px}.journey article{grid-template-columns:155px minmax(0,1fr);gap:22px;padding:26px 0}.journey article>span{font-size:14px}.journey h4{font-size:18px}.journey article p,.community{font-size:15px}.journey{gap:64px}
footer{padding:88px var(--layout-space) 32px}.contact-top{gap:40px;flex-wrap:wrap}.contact-top p{font-size:clamp(36px,4.5vw,64px);letter-spacing:-.035em}.contact-sticker{font-size:18px}.contact-button{width:auto;height:auto;min-height:56px;border:0;border-radius:12px;background:#fafbf9;color:#202220;display:flex;gap:28px;padding:18px 24px;font-size:16px}.contact-button>span:last-child{font-size:24px}.contact-links{margin-top:56px;padding-bottom:36px}.contact-links a{font-size:15px;padding-block:10px}.footer-meta{font-size:13px;line-height:1.8}

@media(max-width:900px){.work-layout{grid-template-columns:200px minmax(0,1fr);gap:28px}.section-heading{align-items:start}.section-heading>p{max-width:290px}.about-intro{gap:36px}.about-intro h2{font-size:36px}.contact-sticker{display:none}.contact-top{align-items:flex-start}.contact-top p{flex-basis:60%}.journey article{display:block}.journey article>span{display:block;margin-bottom:10px}}
@media(max-width:600px){.site-header{height:74px}.header-email{font-size:13px}.studio-pin{height:calc(100svh - 74px);padding-bottom:40px;min-height:620px}.studio-intro{align-items:flex-start}.studio-intro p{font-size:15px;letter-spacing:.5px}.studio-intro>span{font-size:13px;letter-spacing:0;max-width:100px;text-align:right;line-height:1.6}.studio-signature{font-size:13px;padding:13px 18px}.hero-bottom{gap:12px;flex-wrap:wrap}.hero-bottom p{display:none}.explore-link{font-size:14px;padding:12px 18px}.hero-zalo{font-size:13px;margin-left:0}.nav-pill a{font-size:13px;padding:14px 17px}.nav-pill{bottom:16px}#work{padding:44px 20px 56px}.section-heading{margin-bottom:32px}.section-heading h2{font-size:36px}.section-heading>p{font-size:15px;max-width:none;margin-top:20px}.work-layout{display:block}.work-sidebar{display:none}.filters{flex-wrap:nowrap;overflow-x:auto;max-width:calc(100vw - 92px);padding-bottom:8px}.filters button{font-size:14px;flex-shrink:0}.filters small{display:inline}.library-top{align-items:center}.collection-intro{font-size:13px;margin-top:20px}.collection-intro p{font-size:13px}.original-library strong{font-size:15px}.original-library small{font-size:13px;max-width:260px}.project-grid{gap:30px 14px}.project-info h3{font-size:15px}.project-meta{font-size:13px}.project-info{padding-top:13px}.play-dot{width:40px;height:40px;right:10px;bottom:10px}.video-time{font-size:12px;left:10px;bottom:15px}.about-intro h2{font-size:36px}.about-intro p:not(.section-label){font-size:16px}.about-photo span{font-size:13px}.journey h3{font-size:22px}.journey article{padding:22px 0}.journey h4{font-size:18px}.journey article>span{font-size:14px}.journey article p,.community{font-size:15px}.contact-top p{font-size:38px;flex-basis:100%}.contact-top{gap:28px}.contact-button{margin:0;font-size:16px}.contact-links{margin-top:28px;gap:8px}.contact-links a{font-size:14px;white-space:normal}.footer-meta{font-size:13px}footer{padding:52px 20px 120px}}
/* Keep the existing accent and reserve space for the companion. */
:root{--color-accent:#e66a30;--color-accent-dark:#a4441c}.contact-sticker{background:var(--color-accent)}
.cao-pet-wall{--pet-bottom:118px}.cao-pet-hint{font-size:13px;max-width:180px}
.project-image{aspect-ratio:1/1;background:#e9ece7}.project-image>img{object-fit:cover;object-position:center}

@media(max-width:600px){.cao-pet-wall{--pet-bottom:122px}}
.filters small{opacity:1;color:inherit}.dialog-toolbar,.dialog-toolbar button,.dialog-info>p:first-child,.dialog-info>p:not(:first-child),.dialog-info dl>div,.dialog-navigation button,.original-video,.dialog-info small,.search-box label,.search-box input{font-size:14px}.dialog-info h2{font-size:32px;letter-spacing:-.035em}.dialog-navigation button{min-height:48px}.dialog-info dt{color:var(--color-muted)}.search-box input{min-height:48px}

/* The compact sidebar stays pinned within the gallery without an inner scroll area. */
@media(min-width:601px){.work-sidebar{position:sticky;top:112px;align-self:start;max-height:none;overflow:visible;padding-right:0}}
/* Keep the approved labels readable at intermediate widths. */
.header-email{max-width:none;white-space:nowrap}.hero-bottom p{max-width:none}.filters small{display:inline}
@media(max-width:360px){.studio-pin{min-height:calc(100svh - 74px);padding-bottom:24px}.hero-bottom{gap:8px}.explore-link{font-size:13px;padding-inline:14px}.explore-link .arrow-circle{display:none}.hero-zalo{font-size:12px}}

.explore-link,.hero-zalo{min-height:44px}

/* Header and contact alignment requested after approval. */
.site-header{padding-inline:4%}
.site-header .brand{position:relative;display:inline-block;padding-right:14px;font-size:44px;line-height:1;letter-spacing:-.08em}
.site-header .brand span{position:absolute;top:-1px;right:0;margin:0;font-size:11px;line-height:1;letter-spacing:0}
.site-header .location{position:static;display:inline-flex;justify-content:flex-end;margin:0;gap:10px;line-height:1.5;letter-spacing:.6px}
.studio-signature,.studio-signature:hover,.studio-signature:active{padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--color-ink);font-size:14px;line-height:1.7;text-align:center;pointer-events:none;transition:none}
.hero-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px}
.hero-bottom>p{justify-self:start}.hero-bottom .explore-link{justify-self:center}.hero-bottom .hero-zalo{justify-self:end;margin:0}
.contact-links,.footer-meta{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px}
.contact-links>a:nth-child(2),.footer-meta>span:nth-child(2){justify-self:center;text-align:center}
.contact-links>a:last-child,.footer-meta>a{justify-self:end;margin:0}
@media(max-width:900px){.contact-links{grid-template-columns:1fr;gap:8px}.contact-links>a:nth-child(2),.contact-links>a:last-child{justify-self:start;text-align:left}.footer-meta{grid-template-columns:minmax(0,1fr) auto;gap:14px 20px}.footer-meta>span:nth-child(2){display:block;grid-column:1/-1;grid-row:1;justify-self:start;text-align:left}.footer-meta>a{grid-column:2}}
@media(max-width:600px){.site-header{padding-inline:17px}.site-header .brand{font-size:35px}.site-header .brand span{font-size:10px;top:0}.site-header .location{font-size:11px;letter-spacing:.4px;gap:8px}.studio-signature,.studio-signature:hover,.studio-signature:active{font-size:13px}.hero-bottom{grid-template-columns:auto auto;justify-content:space-between;gap:8px}.hero-bottom .explore-link{justify-self:start}.hero-bottom .hero-zalo{justify-self:end}.footer-meta>span:nth-child(2){display:block}}
/* Keep the resting pet clear of the footer's right-hand links. */
@media(min-width:901px){.contact-links>a:last-child{margin-right:100px}}
@media(max-width:900px){.footer-meta>a{grid-column:1/-1;justify-self:start;min-height:44px;display:flex;align-items:center}}

/* Compact profile and responsive video columns. */
.project-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.work-sidebar .profile-avatar{width:56px;height:56px;margin-bottom:14px}
.work-sidebar h3{font-size:18px;line-height:1.4}
.profile-card h3{font-size:20px;line-height:1.35}
.profile-card h3 span{font-size:14px;line-height:1.5;margin-top:5px}
.profile-card p{font-size:14px;line-height:1.6;margin:14px 0 0}
.expertise{margin:22px 0}.expertise ul{margin-top:8px}.expertise li{font-size:14px;line-height:1.5;padding:8px 0}
.tool-icons{gap:8px;margin:10px 0}.tool{width:32px;height:32px;font-size:18px}.gpt{font-size:11px}.toolbox p{font-size:13px;line-height:1.6}
@media(max-width:1023px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:601px) and (max-height:720px){.work-sidebar .profile-avatar{width:48px;height:48px;margin-bottom:10px}.profile-card p{margin-top:12px}.expertise{margin:16px 0}.expertise ul{margin-top:6px}.expertise li{padding:6px 0}.tool-icons{margin:8px 0}}

/* Seven tools fit the compact sticky sidebar without adding a scroll area. */
.toolbox .tool-icons{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:240px}
.toolbox .tool{width:100%;height:auto;aspect-ratio:1;font-size:16px;line-height:1;border-radius:7px;display:grid;place-items:center}
.toolbox .tool img,.toolbox .tool svg{width:74%;height:74%;display:block}
.toolbox .blender{background:#fff3e7}.toolbox .capcut{background:#202220}.toolbox .capcut img{filter:invert(1)}
.toolbox .illustrator{background:#330000;color:#ff9a00}.toolbox .photoshop{background:#001e36;color:#31a8ff}.toolbox .creative-ai{background:#e2e9e0;color:#365e43}
.toolbox p{font-size:12px;line-height:1.65}

/* Review annotations: selective emphasis and breathing room inside the about surface. */
.studio-signature strong{font-weight:700}
#showcase-title .showcase-title-line{white-space:nowrap;color:inherit}
#showcase-title .showcase-title-muted{color:var(--color-muted)}
.about-section{padding-inline:clamp(20px,3vw,36px);padding-bottom:36px}
.about-photo span{color:var(--color-muted)}
.about-photo strong,.about-intro p strong{color:var(--color-ink);font-weight:600}
@media(max-width:600px){#showcase #showcase-title{font-size:clamp(23px,7.2vw,34px)}}

/* Gallery captions removed by request; retain space below the filters. */
.original-library{margin-top:24px}
@media(max-width:600px){.original-library{margin-top:20px}}