:root{--forest:#0b2119;--forest-2:#132c22;--cream:#f2ead4;--moss:#b7ce75;--amber:#da9147;--pink:#cf6d86;--violet:#74566f;--line:rgba(242,234,212,.22);--display:"Fraunces",Georgia,serif;--sans:"DM Sans",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--forest)}body{margin:0;overflow-x:hidden;background:var(--forest);color:var(--cream);font-family:var(--sans);cursor:auto}a{color:inherit}.grain{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.haze{position:fixed;width:56vw;aspect-ratio:1;border-radius:50%;pointer-events:none;filter:blur(90px);opacity:.14;z-index:0;animation:drift 22s ease-in-out infinite alternate}.haze-one{left:-25vw;top:5vh;background:var(--moss)}.haze-two{right:-30vw;top:55vh;background:var(--violet);animation-delay:-9s}.site-head{position:fixed;inset:0 0 auto;z-index:15;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:24px clamp(20px,4vw,64px);font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;mix-blend-mode:difference}.site-head a{text-decoration:none}.wordmark{font:600 1.35rem/.8 var(--display);letter-spacing:-.05em;text-align:center;text-transform:none}.portfolio-link{justify-self:end}.hero{position:relative;z-index:1;min-height:100svh;display:grid;align-content:center;padding:120px clamp(20px,6vw,96px) 48px;overflow:hidden}.hero-tagline{position:relative;z-index:2;max-width:11ch;margin:0 auto;font:600 clamp(4.5rem,11vw,11.5rem)/.78 var(--display);letter-spacing:-.075em;text-align:center;text-wrap:balance}.hero-orbit{position:absolute;width:min(68vw,820px);aspect-ratio:1;left:50%;top:47%;translate:-50% -50%;border:1px solid rgba(183,206,117,.32);border-radius:46% 54% 48% 52%;animation:orbit 19s linear infinite}.hero-orbit:before,.hero-orbit:after{position:absolute;inset:12%;border:1px solid rgba(242,234,212,.12);border-radius:55% 45% 58% 42%;content:"";animation:orbit 27s linear infinite reverse}.hero-orbit:after{inset:26%;border-color:rgba(218,145,71,.3);animation-duration:14s}.hero-orbit span{position:absolute;right:6%;top:17%;display:grid;place-items:center;width:62px;aspect-ratio:1;border-radius:50%;background:var(--moss);color:var(--forest);font-weight:600}.hero-foot{position:absolute;left:clamp(20px,4vw,64px);right:clamp(20px,4vw,64px);bottom:30px;display:flex;justify-content:space-between;align-items:end;gap:24px;font-size:.88rem}.hero-foot p{max-width:32ch;margin:0;color:rgba(242,234,212,.74);line-height:1.45}.hero-foot a{text-decoration:none}.hero-foot span{display:inline-block;margin-left:8px;animation:bob 2s ease-in-out infinite}.ticker{position:relative;z-index:2;overflow:hidden;padding:15px 0;border-block:1px solid var(--line);color:var(--forest);background:var(--moss);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}.ticker div{display:inline-flex;gap:30px;align-items:center;min-width:max-content;animation:ticker 32s linear infinite}.ticker i{font-style:normal}.portfolio{position:relative;z-index:1;padding:clamp(90px,12vw,180px) clamp(20px,5vw,80px)}.portfolio-head{display:grid;grid-template-columns:1fr 2fr 1fr;gap:30px;align-items:end;max-width:1480px;margin:0 auto clamp(90px,12vw,170px);padding-bottom:30px;border-bottom:1px solid var(--line)}.portfolio-head p,.portfolio-head span{margin:0;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase}.portfolio-head span{text-align:right;color:rgba(242,234,212,.6)}.portfolio-head h1{margin:0;font:600 clamp(3.5rem,7vw,7rem)/.86 var(--display);letter-spacing:-.055em;text-align:center}.company-list{max-width:1480px;margin:auto}.company{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.7fr);gap:clamp(28px,6vw,90px);align-items:center;margin-bottom:clamp(110px,15vw,220px)}.company.flip{grid-template-columns:minmax(260px,.7fr) minmax(0,1.6fr)}.company.flip .media{grid-column:2}.company.flip .copy{grid-column:1;grid-row:1}.media{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:48% 52% 45% 55%/5% 8% 6% 7%;box-shadow:0 30px 100px rgba(0,0,0,.28);transition:transform 900ms cubic-bezier(.2,.7,.2,1),border-radius 900ms ease}.company:nth-child(3n) .media{border-radius:5% 8% 7% 6%/42% 48% 52% 46%}.company:hover .media{transform:scale(1.012) rotate(.25deg);border-radius:4%}.atlas{background-repeat:no-repeat;background-size:300% 100%}.atlas-01{background-image:url("assets/atlas-01.jpg")}.atlas-02{background-image:url("assets/atlas-02.jpg")}.atlas-03{background-image:url("assets/atlas-03.jpg")}.atlas-04{background-image:url("assets/atlas-04.jpg")}.slice-0{background-position:0 50%}.slice-1{background-position:50% 50%}.slice-2{background-position:100% 50%}.copy{position:relative}.copy>span{display:block;margin-bottom:18px;color:var(--moss);font-size:.72rem;font-weight:600;letter-spacing:.12em}.copy h2{margin:0 0 18px;font:600 clamp(3rem,6vw,7rem)/.84 var(--display);letter-spacing:-.06em}.copy p{max-width:34ch;margin:0;color:rgba(242,234,212,.72);font-size:clamp(1rem,1.3vw,1.25rem);line-height:1.48}.feature .media{aspect-ratio:16/8}.adult-art{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(242,234,212,.7) 0 2%,transparent 3%),repeating-radial-gradient(ellipse at center,var(--violet) 0 7%,var(--pink) 8% 13%,var(--amber) 14% 18%,var(--forest-2) 19% 26%);filter:saturate(.7)}.adult-art:after{position:absolute;inset:0;background:rgba(11,33,25,.34);backdrop-filter:blur(2px);content:""}.adult-art span{position:absolute;z-index:2;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:112px;aspect-ratio:1;border:1px solid var(--cream);border-radius:50%;font:600 2rem var(--display)}.manifesto{position:relative;z-index:1;min-height:90svh;display:grid;place-content:center;overflow:hidden;padding:100px 20px;background:var(--moss);color:var(--forest);text-align:center}.manifesto:before{position:absolute;width:70vw;aspect-ratio:1;left:-25vw;top:-40%;border:1px solid rgba(11,33,25,.3);border-radius:44% 56%;content:"";animation:orbit 24s linear infinite}.manifesto p{margin:0 0 22px;font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase}.manifesto h2{position:relative;margin:0;font:700 clamp(5rem,14vw,14rem)/.72 var(--display);letter-spacing:-.08em}.peace{position:absolute;right:7vw;bottom:7vh;font-size:clamp(4rem,9vw,9rem);animation:float 5s ease-in-out infinite}footer{position:relative;z-index:1;display:flex;justify-content:space-between;gap:30px;padding:40px clamp(20px,5vw,80px);font-size:.78rem;color:rgba(242,234,212,.68)}footer p{margin:0;max-width:52ch}footer a{color:var(--cream)}.reveal{opacity:0;transform:translateY(42px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.75,.2,1)}.reveal.visible{opacity:1;transform:none}.ufo{display:none}
@media(pointer:fine){body{cursor:none}a{cursor:none}.ufo{position:fixed;z-index:50;display:block;width:34px;height:13px;border:1px solid var(--cream);border-radius:50%;background:rgba(183,206,117,.82);pointer-events:none;transform:translate3d(-80px,-80px,0) rotate(-6deg);filter:drop-shadow(0 5px 8px rgba(183,206,117,.35))}.ufo:before{position:absolute;width:14px;height:8px;left:9px;top:-6px;border:1px solid var(--cream);border-bottom:0;border-radius:12px 12px 0 0;background:rgba(116,86,111,.85);content:""}.ufo:after{position:absolute;width:20px;height:18px;left:7px;top:9px;background:linear-gradient(rgba(183,206,117,.24),transparent);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);content:""}}
@media(max-width:760px){.site-head{padding:18px 16px}.portfolio-link{display:none}.site-head{grid-template-columns:1fr auto}.wordmark{justify-self:end}.hero{padding-inline:18px}.hero-tagline{font-size:clamp(4rem,20vw,6.4rem)}.hero-foot{left:18px;right:18px;display:block}.hero-foot p{margin-bottom:14px}.hero-orbit{width:115vw}.portfolio{padding-inline:18px}.portfolio-head{grid-template-columns:1fr;margin-bottom:90px}.portfolio-head h1{text-align:left}.portfolio-head span{text-align:left}.company,.company.flip{display:flex;flex-direction:column;gap:28px;margin-bottom:110px}.company.flip .media,.company.flip .copy{grid-column:auto;grid-row:auto}.media,.feature .media{aspect-ratio:4/3;border-radius:34px}.copy{align-self:stretch}.copy h2{font-size:clamp(3.4rem,16vw,5.7rem)}.manifesto{min-height:74svh}.manifesto h2{font-size:clamp(4.2rem,21vw,7rem)}footer{display:block;line-height:1.5}footer p{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.haze,.hero-orbit,.hero-orbit:before,.hero-orbit:after,.ticker div,.manifesto:before,.peace,.hero-foot span{animation:none}.reveal{opacity:1;transform:none;transition:none}.media{transition:none}}
@keyframes orbit{to{rotate:1turn}}@keyframes drift{to{translate:18vw 14vh;scale:1.14}}@keyframes bob{50%{transform:translateY(5px)}}@keyframes ticker{to{transform:translateX(-50%)}}@keyframes float{50%{transform:translateY(-16px) rotate(4deg)}}

html,body{max-width:100%;overflow-x:clip}
@media(max-width:760px){.hero-orbit span{display:none}}

/* Each portfolio scene is a real square crop. This avoids stretching the
   original three-panel atlases into the wide editorial frames. */
.atlas{background-size:cover;background-position:center;background-repeat:no-repeat}
.atlas-01.slice-0{background-image:url("assets/portfolio/01-0.jpg")}
.atlas-01.slice-1{background-image:url("assets/portfolio/01-1.jpg")}
.atlas-01.slice-2{background-image:url("assets/portfolio/01-2.jpg")}
.atlas-02.slice-0{background-image:url("assets/portfolio/02-0.jpg")}
.atlas-02.slice-1{background-image:url("assets/portfolio/02-1.jpg")}
.atlas-02.slice-2{background-image:url("assets/portfolio/02-2.jpg")}
.atlas-03.slice-0{background-image:url("assets/portfolio/03-0.jpg")}
.atlas-03.slice-1{background-image:url("assets/portfolio/03-1.jpg")}
.atlas-03.slice-2{background-image:url("assets/portfolio/03-2.jpg")}
.atlas-04.slice-0{background-image:url("assets/portfolio/04-0.jpg")}
.atlas-04.slice-1{background-image:url("assets/portfolio/04-1.jpg")}

.soundtrack{position:relative;z-index:1;display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);gap:clamp(36px,7vw,110px);align-items:end;padding:clamp(90px,11vw,160px) clamp(20px,5vw,80px);background:var(--forest-2);border-bottom:1px solid var(--line)}
.soundtrack-copy p{margin:0 0 16px;color:var(--moss);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.soundtrack-copy h2{max-width:7ch;margin:0;font:600 clamp(3.8rem,7vw,7.5rem)/.82 var(--display);letter-spacing:-.065em}
.soundtrack iframe{display:block;border:0;border-radius:18px;box-shadow:0 28px 90px rgba(0,0,0,.28)}
@media(max-width:760px){.soundtrack{grid-template-columns:1fr;align-items:start;padding-block:90px}.soundtrack iframe{height:352px;border-radius:14px}}

/* Long portfolio names must shrink and wrap inside their own column. */
.company,.copy{min-width:0;max-width:100%}
.copy h2{max-width:100%;overflow-wrap:normal;word-break:normal;text-wrap:balance}
@media(min-width:761px){.copy h2{font-size:clamp(2.65rem,4.5vw,5.5rem)}}
@media(max-width:760px){.copy h2{font-size:clamp(3rem,14vw,5.25rem)}}

/* Keep long company names inside narrow iPhone viewports. */
@media(max-width:760px){
  .copy h2{
    font-size:clamp(2.75rem,12vw,4.6rem);
    line-height:.86;
    letter-spacing:-.055em;
    overflow-wrap:anywhere;
  }
}