.ux-case{--ux-bg:#fff;--ux-soft:#efefef;--ux-card:#fff;--ux-ink:#292929;--ux-line:#d4d4d4;--ux-accent:#ff2638;background:var(--ux-bg);color:var(--ux-ink)}
html[data-theme=dark] .ux-case{--ux-bg:#292929;--ux-soft:#333;--ux-card:#3b3b3b;--ux-ink:#f5f5f5;--ux-line:#626262;--ux-accent:#ff6370}
.ux-case *{box-sizing:border-box;min-width:0}
.ux-person img[src$="ux-priya.webp"]{clip-path:ellipse(49% 42.9% at 50.8% 51.7%)}
.ux-portrait-ring{position:relative;display:block;width:100%;line-height:0}
.ux-portrait-ring::after{content:"";position:absolute;left:50.8%;top:51.7%;width:98%;height:85.8%;transform:translate(-50%,-50%);box-sizing:border-box;border:1px solid #d9d9d9;border-radius:50%;pointer-events:none}
.ux-person{height:100%}
.ux-person img[src$="ux-jordan.webp"]{clip-path:circle(49.8% at 50% 50%)}
.ux-static-showcase>.ux-grid>img{display:block;width:100%;height:auto;object-fit:contain;align-self:start}
.ux-about-project .ux-card{background:transparent!important}
.ux-about-project .ux-card .ux-card-label{display:block;font-size:13px;color:var(--ux-accent);margin-bottom:16px}
.ux-case [hidden]{display:none!important}.ux-person h5{font-size:15px;text-transform:uppercase;margin:20px 0 8px}
.ux-quote h4{font-size:15px;color:var(--ux-accent);margin:0 0 20px}.ux-quote hr{border:0;border-top:1px solid var(--ux-line);margin:20px 0}
.ux-case ul{padding-left:18px;margin:14px 0;font-size:14px;line-height:1.55;text-transform:uppercase}.ux-case li{margin:4px 0}
@media(min-width:1101px){.ux-finale .ux-heading{grid-template-columns:1.35fr 1fr;gap:4%}.ux-finale .ux-heading h3{font-size:5.4vw}}
.ux-title .display{font-size:clamp(80px,24vw,336px);line-height:1;letter-spacing:-.065em}
.ux-cover{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:center;padding:7.5%;border-radius:55px;background:linear-gradient(110deg,#292929,#414141,#292929);color:#fff}
.ux-cover h3{font-size:clamp(40px,7.7vw,108px);font-weight:400;line-height:.94;letter-spacing:-.07em;margin:36px 0}
.ux-cover em{color:#ff2638;font-style:normal}.ux-cover p{font-size:clamp(17px,2vw,28px);line-height:1.15;color:#ccc;letter-spacing:-.04em;max-width:680px}
.ux-cover small{display:block;margin-top:48px;font-size:14px;letter-spacing:-.02em}
.ux-tags,.ux-legend{display:flex;flex-wrap:wrap;gap:8px}.ux-tags span,.ux-legend span{border-radius:30px;background:#ccc;color:#292929;padding:8px 18px;font-size:14px;line-height:1.2;letter-spacing:-.035em}
.ux-shield{position:relative;display:grid;justify-items:center;align-items:start}
.ux-shield img{width:100%;height:auto;object-fit:contain}.ux-shield img:first-child{position:relative;z-index:1;animation:ux-shield-float 4.5s ease-in-out infinite}.ux-shield img+img{width:85%;margin:-4% auto 0;opacity:.24;filter:blur(2px) grayscale(1);transform:scale(.9);z-index:0}
html[data-theme=dark] .ux-shield img+img{opacity:.14}
@keyframes ux-shield-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@media(prefers-reduced-motion:reduce){.ux-shield img:first-child{animation:none}}
.ux-block{padding:clamp(40px,6vw,84px) 7.5%;background:var(--ux-bg);color:var(--ux-ink)}
.ux-muted{background:var(--ux-soft)}
.ux-heading{display:grid;grid-template-columns:1fr 1fr;gap:5%;align-items:start;margin-bottom:44px}
.ux-kicker{color:var(--ux-accent);font-size:clamp(16px,1.85vw,26px);text-transform:uppercase;line-height:1.25;margin:0 0 32px;letter-spacing:-.045em}
.ux-heading h3{font-size:clamp(40px,5.9vw,82px);font-weight:400;line-height:.95;letter-spacing:-.065em;margin:0}
.ux-heading>p{font-size:16px;line-height:1.65;text-transform:uppercase;letter-spacing:-.035em;margin:0}
.ux-grid{display:grid;gap:16px;margin-top:24px;align-items:start}.ux-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ux-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.ux-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.ux-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.ux-card{border:1px solid var(--ux-line);border-radius:22px;padding:24px;background:var(--ux-card);height:100%;text-transform:uppercase}
.ux-card p{font-size:14px;line-height:1.5;letter-spacing:-.025em;margin:0;overflow-wrap:break-word}.ux-card h4{font-size:23px;line-height:1.15;font-weight:400;letter-spacing:-.045em;margin:20px 0 32px}.ux-card .ux-card-label{color:var(--ux-accent);font-size:12px}
.ux-charcoal{background:#292929;color:#fff;border-color:#292929}.ux-gray{background:#d9d9d9;color:#292929;border-color:#d9d9d9}
.ux-red{background:#ff2638;color:#fff;border-color:#ff2638}.ux-red .ux-kicker,.ux-red .ux-card-label{color:#fff}.ux-after{border-color:#ffb5bd;background:#fff6f7;color:#292929}
.ux-grid-5 .ux-card{padding:16px}.ux-grid-5 h4{font-size:23px}.ux-rule{margin-top:28px}.ux-subtitle{font-size:28px;font-weight:400;letter-spacing:-.045em;text-transform:uppercase;margin:36px 0}
.ux-subheading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin:36px 0}.ux-subheading h4{font-size:28px;font-weight:400;letter-spacing:-.045em;text-transform:uppercase}.ux-subheading p{font-size:12px;text-transform:uppercase}
.ux-person{display:grid;grid-template-columns:1fr 1.7fr;gap:24px;align-items:center}.ux-person:last-child{grid-template-columns:1.7fr 1fr}.ux-person:last-child img{order:2}.ux-person img{width:100%;height:auto;object-fit:contain}.ux-person h4{font-size:28px;font-weight:400;text-transform:uppercase;margin:0 0 8px}.ux-person p{font-size:14px;line-height:1.55;margin:0;text-transform:uppercase}
.ux-case .ux-art{display:block;width:100%;height:auto;margin:0;padding:0;border:0;background:transparent;overflow:visible;border-radius:0;cursor:zoom-in;align-self:start}
.ux-case .ux-art img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;border-radius:0;transform:none;filter:none}
.ux-legend{margin:20px 0}.ux-legend+.ux-art{margin-top:30px}
.ux-about-project>.ux-grid{width:52%;margin-left:auto}.ux-about-project .ux-card{border:0;border-top:1px solid var(--ux-accent);border-radius:0;padding:18px 0}
.ux-credit{display:block;width:max-content;margin:30px 0 80px auto;background:#fff;color:#e9001b;border-radius:8px;padding:15px 36px;text-decoration:none}.ux-endnotes{display:flex;justify-content:space-between;gap:30px;text-transform:uppercase;font-size:12px}
.ux-demo{border:1px solid var(--ux-line);border-radius:20px;background:var(--ux-card);overflow:hidden;height:100%;font-size:13px;line-height:1.5}
.ux-demo-head{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--ux-soft);padding:18px;border-bottom:1px solid var(--ux-line)}.ux-demo-head h4{font-size:15px;margin:0}.ux-demo-head small{font-size:10px}.ux-demo-body{padding:20px}.ux-demo-body p{margin:16px 0}.ux-demo .ux-legend span{font-size:11px;padding:5px 8px}
.ux-case button:not(.ux-art),.ux-case select,.ux-case input{font:inherit}.ux-demo button,.ux-dialog button{background:var(--ux-ink);color:var(--ux-bg);border:1px solid var(--ux-line);border-radius:5px;padding:8px 12px;cursor:pointer;min-height:40px}.ux-demo select{padding:9px;background:var(--ux-card);color:var(--ux-ink);border:1px solid var(--ux-line);border-radius:5px;margin:8px 8px 8px 0}.ux-demo label{display:block}.ux-conflict{padding:12px;background:#fff0f1;border:1px solid #ffb5bd;border-radius:10px;color:#9c1522;display:flex;gap:12px;align-items:center}.ux-conflict button{flex-shrink:0;background:#292929;color:#fff}.ux-demo-actions{display:flex;gap:8px;flex-wrap:wrap}
.ux-dialog{position:fixed;inset:0;margin:auto;max-width:min(520px,calc(100vw - 32px));max-height:85vh;overflow:auto;border:1px solid var(--ux-line);border-radius:18px;padding:28px;background:var(--ux-card);color:var(--ux-ink);font-size:16px}.ux-dialog::backdrop{background:#0008}.ux-dialog h4{font-size:24px;margin-bottom:20px}.ux-dialog label{display:block;margin:20px 0}.ux-dialog input{display:block;width:100%;padding:10px;border:1px solid var(--ux-line);background:var(--ux-bg);color:var(--ux-ink);color-scheme:light dark}.ux-dialog ol{padding-left:22px;margin:20px 0}.ux-dialog li{margin:16px 0}.ux-case :focus-visible{outline:3px solid var(--ux-accent);outline-offset:4px}
#logofolio .logo-card img{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:300px}#logofolio .logo-art{display:flex;align-items:center;justify-content:center;min-width:0}
@media(max-width:1100px){.ux-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.ux-grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}.ux-heading h3{font-size:clamp(40px,5.9vw,66px)}.ux-person,.ux-person:last-child{grid-template-columns:1fr}.ux-person img{max-width:160px}.ux-person:last-child img{order:0}.ux-cover{padding:6%;border-radius:30px}.ux-cover h3{font-size:7vw}.ux-heading>p{font-size:14px}}
@media(max-width:700px){.ux-block{padding:40px 6%}.ux-cover{grid-template-columns:1fr;padding:32px 6%;border-radius:24px}.ux-cover h3{font-size:clamp(38px,10.5vw,72px);letter-spacing:-.06em}.ux-cover p{font-size:18px;line-height:1.4}.ux-cover small{font-size:11px;margin-top:24px}.ux-shield{width:65%;max-width:300px;margin:auto}.ux-tags span{font-size:11px;padding:6px 10px}.ux-heading{grid-template-columns:1fr;gap:24px;margin-bottom:30px}.ux-heading h3{font-size:clamp(38px,10vw,64px);line-height:1.02}.ux-kicker{font-size:16px;margin-bottom:20px}.ux-heading>p{font-size:14px;line-height:1.6}.ux-grid-2,.ux-grid-3,.ux-grid-4,.ux-grid-5{grid-template-columns:1fr}.ux-card{padding:22px}.ux-card p{font-size:14px}.ux-card h4{font-size:24px;margin:14px 0 24px}.ux-person,.ux-person:last-child{grid-template-columns:1fr}.ux-person img{max-width:145px;margin:0 auto}.ux-person p{line-height:1.65}.ux-person+.ux-person{margin-top:20px}.ux-about-project>.ux-grid{width:100%;grid-template-columns:1fr 1fr}.ux-subheading{display:block}.ux-subheading p{margin-top:14px}.ux-subtitle,.ux-subheading h4{font-size:24px;line-height:1.2}.ux-endnotes{flex-direction:column;font-size:11px}.ux-credit{margin:30px 0 50px}.ux-conflict{flex-wrap:wrap}.ux-demo-head{flex-wrap:wrap}.ux-title .display{font-size:25vw}.ux-title .section-index{margin-bottom:0}#logofolio .logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#logofolio .logo-card{min-height:230px;height:auto}#logofolio .logo-card img{height:auto;max-height:none}#logofolio .logo-card p{overflow-wrap:break-word}}
@media(max-width:360px){#logofolio .logo-grid{grid-template-columns:1fr}}

/* Phone composition: compact reading rhythm, paired short cards, full artwork. */
@media(max-width:700px){
 .ux-block{padding:30px 5%}
 .ux-heading{gap:16px;margin-bottom:22px}
 .ux-heading h3{font-size:clamp(30px,8vw,44px);line-height:1.05}
 .ux-kicker{font-size:12px;line-height:1.4;margin-bottom:12px;letter-spacing:-.02em}
 .ux-heading>p{font-size:13px;line-height:1.6}
 .ux-cover{padding:26px 5%;gap:16px;border-radius:18px}
 .ux-cover h3{font-size:clamp(34px,9vw,52px);margin:24px 0}
 .ux-cover p{font-size:15px;line-height:1.5}
 .ux-cover small{font-size:10px;margin-top:20px}
 .ux-shield{width:42%;max-width:180px}
 .ux-grid{gap:12px;margin-top:18px}
 .ux-grid-4,.ux-grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ux-card,.ux-grid-5 .ux-card{padding:14px;border-radius:12px}
 .ux-card h4,.ux-grid-5 h4{font-size:17px;line-height:1.2;margin:12px 0 16px;letter-spacing:-.025em}
 .ux-card p,.ux-person p,.ux-case ul{font-size:13px;line-height:1.55}
 .ux-card .ux-card-label{font-size:10px;line-height:1.4}
 .ux-grid-5>.ux-card:last-child{grid-column:1/-1}
 .ux-quote{border:0;border-top:1px solid var(--ux-line);border-radius:0;background:transparent;padding:18px 0}
 .ux-quote h4{font-size:14px;margin:0 0 12px}
 .ux-quote hr{margin:12px 0}
 .ux-person,.ux-person:last-child{display:block;height:auto}
 .ux-person img,.ux-person:last-child img{float:right;width:84px;max-width:26%;height:auto;margin:0 0 12px 14px}
 .ux-person::after{content:'';display:block;clear:both}
 .ux-person h4{font-size:22px;margin-bottom:8px}
 .ux-person h5{font-size:13px;margin:16px 0 8px}
 .ux-person+.ux-person{margin-top:8px;padding-top:24px;border-top:1px solid var(--ux-line)}
 .ux-subtitle,.ux-subheading h4{font-size:20px;margin:26px 0 18px}
 .ux-about-project .ux-card{padding:14px 0}
 .ux-about-project .ux-card .ux-card-label{font-size:11px;margin-bottom:10px}
 .ux-credit{margin:24px 0 32px;padding:12px 24px}
 .ux-endnotes{gap:14px}
 #logofolio .logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 #logofolio .logo-card{min-height:190px;padding:12px 10px}
 #logofolio .logo-card p{font-size:11px}
}
@media(min-width:380px) and (max-width:700px){
 .ux-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ux-grid-3>.ux-card:last-child:nth-child(odd){grid-column:1/-1}
}

/* UX/UI phone layout: keep the roomy reading rhythm while preserving the original page composition. */
@media(max-width:700px){
 .ux-block{padding:46px 7%}
 .ux-heading{gap:28px;margin-bottom:34px}
 .ux-kicker{font-size:14px;line-height:1.45;margin-bottom:16px}
 .ux-heading h3{font-size:clamp(36px,10vw,56px);line-height:1.02}
 .ux-heading>p{font-size:15px;line-height:1.7}
 .ux-grid{gap:18px;margin-top:24px}
 .ux-grid-2,.ux-grid-3,.ux-grid-4,.ux-grid-5{grid-template-columns:1fr}
 .ux-grid-5>.ux-card:last-child{grid-column:auto}
 .ux-card,.ux-grid-5 .ux-card{padding:22px;border-radius:16px}
 .ux-card h4,.ux-grid-5 h4{font-size:21px;line-height:1.22;margin:14px 0 20px}
 .ux-card p,.ux-person p,.ux-case ul{font-size:14px;line-height:1.65}
 .ux-card .ux-card-label{font-size:11px;line-height:1.45}
 .ux-quote{padding:22px 0}
 .ux-quote h4{font-size:16px;margin-bottom:14px}
 .ux-quote hr{margin:14px 0}
 .ux-person img,.ux-person:last-child img{width:106px;max-width:30%;margin:0 0 16px 18px}
 .ux-person .ux-portrait-ring{float:right;width:106px;max-width:30%;margin:0 0 16px 18px}
 .ux-person .ux-portrait-ring img{float:none;width:100%;max-width:none;margin:0}
 .ux-person h4{font-size:25px;margin-bottom:10px}
 .ux-person h5{font-size:14px;margin:20px 0 10px}
 .ux-person+.ux-person{margin-top:28px;padding-top:30px}
 .ux-about-project>.ux-grid{width:100%;grid-template-columns:1fr}
 .ux-about-project .ux-card{padding:18px 0}
 .ux-about-project .ux-card .ux-card-label{font-size:12px;margin-bottom:12px}
 .ux-subtitle,.ux-subheading h4{font-size:22px;margin:32px 0 20px}
 .ux-subheading p{font-size:13px;line-height:1.6}
}


/* Ring and portrait use the same image-sized coordinate system at every breakpoint. */
.ux-portrait-ring>img{display:block;width:100%;max-width:none;margin:0}
@media(min-width:701px) and (max-width:1100px){.ux-portrait-ring{max-width:160px}}
.ux-gray .ux-card-label{color:#292929}
.ux-grid-5>.ux-gray{background:#797979;color:#fff;border-color:#797979}
.ux-grid-5>.ux-gray .ux-card-label{color:#fff}
.ux-grid-5>.ux-card{box-shadow:1px 2px 0 #0002}
.ux-grid-5+.ux-grid-2>.ux-card{border:0;border-radius:0;background:transparent;padding:16px 0;box-shadow:none}
.ux-rule{display:grid;grid-template-columns:1fr 3fr;align-items:center;gap:24px}
.ux-rule h4{margin:0}
@media(min-width:701px){
 .ux-muted>.ux-grid-3>.ux-card{display:flex;flex-direction:column;min-height:290px}
 .ux-muted>.ux-grid-3>.ux-card>p:last-child{margin-top:auto}
 .ux-grid-5>.ux-card{min-height:285px;display:flex;flex-direction:column}
 .ux-grid-5>.ux-card>p:last-child{margin-top:auto}
 #logofolio .logo-grid{width:min(100%,1120px);margin-inline:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.65%;align-items:start}
 #logofolio .logo-column{display:grid;gap:16px;min-width:0}
 #logofolio .logo-card,#logofolio .logo-card.tall{display:flex;flex-direction:column;min-width:0;min-height:0;height:auto;padding:18px 20px;background:#efefef;border-radius:0;color:#292929}
 #logofolio .logo-column:nth-child(1) .logo-card:nth-child(1){aspect-ratio:332/462}
 #logofolio .logo-column:nth-child(1) .logo-card:nth-child(2){aspect-ratio:332/270}
 #logofolio .logo-column:nth-child(2) .logo-card:nth-child(1){aspect-ratio:332/327}
 #logofolio .logo-column:nth-child(2) .logo-card:nth-child(2){aspect-ratio:332/405}
 #logofolio .logo-column:nth-child(3) .logo-card:nth-child(1){aspect-ratio:332/409}
 #logofolio .logo-column:nth-child(3) .logo-card:nth-child(2){aspect-ratio:332/324}
 #logofolio .logo-card p{font-size:clamp(11px,1.2vw,16px);line-height:1.3;flex:none;margin:0}
 #logofolio .logo-card .logo-art{flex:1;min-height:0;padding:16px 0;overflow:hidden}
 #logofolio .logo-card img,#logofolio .logo-card.tall img{width:100%;height:100%;max-height:100%;max-width:100%;object-fit:contain}
}
@media(max-width:700px){.ux-rule{grid-template-columns:1fr}}
@media(max-width:700px){.ux-card p,.ux-person p,.ux-case ul{font-size:15px;line-height:1.65}}