/* James Studio — editorial direction */
:root{--lime:#dcfc69}.nav{height:88px}.brand{font-size:36px}.brand span{letter-spacing:0}.navlinks a{font-size:14px}.gateway{padding:45px 3vw 30px}.gateway-intro{display:grid;grid-template-columns:1fr 2fr 1fr;gap:25px;align-items:end;padding:0 2vw 42px}.gateway-intro .eyebrow{max-width:160px;line-height:1.7;font-size:12px}.gateway-intro h1{font:500 clamp(40px,5vw,76px)/1.02 'Space Grotesk',sans-serif;letter-spacing:-.055em;margin:0}.gateway-intro h1 em,.studio-note h2 em,.design .subhero h1 em{font-family:Georgia,serif;font-weight:400}.gateway-intro>p:last-child{font-size:14px;line-height:1.6;color:var(--muted);justify-self:end}.gateway-panels{display:flex;gap:12px;min-height:620px;height:68svh;max-height:880px}.universe{position:relative;flex:1;overflow:hidden;isolation:isolate;padding:32px;display:flex;flex-direction:column;justify-content:space-between;transition:flex .65s cubic-bezier(.2,.7,.3,1)}.universe:hover,.universe:focus-visible{flex:1.16}.universe-music{background:#1c1e20}.universe-design{background:#d9fa66;color:#17200e}.universe-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.82;transition:transform 1s}.universe-music:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#111b 5%,transparent 85%);z-index:-1}.universe:hover .universe-art{transform:scale(1.07)}.universe-top{display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:.06em}.universe-title{margin-top:auto;position:relative;padding-top:60px}.universe-title h2{font:500 clamp(68px,8.2vw,124px)/.86 'Space Grotesk';letter-spacing:-.065em;margin:0}.universe-title h2 span{display:block;font:italic 400 .57em/1.2 Georgia,serif;letter-spacing:-.05em;margin-left:5px}.universe-title p{font-size:15px;line-height:1.5;margin:24px 0}.universe-link{font-size:14px;border-top:1px solid currentColor;padding-top:18px;display:block}.design-sample{position:absolute;top:0;right:-25px;width:55%;height:70%;display:flex;align-items:start;gap:13px;transform:rotate(-13deg) translateY(-60px);z-index:-1;opacity:.92}.design-sample img{width:50%;height:auto;box-shadow:0 20px 30px #25300d33;transition:transform .7s}.design-sample img+img{margin-top:100px}.universe-design:hover .design-sample img{transform:translateY(15px)}.studio-note{display:grid;grid-template-columns:1fr 2fr;gap:50px;padding-top:110px;padding-bottom:110px}.studio-note h2{font:500 clamp(38px,4.8vw,72px)/1.07 'Space Grotesk';letter-spacing:-.04em;margin:0 0 30px}.studio-note p{max-width:620px;color:var(--muted);line-height:1.8}.note-links{display:flex;gap:35px;margin-top:32px}.design{--bg:#f1f2ee;--fg:#171b18;--muted:#60675f;--line:#1c261b2b;background:var(--bg);color:var(--fg)}.design .navlinks a{color:#53594e}.design .navlinks a[aria-current=page]{color:#111}.design .navlinks a[aria-current=page]:after{content:'';display:block;height:2px;background:#111;margin-top:5px}.design .navlinks .contact{color:#111;border-color:#82877c}.design .subhero{padding:58px 0 50px}.design .subhero h1{font-size:clamp(64px,9.7vw,146px);letter-spacing:-.07em;margin:30px 0 25px}.design .subhero h1 em{font-size:.94em;letter-spacing:-.06em}.design .subhero-bottom{align-items:center}.design .subhero .intro{font-size:18px;line-height:1.6;max-width:455px;color:#5c635a;margin-top:0}.design .subhero .button{margin-top:3px;border-color:#17200e;background:#182018;color:#fff}.design .subhero-bottom>.eyebrow{font-size:12px;max-width:205px;line-height:1.7}.design .accent{color:inherit}.design .section{padding:74px 0}.design .section-heading h2{font-size:clamp(35px,4vw,58px)}.design .portfolio-kicker{font-size:12px}.work-grid{grid-template-columns:1fr 1fr;gap:68px 30px}.work-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.7fr 1fr;gap:42px;align-items:center}.work-card:first-child .work-info{padding:0}.work-card:first-child .work-cover{aspect-ratio:1.28}.am53-showcase{background:#061b31;padding:35px 25px!important;display:flex;flex-direction:row;gap:15px;align-items:center;justify-content:center}.am53-showcase img{width:30%;height:auto;max-height:95%;object-fit:contain;box-shadow:0 12px 30px #0005;transition:transform .5s}.am53-showcase img:nth-child(1){transform:translateY(-24px)}.am53-showcase img:nth-child(3){transform:translateY(24px)}.work-card:hover .am53-showcase img{transform:translateY(0)}.design .work-description{color:#596157}.design .work-info h3{font-size:32px}.design .work-cover{aspect-ratio:1.45}.design .work-word{font-size:clamp(50px,6vw,90px)}.design .work-pacaembu{background:#efe766;color:#243e2b}.design .work-vib3{background:#4722a6;color:#faf4ff}.design .work-blox{background:#162b25;color:#cefac6}.case-art-note{position:absolute;right:25px;bottom:12px;font-size:12px;opacity:.65}.work-card:last-child{grid-column:2;margin-top:-10px}.case-gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding-bottom:22px}.case-gallery img{width:100%;height:auto;display:block}.case-gallery a:hover{opacity:.8}.design .work-details summary:hover{color:#39580d}.design .statement{background:#19251e;color:#e2f3d6;padding-top:75px;padding-bottom:75px}.design .expertise .num{color:#425c30}.design .cta{border-top:1px solid var(--line)}.design .cta h2{font-size:clamp(52px,7vw,100px)}.design .button.primary{background:#1c2c20;border-color:#1c2c20;color:#fff}.music .subhero{padding-bottom:60px}.music .subhero h1{font-size:clamp(64px,9.7vw,146px)}.music .project{gap:6vw}.music .project:nth-of-type(2) .project-visual{order:2}.music .meanwhile{background:#d8c2e8;color:#261435}.music .meanwhile .cover-type{font-family:Georgia,serif;font-style:italic;font-size:clamp(65px,8vw,120px);font-weight:400}.music .project-visual{border-radius:2px}.music .section-heading h2{font-size:clamp(36px,4vw,60px)}.footer{padding:42px 0}.footer .brand{font-size:32px}.enter-view{transition:opacity .7s ease,transform .7s ease}.motion-enabled .enter-view:not(.is-visible){opacity:0;transform:translateY(24px)}
@media(max-width:900px){.gateway-intro{grid-template-columns:1fr 2fr}.gateway-intro>p:last-child{display:none}.gateway-panels{min-height:570px}.universe{padding:24px}.universe-top span:last-child{display:none}.work-card:first-child{grid-template-columns:1fr;gap:25px}.work-card:first-child .work-cover{aspect-ratio:1.7}.work-card:last-child{grid-column:auto;margin:0}}
@media(max-width:600px){.nav{height:78px}.brand{font-size:29px}.gateway{padding:25px 4vw}.gateway-intro{display:block;padding:0 2vw 30px}.gateway-intro .eyebrow{max-width:none;font-size:12px;margin:0 0 24px}.gateway-intro h1{font-size:49px}.gateway-panels{display:grid;height:auto;max-height:none;gap:12px}.universe{min-height:450px;padding:25px}.universe-title h2{font-size:87px}.universe-title p{font-size:14px}.universe-top{font-size:12px}.universe-art{object-position:center}.design-sample{width:55%;height:80%;top:20px}.studio-note{grid-template-columns:1fr;gap:30px;padding-top:65px;padding-bottom:65px}.studio-note h2{font-size:42px}.note-links{gap:22px}.note-links a{font-size:13px}.design .subhero{padding-top:38px}.design .subhero h1{font-size:clamp(50px,11.5vw,68px)}.design .subhero-bottom{align-items:start}.design .subhero-bottom>.eyebrow{max-width:100%}.design .section{padding:55px 0}.work-grid{grid-template-columns:1fr;gap:45px}.work-card:first-child{grid-column:auto}.work-card:first-child .work-cover{aspect-ratio:1.1}.am53-showcase{gap:8px;padding:20px 12px!important}.work-card:first-child .work-info{padding:0}.design .work-word{font-size:clamp(48px,11vw,70px)}.music .project:nth-of-type(2) .project-visual{order:0}.music .subhero h1{font-size:61px}.case-gallery{gap:5px}.design .work-info h3{font-size:29px}}
@media(prefers-reduced-motion:reduce){.motion-enabled .enter-view:not(.is-visible){opacity:1;transform:none}.universe,.universe-art,.design-sample img,.enter-view{transition:none}}

/* Cinematic entrance and editorial rhythm */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
@view-transition{navigation:auto}
::view-transition-old(root){animation:page-out .22s ease both}
::view-transition-new(root){animation:page-in .55s var(--motion-ease) both}
@keyframes page-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes page-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.gateway{max-width:1920px;margin:auto;padding-top:34px}
.gateway-intro{grid-template-columns:1fr 2.3fr 1fr;padding-bottom:36px}
.gateway-intro h1{font-size:clamp(44px,5.3vw,82px);line-height:1.08}
.gateway-intro>p:last-child{font-size:16px}
.gateway-panels{gap:10px;height:clamp(510px,62svh,780px);min-height:510px}
.universe{min-width:0;padding:30px 36px;transition:flex .85s var(--motion-ease),background .5s ease}
.universe:hover,.universe:focus-visible{flex:1.08}
.universe-title{padding-top:75px}
.universe-title h2{line-height:.98;font-size:clamp(64px,8.6vw,140px)}
.universe-title p{font-size:16px;max-width:320px}
.universe-top{flex-wrap:wrap;row-gap:8px;line-height:1.6}
.universe-link{position:relative;border-color:color-mix(in srgb,currentColor 35%,transparent);padding-top:20px;padding-bottom:2px}
.universe-link:before{content:'';position:absolute;top:-1px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .65s var(--motion-ease)}
.universe:is(:hover,:focus-visible) .universe-link:before{transform:scaleX(1)}
.universe-art{transition:transform 1.8s var(--motion-ease),opacity .8s ease}
.universe:hover .universe-art{transform:scale(1.035)}
.universe-music:after{background:linear-gradient(0deg,#0b1014e6, #0b101440 65%,#0b101455)}
.design-sample{width:49%;right:-12px;opacity:.82;top:15px;transform:rotate(-10deg) translateY(-70px)}
.universe-design:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#d9fa66 8%,#d9fa6600 80%);pointer-events:none}
.design-sample img{transition:transform 1.2s var(--motion-ease)}
.universe-design:hover .design-sample img{transform:translateY(9px)}
.studio-note{padding-top:140px;padding-bottom:140px}
.subhero h1,.design .subhero h1{line-height:1.06;padding-bottom:.05em}
.work-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:3vw;row-gap:100px}
.work-card:first-child{grid-column:1/-1;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:5vw}
.work-card:first-child .work-cover{aspect-ratio:1.28}
.work-card:nth-child(2){grid-column:1/8}
.work-card:nth-child(3){grid-column:9/13;margin-top:170px}
.work-card:last-child{grid-column:4/12;margin-top:0}
.design .work-card:nth-child(3) .work-cover{aspect-ratio:.88}
.design .work-card:last-child .work-cover{aspect-ratio:1.85}
.design .work-word{font-size:clamp(40px,5.6vw,88px)}
.work-card .work-word{transition:transform .7s var(--motion-ease)}
.work-info{padding-top:26px}
.work-info h3{transition:color .3s ease}
.am53-showcase img{transition:transform .85s var(--motion-ease)}
.work-card:hover .am53-showcase img:nth-child(1){transform:translateY(-18px)}
.work-card:hover .am53-showcase img:nth-child(3){transform:translateY(18px)}
.case-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.case-gallery a{overflow:hidden;transition:opacity .25s ease}
.case-gallery img{transition:transform .6s var(--motion-ease)}
.case-gallery a:hover img{transform:scale(1.025)}
.textlink,.button,.navlinks a,.footer-links a{transition:color .3s ease,background .3s ease,border-color .3s ease,transform .35s var(--motion-ease)}
.textlink:hover{transform:translateY(-2px)}
.button:hover{transform:translateY(-2px)}
.design .button.primary:hover{background:#36523b;border-color:#36523b}
.design a:focus-visible,.design summary:focus-visible{outline-color:#36523b}
.project-visual img{transition:transform 1.2s var(--motion-ease)}
.project-visual:hover img{transform:scale(1.035)}
.music .project:nth-of-type(2){grid-template-columns:.85fr 1.15fr}
.reveal-title{transition:opacity .85s var(--motion-ease),transform 1.05s var(--motion-ease),clip-path 1.05s var(--motion-ease)}
.reveal-image{transition:opacity 1s ease,clip-path 1.2s var(--motion-ease)}
.reveal-copy{transition:opacity .8s ease,transform .9s var(--motion-ease)}
.motion-enabled .reveal-title:not(.is-visible){opacity:0;transform:translateY(24px);clip-path:inset(0 0 100% 0)}
.motion-enabled .reveal-image:not(.is-visible){opacity:.2;clip-path:inset(12% 0 0 0)}
.motion-enabled .reveal-copy:not(.is-visible){opacity:0;transform:translateY(18px)}
.is-visible{clip-path:inset(0);opacity:1}
@media(prefers-reduced-motion:no-preference){
.gateway-intro h1,.subhero h1{animation:title-arrival 1.05s var(--motion-ease) both}
.gateway-intro .eyebrow,.gateway-intro>p:last-child,.subhero-bottom{animation:copy-arrival .9s .12s var(--motion-ease) both}
.universe-music{animation:panel-arrival 1.2s .08s var(--motion-ease) both}
.universe-design{animation:panel-arrival 1.2s .2s var(--motion-ease) both}
@keyframes title-arrival{from{opacity:0;transform:translateY(30px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes copy-arrival{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes panel-arrival{from{opacity:0;clip-path:inset(8% 0 0 0);transform:translateY(24px)}to{opacity:1;clip-path:inset(0);transform:none}}
}
@media(min-width:761px) and (max-width:1050px){
.gateway-intro{grid-template-columns:1fr 2fr}.gateway-intro>p:last-child{display:block;grid-column:2;justify-self:start;margin:0}
.universe{padding:25px}.universe-top span:last-child{display:block}.universe-title h2{font-size:clamp(60px,8.5vw,88px)}
.work-card:first-child{grid-template-columns:1fr;gap:28px}.work-card:first-child .work-cover{aspect-ratio:1.65}.work-card:first-child .work-info{max-width:640px}
.work-card:nth-child(2){grid-column:1/8}.work-card:nth-child(3){grid-column:8/13;margin-top:100px}.work-card:last-child{grid-column:3/12}
.design .work-word{font-size:clamp(36px,5.6vw,64px)}
}
@media(max-width:760px){
.gateway{padding:28px 5vw 20px}.gateway-intro{display:block;padding:0 1vw 28px}.gateway-intro .eyebrow{max-width:none;margin-bottom:22px}.gateway-intro h1{font-size:clamp(42px,9.6vw,68px)}.gateway-intro>p:last-child{display:block;font-size:16px;margin:22px 0 0}
.gateway-panels{display:grid;grid-template-columns:1fr;height:auto;max-height:none;min-height:0;gap:14px}
.universe{min-height:470px;padding:25px}.universe-top span:last-child{display:block}.universe-title h2{font-size:clamp(70px,16vw,110px)}.universe-title p{font-size:16px}.design-sample{width:48%;top:0}
.studio-note{padding-top:75px;padding-bottom:75px;grid-template-columns:1fr;gap:28px}.studio-note h2{font-size:clamp(34px,7vw,52px)}.note-links{flex-wrap:wrap;gap:24px}.note-links a{font-size:14px}
.work-grid{grid-template-columns:minmax(0,1fr);gap:60px}.work-card:first-child{display:grid;grid-template-columns:1fr;gap:26px}
.work-card:first-child,.work-card:nth-child(2),.work-card:nth-child(3),.work-card:last-child{grid-column:1;margin-top:0}
.work-card:first-child .work-cover{aspect-ratio:1.15}.design .work-card:nth-child(3) .work-cover,.design .work-card:last-child .work-cover{aspect-ratio:1.35}
.design .work-word{font-size:clamp(40px,10.5vw,76px)}.design .work-info h3{font-size:clamp(26px,6.5vw,34px)}
.music .subhero h1{font-size:clamp(44px,10.4vw,78px)}.music .project:nth-of-type(2){grid-template-columns:1fr}.music .project:nth-of-type(2) .project-visual{order:0}
.design .subhero h1{font-size:clamp(44px,10vw,80px)}.subhero-bottom{align-items:start!important}
}
@media(hover:none){.universe:hover{flex:1}.universe:hover .universe-art,.project-visual:hover img{transform:none}.work-card:hover .work-word{transform:none}}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}
.motion-enabled .reveal-title:not(.is-visible),.motion-enabled .reveal-image:not(.is-visible),.motion-enabled .reveal-copy:not(.is-visible){opacity:1;transform:none;clip-path:none}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Official album artwork, displayed in full and with its original colors. */
.music .project-visual.album-cover{padding:0;background:#050505}
.music .project-visual.album-cover img{position:static;display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;filter:none;mix-blend-mode:normal;opacity:1;transform:none}
/* Match the Music accent to the studio's existing green palette. */
.music .accent{color:#d7fc5e}

/* Spotify actions for selected Kinetic Protocol tracks */
.music .tracklist li{align-items:center;gap:18px}.music .tracklist .track-number{flex:none}.music .tracklist .track-name{color:var(--fg);font-size:15px;flex:1}.track-spotify{margin-left:auto;flex:none;border:1px solid #d7fc5e80;border-radius:999px;padding:8px 12px;color:#d7fc5e;font-size:11px;letter-spacing:.02em;white-space:nowrap;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}.track-spotify:hover{background:#d7fc5e;color:#10110f;border-color:#d7fc5e;transform:translateY(-1px)}@media(max-width:600px){.music .tracklist li{gap:12px}.track-spotify{padding:7px 9px;font-size:10px}}

.track-soon,.track-soon:hover{opacity:.55;cursor:default;background:transparent;color:#d7fc5e;border-color:#d7fc5e80;transform:none}


/* Artist biography */
.music .artist-story{border-top:1px solid var(--line)}
.artist-heading{display:grid;grid-template-columns:1fr 2fr;gap:50px;align-items:start;margin-bottom:48px}
.artist-heading h2{font:400 clamp(36px,4.8vw,72px)/1.08 'Space Grotesk',sans-serif;letter-spacing:-.045em;margin:0}
.artist-heading>.eyebrow{padding-top:10px}
.artist-image{margin:0 0 52px;overflow:hidden;border-radius:2px}
.artist-image img{display:block;width:100%;height:auto}
.artist-bio{display:grid;grid-template-columns:1fr 2fr;gap:50px}
.artist-identity .eyebrow{color:#d7fc5e}
.artist-identity p{font-size:16px;line-height:1.7;color:var(--muted);margin-top:20px}
.artist-copy>p{font-size:17px;line-height:1.8;color:var(--muted);margin:0 0 22px;max-width:720px}
.artist-copy>p.artist-lead{font-size:clamp(21px,2vw,28px);line-height:1.5;color:var(--fg)}
.artist-notes{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:14px 0 28px}
.artist-notes>div{border-top:1px solid var(--line);padding-top:22px}
.artist-notes h3{font:500 20px/1.3 'Space Grotesk',sans-serif;margin:0 0 14px;letter-spacing:-.02em}
.artist-notes p{font-size:16px;line-height:1.75;color:var(--muted);margin:0}
@media(max-width:800px){.artist-heading,.artist-bio{grid-template-columns:1fr;gap:24px}.artist-heading{margin-bottom:30px}.artist-image{margin-bottom:30px}.artist-identity p{margin:12px 0 0}.artist-notes{gap:24px}}
@media(max-width:520px){.artist-notes{grid-template-columns:1fr}.artist-heading h2{font-size:clamp(34px,9vw,46px)}}

/* A horizontal window onto an image anchored to the viewport. */
.artist-image{position:relative;aspect-ratio:3 / 1;min-height:240px;max-height:480px;overflow:hidden}
.artist-image img{position:absolute;inset:0 auto auto 0;width:100%;max-width:none;height:100%;object-fit:cover;object-position:40% center}
.artist-image.has-parallax img{height:var(--artist-viewport,100vh);transform:translate3d(0,var(--artist-y,0px),0);will-change:transform}
@media(max-width:600px){.artist-image{aspect-ratio:1.6 / 1;min-height:220px}}
@media(prefers-reduced-motion:reduce){.artist-image.has-parallax img{height:100%;transform:none;will-change:auto}}
@media print{.artist-image.has-parallax img{height:100%;transform:none;will-change:auto}}

.artist-image{margin-bottom:12px}.artist-image img{object-position:center top}.artist-credit{margin:0 0 52px;text-align:right;font-size:14px;line-height:1.5;color:var(--muted)}.artist-credit a{text-decoration:underline;text-underline-offset:4px}.artist-credit a:hover{color:#d7fc5e}@media(max-width:800px){.artist-credit{margin-bottom:30px}}

.design-pending{min-height:70svh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:80px 0;gap:26px}.design-pending h1{font:500 clamp(42px,7vw,104px)/1.08 "Space Grotesk",sans-serif;letter-spacing:-.045em;margin:0;overflow-wrap:anywhere}.design-pending h1 span{color:#53634a}.design-pending p{font-size:18px;line-height:1.7;color:var(--muted);margin:0}.design-pending .button{margin-top:8px}@media(max-width:600px){.design-pending{padding:60px 0}.design-pending h1{font-size:clamp(34px,8.4vw,50px)}}

.design-pending-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}.design-pending-actions .button{margin-top:0}.design-pending-actions .textlink{padding:8px 0}@media(max-width:600px){.design-pending-actions{gap:22px}}