/* Portfolio composition inspired by the references, built from Vanxai's own work. */
:root { --pad:clamp(22px,4vw,78px); --paper:#fafafa; --ink:#101114; --line:#d8dadd; --accent:#1746ff; }
.site-header { padding:27px 0; border:0; }
.wordmark { font-size:23px; font-weight:800; letter-spacing:-1.3px; line-height:.9; }
.site-header nav { gap:9px; }
.site-header nav>a { padding:11px 20px; border-radius:30px; font-size:12px; }
.site-header nav>a[aria-current=page] { background:#eaecef; text-decoration:none; }
.site-header nav>a.nav-contact { background:var(--ink); color:white; margin-left:12px; }
.site-header nav>a.nav-contact:hover { background:var(--accent); }
.nav-contact span { padding-left:24px; }

.hero { padding:29px var(--pad) 35px; }
.hero>.eyebrow { justify-content:space-between; font-size:10px; }
.hero-location { font-size:10px; }
.hero-composition { position:relative; height:clamp(550px,45.5vw,780px); margin-top:30px; }
.hero .hero-composition h1 { position:relative; z-index:1; font-size:clamp(90px,11.45vw,207px); line-height:.86; letter-spacing:-.075em; font-weight:700; text-align:center; white-space:normal; margin:0; padding-top:6px; }
.hero-title-top { display:block; white-space:nowrap; }
.hero-title-bottom { display:block; font:italic 1.4em/.85 Georgia,"Times New Roman",serif; letter-spacing:-.09em; margin-top:5px; padding-right:.1em; }
.hero-project { position:absolute; z-index:2; display:block; padding:9px 9px 0; background:white; box-shadow:0 10px 35px #131a2d1a,0 1px 3px #131a2d14; transition:transform .35s,box-shadow .35s; }
.hero-project-picture { overflow:hidden; }
.hero-project img { width:100%; height:100%; object-fit:cover; }
.hero-project>span { display:flex; justify-content:space-between; gap:10px; padding:12px 3px; font-size:10px; }
.hero-project-brand { width:24%; left:3%; top:35%; transform:rotate(-9deg); }
.hero-project-brand .hero-project-picture { aspect-ratio:1.08; }
.hero-project-web { width:34%; left:35%; top:48%; transform:rotate(5deg); }
.hero-project-web .hero-project-picture { aspect-ratio:1.3; }
.hero-project-play { width:20%; right:3%; top:26%; transform:rotate(9deg); }
.hero-project-play .hero-project-picture { aspect-ratio:1; }
.hero-project:hover,.hero-project:focus-visible { z-index:4; transform:rotate(0) translateY(-10px); box-shadow:0 20px 45px #131a2d26; }
.hero-side-note { position:absolute; right:5%; top:83%; font:10px/1.5 var(--mono); color:var(--muted); transform:rotate(-4deg); }
.hero-bottom { align-items:flex-end; border:0; padding-top:0; }
.hero-bottom p { font-size:12px; line-height:1.6; }
.hero-bottom .text-link { font-size:12px; gap:60px; }
.discipline-band { background:var(--accent); color:white; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px var(--pad); font-size:clamp(12px,1.45vw,23px); letter-spacing:-.02em; }
.discipline-band i { font-style:normal; opacity:.6; }
.selected-work { padding-top:100px; padding-bottom:110px; }
.work-heading { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:50px; }
.work-heading>.eyebrow { flex-basis:100%; }
.work-heading h2 { margin:0; font:500 clamp(60px,7.6vw,130px)/.9 var(--sans); letter-spacing:-.07em; }
.project-filters { display:none; gap:5px; flex-wrap:wrap; }
.has-project-filters .project-filters { display:flex; }
.project-filters button { cursor:pointer; font:11px var(--sans); color:var(--ink); border:1px solid var(--line); border-radius:30px; padding:11px 17px; background:transparent; }

.project-filters button[aria-pressed=true] { color:white; background:var(--ink); border-color:var(--ink); }
.project-filters button:hover { border-color:var(--accent); }
.screen-reader-text { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.project-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:70px 26px; align-items:start; }
.project-card { min-width:0; }
.project-card[hidden] { display:none!important; }
.card-1 { grid-column:1/span 8; }
.card-2 { grid-column:10/span 3; margin-top:160px; }
.card-3 { grid-column:2/span 5; margin-top:10px; }
.card-4 { grid-column:8/span 5; margin-top:150px; }
.card-5 { grid-column:1/span 7; }
.work-note { grid-column:9/span 4; padding:50px 0 0; }
.project-image { border-radius:7px; aspect-ratio:1.35; }
.card-1 .project-image { aspect-ratio:1.45; }
.card-2 .project-image { aspect-ratio:.77; }
.card-3 .project-image { aspect-ratio:1.05; }
.card-4 .project-image { aspect-ratio:1.1; }
.card-5 .project-image { aspect-ratio:1.2; }
.project-caption { align-items:flex-start; padding:17px 0 0; border:0; gap:13px; }

.project-caption h3 { font-size:clamp(20px,2.1vw,34px); font-weight:500; line-height:1.1; letter-spacing:-.045em; }
.project-caption p { margin:7px 0 0; font-size:11px; color:var(--muted); }
.project-caption>span:last-child { font-size:21px; }
.image-arrow { border-radius:50%; background:white; width:50px; height:50px; }
.work-note p { font-size:clamp(20px,2.3vw,38px); margin-top:25px; }
.note-label { font-size:10px; border-top-width:2px; }
.project-grid.is-filtered { grid-template-columns:repeat(2,minmax(0,1fr)); }
.project-grid.is-filtered .project-card { grid-column:auto; margin-top:0; }
.project-grid.is-filtered .project-image { aspect-ratio:1.25; }
.project-grid.is-filtered .work-note { display:none; }
.about-strip { display:grid; grid-template-columns:1.1fr 1fr; gap:8vw; padding-top:80px; padding-bottom:80px; background:#eff1f5; border:0; }
.about-strip h2 { font-size:clamp(50px,6.5vw,110px); margin:35px 0 0; line-height:.98; }
.about-strip h2 em { font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-.075em; }
.about-strip-bottom { display:block; align-self:end; }
.about-strip p { font-size:clamp(17px,1.7vw,27px); letter-spacing:-.025em; line-height:1.45; }
.about-strip-bottom .text-link { margin-top:30px; }
.site-footer { background:var(--accent); color:white; padding-top:60px; }
.footer-contact { font:italic 400 clamp(50px,11vw,180px)/1 Georgia,"Times New Roman",serif; letter-spacing:-.075em; padding-bottom:65px; }
.footer-contact span { color:white; font:400 .7em var(--sans); letter-spacing:0; }
.footer-bottom { color:#e4eaff; border-color:#ffffff66; }
.footer-bottom a:hover { color:white; text-decoration:underline; }
.inner-main .page-intro h1 { font-weight:500; }
.portfolio-gallery { display:block; columns:2; column-gap:26px; }
.portfolio-gallery>figure { break-inside:avoid; display:block; margin:0 0 26px!important; overflow:hidden; border-radius:7px; }
.portfolio-gallery img { transition:transform .45s; }
.portfolio-gallery a:hover img { transform:scale(1.015); }
.about-layout img { border-radius:7px; }
.lightbox::backdrop { background:rgba(10,12,19,.95); }
@media(min-width:1700px) {
  .hero-composition { height:780px; }
  .hero-project-web { width:32%; }
}
@media(max-width:1000px) {
  .hero-composition { height:520px; }
  .hero .hero-composition h1 { font-size:11.4vw; }
  .hero-project-brand { width:26%; top:33%; left:2%; }
  .hero-project-web { width:37%; top:47%; left:33%; }
  .hero-project-play { width:23%; top:26%; right:2%; }
  .hero-side-note { top:82%; right:3%; font-size:9px; }
  .work-heading { gap:25px; }
  .project-filters { flex-basis:100%; }
  .card-2 { grid-column:10/span 3; margin-top:100px; }
  .card-4 { margin-top:90px; }
  .project-grid { gap:55px 20px; }
  .project-caption h3 { font-size:22px; }
}
@media(max-width:760px) {
  .site-header { padding:23px 0; }
  .wordmark { font-size:19px; }
  .site-header nav { gap:1px; }
  .site-header nav>a { padding:9px 11px; font-size:11px; }
  .site-header nav>a.nav-contact { margin-left:4px; }
  .nav-contact span { padding-left:7px; }
  .hero { padding-top:20px; padding-bottom:30px; }
  .hero>.eyebrow { font-size:9px; }
  .hero-location { display:block; font-size:8px; }
  .hero-composition { height:460px; margin-top:40px; }
  .hero .hero-composition h1 { font-size:11.3vw; padding-top:0; }
  .hero-title-bottom { font-size:1.6em; }
  .hero-project { padding:6px 6px 0; }
  .hero-project>span { font-size:8px; padding:9px 2px; }
  .hero-project-brand { width:34%; top:31%; left:1%; }
  .hero-project-web { width:47%; top:53%; left:27%; }
  .hero-project-play { width:31%; top:28%; right:1%; }
  .hero-side-note { display:none; }
  .hero-bottom { align-items:center; gap:25px; }
  .hero-bottom p { font-size:11px; }
  .hero-bottom .text-link { font-size:11px; gap:25px; }
  .discipline-band { padding:17px var(--pad); gap:14px; flex-wrap:wrap; justify-content:center; font-size:12px; }
  .discipline-band i { display:none; }
  .discipline-band span { flex-basis:calc(50% - 14px); text-align:center; }
  .selected-work { padding-top:65px; padding-bottom:65px; }
  .work-heading { margin-bottom:32px; }
  .work-heading h2 { font-size:60px; }
  .project-filters { gap:5px; }
  .project-filters button { padding:9px 12px; font-size:10px; }
  
  .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 20px; }
  .project-card { grid-column:auto; margin-top:0; }
  .card-1,.card-5 { grid-column:1/-1; }
  .card-2 { padding-top:0; }
  .card-3 { padding-top:75px; }
  .card-4 { grid-column:1/-1; max-width:80%; margin-left:auto; }
  .work-note { grid-column:1/-1; padding:15px 0; max-width:450px; }
  .work-note p { font-size:32px; }
  .project-caption h3 { font-size:22px; }
  .project-caption p { font-size:10px; }
  .project-grid.is-filtered .project-card { padding:0; max-width:none; }
  .about-strip { grid-template-columns:1fr; gap:30px; padding-top:50px; padding-bottom:50px; }
  .about-strip h2 { font-size:64px; }
  .about-strip p { font-size:21px; }
  .footer-contact { font-size:11vw; padding-bottom:40px; }
  .site-footer { padding-top:40px; }
}
@media(max-width:480px) {
  .wordmark { font-size:17px; }
  .site-header nav>a { padding:9px 9px; }
  .hero-composition { height:395px; margin-top:35px; }
  .hero .hero-composition h1 { font-size:11.3vw; }
  .hero-project-brand { width:41%; top:35%; left:0; }
  .hero-project-web { width:60%; top:61%; left:22%; }
  .hero-project-play { width:37%; top:29%; right:0; }
  .hero-project>span { font-size:8px; gap:4px; padding:8px 0; }
  .hero-bottom { margin-top:45px; align-items:flex-start; }
  .hero-bottom p { font-size:10px; }
  .hero-bottom .text-link { white-space:nowrap; font-size:10px; gap:15px; }
  .project-grid { display:grid; gap:30px 15px; }
  .project-caption { gap:7px; }
  .project-caption h3 { font-size:18px; }
  .project-caption p { font-size:9px; line-height:1.4; }
  .project-caption>span:last-child { font-size:16px; }
  
  .card-1 .project-caption h3,.card-4 .project-caption h3,.card-5 .project-caption h3 { font-size:25px; }
  .card-2 .project-image { aspect-ratio:.7; }
  .card-3 .project-image { aspect-ratio:.9; }
  .project-grid.is-filtered { grid-template-columns:1fr; }
  .project-grid.is-filtered .project-card { grid-column:1; }
  .project-filters button { padding:9px 11px; }
  .work-note p { margin-top:22px; }
  .about-strip h2 { font-size:64px; }
  .portfolio-gallery { columns:1; }
  .portfolio-gallery>figure { margin-bottom:18px!important; }
}
@media(prefers-reduced-motion:reduce) { .hero-project,.portfolio-gallery img { transition:none; } }