/* A quiet gallery: the artwork supplies the color. */
:root{color-scheme:dark;--paper:#101211;--ink:#f1f0e9;--muted:#a2a8a2;--line:#303630;--accent:#a6dfb7;--surface:#1b201d;--header:rgba(16,18,17,.88);--ambient-image:url('assets/hero-harbor.png')}
:root[data-theme="light"]{color-scheme:light;--paper:#eeeee8;--ink:#202620;--muted:#626b62;--line:#c9d0c6;--accent:#22613c;--surface:#e0e5dc;--header:rgba(238,238,232,.9)}
body,.home-page,.collection-page,.experience-page{background:var(--paper);color:var(--ink)}
.home-page::before{content:"";position:absolute;inset:0 0 auto;height:820px;z-index:-1;background-image:linear-gradient(to bottom,transparent,var(--paper)),var(--ambient-image);background-size:cover;background-position:center;filter:blur(75px);opacity:.17;pointer-events:none}
.wrap{width:min(1600px,calc(100% - 72px))}.reading-progress{position:fixed;inset:0 auto auto 0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--accent);z-index:70;pointer-events:none}
.site-header{background:var(--header);border:0;color:var(--ink);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.header-inner{min-height:112px;gap:24px;padding-block:22px}.brand{flex-shrink:0;gap:10px}.brand-name{font-size:2.25rem;letter-spacing:-.06em}.brand-dot{color:var(--accent)}.brand-tag{font-size:.65rem;letter-spacing:.09em;color:var(--muted)}
.header-controls{gap:14px;flex-wrap:nowrap}.header-controls .nav{flex-wrap:nowrap;gap:2px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px;align-items:center;white-space:nowrap;font-size:.75rem;letter-spacing:.08em}
.header-controls .nav a{padding:11px 15px;min-height:40px;border-radius:999px;line-height:1.2}.nav [aria-current="page"]{background:var(--ink);color:var(--paper);text-decoration:none}.header-controls .nav a:hover{background:var(--surface);color:var(--ink)}.header-controls .nav [aria-current="page"]:hover{background:var(--ink);color:var(--paper)}
.language-switch{border-color:var(--line);border-radius:999px;gap:0;padding:3px;background:var(--paper)}.language-switch a{border-radius:999px;min-width:34px;min-height:34px;font-size:.75rem;color:var(--muted)}.language-switch [aria-current="true"],.language-switch [aria-current="true"]:hover{background:var(--accent);color:var(--paper)}.language-switch a:hover{background:var(--surface);color:var(--ink)}
.theme-toggle{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;border-radius:50%;background:var(--paper);color:var(--ink);border:1px solid var(--line);font-size:1.5rem;line-height:1}.theme-toggle:hover{background:var(--surface)}[hidden]{display:none!important}
.skip{background:var(--ink);color:var(--paper)}.eyebrow{font-size:.75rem;color:var(--muted);letter-spacing:.13em}.back{font-size:.875rem;color:var(--muted)}.back:hover{color:var(--ink)}
.showcase{outline-offset:5px}.showcase-stage{position:relative;overflow:hidden;border-radius:18px;isolation:isolate;height:clamp(460px,66vh,760px);background:#232b27;touch-action:pan-y}
.showcase-slide{position:absolute;inset:0;overflow:hidden;animation:slide-enter .65s cubic-bezier(.2,.65,.2,1) both;isolation:isolate}.showcase-slide::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,16,13,.67),transparent 65%),linear-gradient(0deg,rgba(5,16,13,.56),transparent 65%);pointer-events:none}
.showcase-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;transform:scale(1.025) translate3d(var(--art-x,0px),var(--art-y,0px),0);transition:transform .7s ease-out}.showcase-image img{width:100%;height:100%;object-fit:contain}
.showcase-character{background:linear-gradient(125deg,#143a32,#8dada2)}.showcase-character .showcase-image{left:23%;width:77%;padding:20px}.showcase-character::after{background:linear-gradient(90deg,rgba(5,20,15,.72),transparent 70%)}
.showcase-sheet{background:#272d30}.showcase-sheet .showcase-image{padding:20px 4%}.showcase-sheet::after{background:linear-gradient(0deg,rgba(5,16,13,.92),transparent 73%)}
.showcase-caption{position:absolute;left:40px;bottom:46px;max-width:65%;color:#fff}.showcase-caption .eyebrow{color:#e0e9e1;font-size:.75rem;line-height:1.5}.showcase-caption h1,.showcase-caption h2,html[lang="vi"] .showcase-caption h1,html[lang="vi"] .showcase-caption h2{font-size:clamp(2rem,4.2vw,4.75rem);line-height:1.05;letter-spacing:-.04em;margin-top:14px;text-wrap:balance;max-width:770px}.showcase-caption h1 span{display:block;font-size:.6em;letter-spacing:.02em;margin-bottom:8px}.showcase-location{font-size:.75rem;letter-spacing:.14em;margin-top:20px;color:#e0e9e1}.showcase-project{display:inline-flex;align-items:center;gap:28px;margin-top:23px;border:1px solid #b5c5b8;border-radius:999px;padding:10px 18px;font-size:.875rem;background:rgba(3,13,8,.25);backdrop-filter:blur(8px)}.showcase-project:hover{color:#102419;background:#d1e4d5;text-decoration:none}
.showcase-arrows{position:absolute;right:30px;bottom:36px;display:flex;gap:10px}.showcase-arrows button,.viewer-prev,.viewer-next{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(8,18,13,.48);color:#fff;font-size:1.3rem;transition:background .2s,transform .2s}.showcase-arrows button:hover{background:#e0ede3;color:#112118;transform:translateY(-2px)}
.showcase-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 2px 0}.showcase-hint,.showcase-counter{font-size:.75rem;letter-spacing:.06em;color:var(--muted)}.showcase-counter{font-variant-numeric:tabular-nums}.showcase-dots{display:flex;gap:4px}.showcase-dots button{border:0;background:transparent;min-width:27px;min-height:28px;padding:10px 6px;display:flex;align-items:center;justify-content:center}.showcase-dots button::after{content:"";display:block;width:7px;height:7px;border-radius:8px;background:var(--muted);opacity:.5;transition:width .25s,background .25s}.showcase-dots [aria-current="true"]::after{width:28px;background:var(--ink);opacity:1}
.work-section{padding-block:78px 95px;scroll-margin-top:122px}.work-section .section-heading{align-items:end;margin-bottom:28px}.work-section .section-heading h2{font-size:clamp(2rem,3.6vw,3.5rem);font-weight:600;margin-top:12px;letter-spacing:-.05em}.work-display{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:flex-end}.work-count{font-size:.875rem;color:var(--muted)}.view-switch{display:flex;border:1px solid var(--line);padding:3px;border-radius:999px}.view-switch button{font-size:.8rem;color:var(--muted);background:transparent;border:0;border-radius:999px;padding:9px 15px;min-height:36px}.view-switch [aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.project-filters{gap:6px 25px;border-color:var(--line);margin-bottom:32px;padding:12px 0}.project-filters button{color:var(--muted);font:inherit;font-size:.875rem;border:0;background:transparent;padding:12px 0;min-height:44px}.project-filters button span{font-size:.65rem;vertical-align:super;margin-left:4px;opacity:.6}.project-filters button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:8px}.project-filters button:hover{color:var(--accent)}
.project-rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 28px}.project-rows[data-layout="large"],.collection-project-rows:has(>.project-row:only-child){grid-template-columns:1fr}.project-row{transform:none;min-width:0}.project-cover-window{position:relative;overflow:hidden;border-radius:12px;background:var(--surface)}.project-cover{aspect-ratio:5/2;transition:transform .65s cubic-bezier(.2,.6,.2,1);transform:scale(1)}.project-row-link:hover .project-cover{transform:scale(1.035)}.project-row-caption{align-items:start;padding-top:18px;gap:18px}.project-row-caption h3{font-size:clamp(1.25rem,1.8vw,1.9rem);line-height:1.15;font-weight:500;letter-spacing:-.03em}.project-row-caption .project-meta{color:var(--muted);font-size:.75rem;gap:12px;max-width:45%;line-height:1.45}.project-row-caption .project-arrow{font-size:1.4rem;color:var(--accent)}.project-row-link:hover h3{color:var(--accent);text-decoration:none}.cover-action{position:absolute;right:14px;bottom:14px;display:flex;gap:20px;align-items:center;border:1px solid rgba(255,255,255,.3);background:rgba(8,15,12,.88);backdrop-filter:blur(8px);color:white;border-radius:999px;font-size:.75rem;padding:9px 14px;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}.project-row-link:hover .cover-action,.project-row-link:focus-visible .cover-action{opacity:1;transform:none}
.about-section,.home-page .about-section{background:var(--surface);border-radius:24px 24px 0 0}.about h2{font-weight:500}.about-copy .tools{color:var(--muted);font-size:.875rem}.experience-about-link{color:var(--accent)}.home-page .footer{background:var(--paper)}.footer{border-top:1px solid var(--line);color:var(--muted);font-size:.75rem}.contact .eyebrow{font-size:.75rem}.contact>a{font-weight:400}.collection-header{padding-top:36px}.collection-nav,.collection-header .collection-nav{border-color:var(--line)}.collection-nav [aria-current=page],.collection-header .collection-nav [aria-current=page]{color:var(--accent)}.collection-description{color:var(--muted)}.collection-nav{font-size:.875rem}.collection-project-rows{padding-bottom:60px}
.experience-intro .eyebrow,.experience-intro h1 span,.experience-focus{color:var(--accent)}.experience-intro>p,.experience-tasks li,.experience-contact p{color:var(--muted)}.experience-section>h2,.experience-entry,.experience-contact{border-color:var(--line)}.experience-project span{color:var(--accent)}.experience-project img{border-radius:12px}.experience-detail h3{font-weight:500}
.project-header{padding-top:44px}.project-title h1{font-weight:500}.ui-project{background:transparent;color:var(--ink)}.ui-project .project-description,.ui-project .art-heading>p{color:var(--muted)}.artwork{overflow:hidden;border-radius:6px}.artwork a{position:relative}.artwork a::after{content:"+";position:absolute;right:16px;bottom:16px;display:grid;place-items:center;background:rgba(9,18,12,.8);color:#fff;width:38px;height:38px;border-radius:50%;font-size:1.5rem;opacity:0;transition:opacity .2s}.artwork a:hover::after,.artwork a:focus-visible::after{opacity:1}.art-heading>p{font-size:.875rem}.next-project{border-color:var(--line)}
.viewer{padding:84px 76px 112px;background:var(--paper);color:var(--ink)}.viewer::backdrop{background:var(--paper)}.viewer-toolbar{background:var(--header);color:var(--ink);padding:16px 24px;border-bottom:1px solid var(--line);z-index:4}.viewer-toolbar>.viewer-info{display:flex;align-items:center;gap:18px;min-width:0;flex-shrink:1}.viewer-count{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--accent);font-size:.8rem}.viewer-label{font-size:.875rem;max-width:none}.viewer-toolbar>.viewer-actions{display:flex;gap:10px}.viewer-actions button,.viewer-original{font-size:.8rem;min-height:40px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);white-space:nowrap}.viewer-actions button:hover,.viewer-original:hover{border-color:var(--accent);text-decoration:none}.viewer-zoom[aria-pressed="true"]{color:var(--accent)}.viewer-inner{position:relative;touch-action:pan-x pan-y;overscroll-behavior:contain}.viewer-inner img{cursor:zoom-in;transition:opacity .2s;user-select:none}.viewer-inner.is-loading img{opacity:.25}.viewer-inner.is-zoomed{display:block;cursor:grab}.viewer-inner.is-zoomed img{max-width:none;max-height:none;width:var(--zoom-width);height:auto;margin:auto;cursor:grab}.viewer-inner.is-dragging,.viewer-inner.is-dragging img{cursor:grabbing}.viewer-prev,.viewer-next{position:absolute;top:50%;z-index:3;width:44px;height:44px;border-color:var(--line);background:var(--surface);color:var(--ink)}.viewer-prev{left:16px}.viewer-next{right:16px}.viewer-prev:hover,.viewer-next:hover{border-color:var(--accent)}.viewer-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 20px 14px;border-top:1px solid var(--line);background:var(--paper)}.viewer-hint{font-size:.75rem;color:var(--muted)}.viewer-thumbs{display:flex;gap:7px;max-width:100%;overflow-x:auto;overscroll-behavior:contain;padding:3px}.viewer-thumbs button{position:relative;flex-shrink:0;width:62px;height:46px;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:5px;overflow:hidden;opacity:.5}.viewer-thumbs button[aria-current="true"]{border:2px solid var(--accent);opacity:1}.viewer-thumbs img{width:100%;height:100%;object-fit:contain}.viewer-error{color:var(--muted);max-width:400px;text-align:center}
.reveal{opacity:1}.motion-ready .reveal{transition:opacity .65s ease,translate .65s cubic-bezier(.2,.7,.2,1)}.motion-ready .reveal:not(.is-visible){opacity:0;translate:0 24px}@keyframes slide-enter{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur(0)}}
@media(max-width:1150px){.header-controls{gap:9px}.header-controls .nav{gap:0;font-size:.68rem}.header-controls .nav a{padding-inline:11px}.brand-name{font-size:2rem}.brand-tag{max-width:200px;font-size:.58rem}.work-display{gap:16px}.showcase-stage{height:62vh;min-height:450px}}
@media(max-width:800px){.wrap{width:calc(100% - 32px)}.header-inner{flex-wrap:wrap;min-height:0;padding:16px 0 12px;gap:13px 10px}.brand{margin-right:auto;gap:7px}.brand-name{font-size:1.9rem}.brand-tag{font-size:.56rem;max-width:none}.header-controls{display:contents}.header-controls .nav{order:5;width:100%;justify-content:flex-start;gap:0;overflow-x:auto;scrollbar-width:none;min-width:0;flex-wrap:nowrap;flex-shrink:1;padding:4px}.header-controls .nav a{padding:10px 13px;font-size:.68rem;min-height:36px;flex-shrink:0}.language-switch{margin:0}.language-switch a{min-width:31px;min-height:32px;font-size:.68rem}.theme-toggle{width:38px;height:38px}.showcase-stage{height:470px;min-height:0;border-radius:12px}.showcase-caption{left:24px;bottom:32px;max-width:85%}.showcase-caption h1,.showcase-caption h2,html[lang="vi"] .showcase-caption h1,html[lang="vi"] .showcase-caption h2{font-size:clamp(2rem,6vw,3.5rem)}.showcase-caption .eyebrow{font-size:.68rem}.showcase-arrows{right:20px;bottom:24px}.showcase-arrows button{width:38px;height:38px}.showcase-location{font-size:.65rem}.showcase-character .showcase-image{inset:0;width:100%;padding:18px 10px 80px}.showcase-character::after{background:linear-gradient(0deg,rgba(5,20,15,.88),transparent 85%)}.showcase-sheet .showcase-image{padding:18px 12px 130px}.showcase-project{font-size:.8rem;padding:9px 14px}.showcase-bottom{gap:10px;padding-top:12px}.showcase-hint,.showcase-counter{font-size:.65rem;letter-spacing:0}.showcase-dots button{min-width:21px;padding:8px 4px}.showcase-dots [aria-current="true"]::after{width:21px}.work-section{padding-block:48px 60px;scroll-margin-top:150px}.work-section .section-heading{align-items:start;gap:20px}.work-section .section-heading h2{font-size:1.8rem}.section-heading>.eyebrow{font-size:.7rem}.work-display{justify-content:space-between;width:100%;gap:12px}.project-filters{gap:0 19px;padding-block:9px;margin-bottom:24px}.project-filters button{font-size:.8rem;padding-block:10px}.project-rows{gap:30px 18px}.project-row-caption{display:block;padding-top:13px}.project-row-caption h3{max-width:none;font-size:1.25rem}.project-row-caption .project-meta{max-width:none;justify-content:space-between;text-align:left;font-size:.75rem;margin-top:7px}.project-cover-window{border-radius:8px}.cover-action{display:none}.art-grid{gap:24px}.viewer{padding:120px 12px 114px}.viewer-toolbar{align-items:stretch;flex-direction:column;gap:12px;padding:14px 16px}.viewer-toolbar>.viewer-info{width:100%;gap:12px}.viewer-toolbar>.viewer-actions{justify-content:flex-end;width:100%}.viewer-actions button,.viewer-original{font-size:.75rem;padding:8px 12px;min-height:36px}.viewer-label{font-size:.8rem;max-width:none}.viewer-prev,.viewer-next{top:auto;bottom:121px;opacity:.9}.viewer-prev{left:20px}.viewer-next{right:20px}.viewer-hint{font-size:.65rem}.viewer-bottom{padding-inline:12px}.experience-intro{padding-top:36px}.experience-contact a{color:var(--ink)}.footer{font-size:.7rem}html{scroll-padding-top:160px}}
@media(max-width:550px){.project-rows{grid-template-columns:1fr}.showcase-stage{height:450px}.showcase-landscape .showcase-image{object-position:32% center}.showcase-caption h1,.showcase-caption h2,html[lang="vi"] .showcase-caption h1,html[lang="vi"] .showcase-caption h2{font-size:2rem;max-width:280px}.showcase-caption{bottom:85px}.showcase-location{margin-top:14px}.showcase-arrows{right:18px;bottom:20px}.showcase-bottom{flex-wrap:wrap}.showcase-hint{flex:1}.showcase-dots{order:3;justify-content:center;flex-basis:100%}.brand-tag{max-width:176px}.art-grid{grid-template-columns:1fr}.project-title{grid-template-columns:1fr}.about{grid-template-columns:1fr}.experience-intro{grid-template-columns:1fr}}
@media(max-width:800px){.header-controls .nav{flex:0 0 100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.showcase-slide{animation:none}.showcase-image,.project-cover{transform:none!important;transition:none}.motion-ready .reveal,.motion-ready .reveal:not(.is-visible){opacity:1;translate:none;transition:none}.cover-action{transition:none}.showcase-dots button::after{transition:none}}

/* The first slide is the live showreel; still artwork follows in the carousel. */
.showcase-showreel .showcase-image{transform:none;object-position:center}
.showcase-playback{position:absolute;top:22px;right:24px;z-index:2;min-height:44px;border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:10px 17px;background:rgba(12,22,41,.7);color:#fff;font:inherit;font-size:.75rem;cursor:pointer;backdrop-filter:blur(8px)}
.showcase-playback:hover{background:#f3e7d9;color:#171d2b}
.showcase-caption h2 span{display:block;font-size:.6em;letter-spacing:.02em;margin-bottom:8px}
@media(max-width:800px){.showcase:has(.showcase-showreel:not([hidden])) .showcase-stage{height:auto;min-height:0;aspect-ratio:16/9}.showcase-showreel .showcase-image{object-fit:contain}.showcase-showreel .showcase-caption{left:18px;bottom:18px;max-width:65%}.showcase-showreel .showcase-caption h1,html[lang="vi"] .showcase-showreel .showcase-caption h1{font-size:clamp(1.2rem,4vw,2rem);margin:0}.showcase-showreel .showcase-caption .eyebrow,.showcase-showreel .showcase-location{display:none}.showcase-playback{top:12px;right:12px;min-height:40px;padding:8px 12px;font-size:.65rem}}