@font-face { font-family: Aktura; src: url("public/assets/fonts/Aktura-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: Switzer; src: url("https://framerusercontent.com/third-party-assets/fontshare/wf/BLNB4FAQFNK56DWWNF7PMGTCOTZHOEII/ST3WKSSDMBK2MIQQO3MAVYWLF4FTOLFV/6IN5WOLRCYP4G4MOCOHOMXNON6Q7MDAR.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400; }
:root { --blue:#2626ef; --type-heading:36px; --type-label:12px; --type-body:14px; --type-caption:11px; --type-description:22px; --caption-gap:84px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:#000; }
body { margin:0; background:#000; color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:var(--type-caption); letter-spacing:-.035em; }
a { color:inherit; text-decoration:none; }
img,video { display:block; max-width:100%; }
.wordmark,.hero h1,.contact h2 { font-family:Aktura, Georgia, serif; font-weight:400; letter-spacing:-.06em; }
.site-nav { position:fixed; z-index:20; inset:0 0 auto; height:80px; padding:0 2vw; display:flex; align-items:center; justify-content:space-between; color:#fff; mix-blend-mode:difference; opacity:0; transform:translateY(-90px); transition:opacity .16s ease-out, transform .32s cubic-bezier(.16,1,.3,1); }
.site-nav.is-hidden { opacity:0; transform:translateY(-18px); pointer-events:none; }
.page-ready .site-nav { opacity:1; transform:none; transition-delay:1s; }.site-nav.intro-complete { transition-delay:0s; }
.wordmark { font-size:28px; white-space:nowrap; }
.site-nav nav { display:flex; gap:52px; font-size:16px; font-weight:500; letter-spacing:-.055em; }
.site-nav a { transition:opacity .18s ease; }.site-nav a:hover { opacity:.55; }
.hero { min-height:100svh; position:relative; isolation:isolate; display:grid; place-items:center; overflow:visible; }
.hero-copy { position:relative; z-index:2; text-align:center; pointer-events:none; }
.hero h1 { margin:0; color:var(--blue); font-size:clamp(86px,13vw,200px); line-height:.76; opacity:0; transform:translateY(72px); transition:opacity .62s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.hero p { margin:22px 0 0; font-size:var(--type-label); font-weight:500; line-height:1.08; letter-spacing:-.035em; opacity:0; transform:translateY(72px); transition:opacity .62s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.page-ready .hero h1 { opacity:1; transform:none; transition-delay:1s; }.page-ready .hero p { opacity:1; transform:none; transition-delay:1.1s; }
.hero-trail { position:absolute; inset:0; overflow:visible; pointer-events:none; z-index:1; }
.trail-piece { position:absolute; width:clamp(94px,12.2vw,180px); transform:translate(-50%,-50%) rotate(var(--r)) scale(.72); opacity:0; animation:trail-in .28s cubic-bezier(.16,1,.3,1) forwards, trail-out .34s .72s ease-in forwards; will-change:transform,opacity; }
@keyframes trail-in { 0% { opacity:0; transform:translate(-50%,-50%) translate(var(--offset-x),var(--offset-y)) rotate(var(--r)) scale(.72); } 62% { opacity:.95; transform:translate(-50%,-50%) translate(var(--glide-x),var(--glide-y)) rotate(calc(var(--r) + var(--tilt))) scale(1.035); } 100% { opacity:.93; transform:translate(-50%,-50%) rotate(calc(var(--r) + var(--tilt))) scale(1); } }
@keyframes trail-out { to { opacity:0; transform:translate(-50%,-50%) translate(var(--drift-x),var(--drift-y)) rotate(calc(var(--r) + var(--tilt))) scale(.9); } }
.section { width:min(93.75vw,1200px); margin:0 auto; }
.works { padding:clamp(255px,48vh,345px) 0 0; }
.section-heading { width:92.5%; margin:0 auto; }.section-heading h2 { margin:0; font-size:var(--type-heading); font-weight:700; line-height:1.2; letter-spacing:-.04em; }
.project { margin:0 0 180px; }
.work-stream { width:92.5%; margin:0 auto; }
.work-art { width:100%; position:relative; overflow:hidden; background:#111; }.work-art.work-stream { width:91.2%; margin:0 auto; }
.work-art img { width:100%; height:100%; object-fit:cover; }
.work-art.square { aspect-ratio:1; }
.phase-mark { aspect-ratio:1.595; }
.merch-grid { width:70%; margin:102px auto 0; display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:17%; }
.garment { border:0; background:transparent; color:#fff; padding:0; margin:0; display:flex; flex-direction:column; align-items:center; font:inherit; cursor:default; }
.shirt { cursor:zoom-in; }.garment img { width:100%; max-width:365px; }.hoodie img { filter:grayscale(1); }.garment span,.garment figcaption { margin-top:21px; font-size:var(--type-label); line-height:1; font-weight:600; letter-spacing:-.055em; }
.work-copy { color:#fff; font-size:var(--type-description); font-weight:500; line-height:1.2; letter-spacing:-.01em; text-align:center; }.phase-copy { width:min(849px,100%); margin:147px auto var(--caption-gap); }.disco-copy { width:min(861px,100%); margin:var(--caption-gap) auto; }.disco-copy p { margin:0 0 12px; }.other-copy { width:min(850px,100%); margin:var(--caption-gap) auto; }.project-discotheque { margin-bottom:90px; }.project-other > .other-copy:first-child { margin:48px auto 184px; }
.drawing { width:87%; margin:0 auto; aspect-ratio:1125/1534; }.drawing img { object-fit:cover; }.bag { width:79%; margin:0 auto; aspect-ratio:2850/2900; }.bag img { object-fit:cover; }
.reveal { opacity:0; transform:translateY(20px); transition:opacity .52s cubic-bezier(.22,1,.36,1), transform .72s cubic-bezier(.22,1,.36,1); }.reveal.is-visible { opacity:1; transform:none; }
.logo-section { width:96vw; max-width:none; padding:92px 0 190px; }.logo-section .section-heading { width:96%; margin-bottom:132px; }.logo-section .section-heading h2 { font-size:36px; font-weight:700; line-height:1.2; letter-spacing:-.04em; }.logos { display:flex; align-items:center; justify-content:center; gap:clamp(104px,9vw,190px); padding:0; }.logos img { height:auto; object-fit:contain; filter:invert(1); cursor:pointer; transform:translate3d(var(--logo-x,0),var(--logo-y,0)) rotate(var(--logo-r,0)) scale(var(--logo-scale,1)); transition:transform .22s cubic-bezier(.22,1,.36,1); will-change:transform; }.logos img:nth-child(1) { width:160px; }.logos img:nth-child(2) { width:155px; }.logos img:nth-child(3) { width:135px; }
.about,.contact { width:min(96vw,1680px); }.about { padding:0 0 160px; }.about .section-heading { margin-bottom:58px; }.about-layout { min-height:720px; display:grid; grid-template-columns:minmax(0,1fr) clamp(300px,24vw,430px); column-gap:clamp(50px,6vw,120px); align-items:end; padding:0 3% 0 9%; }.about-text { width:100%; max-width:none; color:#666; font-family:Switzer, Arial, Helvetica, sans-serif; font-size:37px; font-weight:400; line-height:55px; letter-spacing:-2.1px; mix-blend-mode:difference; }.about-text p { margin:0; }.about-word { color:var(--about-ink,#666); transition:color .08s linear; }.about-aside { width:100%; align-self:end; opacity:var(--guy-opacity,1); transform:translateY(var(--guy-y,0)); transition:opacity .1s linear, transform .1s linear; will-change:opacity,transform; }.guy { width:100%; max-width:100%; margin:0; }
.services { margin-top:112px; display:grid; grid-template-columns:32% 1fr; column-gap:10%; row-gap:46px; align-items:start; }.services-title>span { display:block; margin-bottom:12px; color:#9d9d9d; font-size:16px; font-weight:500; letter-spacing:-.04em; }.services h3,.find-me h3,.credits h3 { margin:0; font-size:var(--type-heading); line-height:.92; font-weight:700; letter-spacing:-.05em; }.services ul { list-style:none; margin:0; padding:0; font-size:22px; font-weight:600; line-height:1.5; letter-spacing:-.045em; }.services li::before { content:"•"; padding-right:15px; }.availability { grid-column:1/-1; width:min(900px,100%); margin:0; justify-self:center; color:#bbb; font-size:20px; line-height:1.22; text-align:center; }
.contact { min-height:100svh; padding:120px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }.contact h2 { margin:0; color:var(--blue); font-size:clamp(84px,12vw,180px); line-height:.75; }.email-wrap { position:relative; display:inline-flex; margin:42px auto 38px; border:1px solid #aaa; border-radius:99px; padding:9px 20px; font-size:16px; font-weight:500; letter-spacing:-.045em; }.contact-phone { width:min(45.75vw,549px); aspect-ratio:1.5; margin:0 auto; object-fit:cover; background:#000; }.email { outline:none; cursor:copy; white-space:nowrap; }.copy-status { position:absolute; top:40px; width:100%; font-size:9px; color:#aaa; }.find-me { width:100%; max-width:100%; margin-top:168px; text-align:left; }.find-me h3 { margin-bottom:84px; font-size:42px; }.find-me-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:56px; }.find-links { display:flex; flex-direction:column; gap:14px; }.find-links a { font-size:22px; font-weight:600; letter-spacing:-.055em; }.find-socials { justify-self:end; display:flex; align-items:center; gap:72px; }.find-socials a { width:52px; height:52px; display:grid; place-items:center; }.find-socials svg { width:52px; height:52px; fill:#fff; }.find-me p { width:max-content; max-width:100%; margin:24px 0 0 auto; color:#aaa; font-size:16px; text-align:right; }.credits { width:100%; max-width:100%; margin-top:112px; text-align:left; }.credits h3 { margin-bottom:30px; font-size:42px; }.credits p { margin:0; color:#fff; font-size:20px; line-height:1.2; }
footer { width:100%; margin:0; padding:36px 2vw 40px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; font-size:14px; } footer .wordmark { font-size:28px; }.socials { justify-self:end; display:flex; gap:28px; }.socials a { width:24px; height:24px; display:grid; place-items:center; }.socials svg { width:24px; fill:#fff; }
.image-modal { width:fit-content; max-width:92vw; padding:0; border:0; background:transparent; overflow:visible; }.image-modal::backdrop { background:rgba(0,0,0,.9); backdrop-filter:blur(4px); }.image-modal img { width:auto; height:auto; max-width:92vw; max-height:86svh; margin:auto; object-fit:contain; }.modal-close { position:fixed; z-index:2; top:20px; right:26px; border:0; background:transparent; color:#fff; font:300 42px/1 Arial; cursor:pointer; }
@media (min-width:701px) and (max-width:1199px) { :root { --type-heading:18px; --type-label:11px; --type-caption:10px; --type-description:13px; --caption-gap:56px; }.section { width:88vw; }.works { padding-top:clamp(165px,22.5vh,240px); }.merch-grid { width:76%; margin-top:62px; gap:13%; }.phase-copy { width:330px; margin:var(--caption-gap) auto; }.disco-copy { width:390px; }.other-copy { width:330px; }.project-discotheque { margin-bottom:24px; }.project-other > .other-copy:first-child { margin:var(--caption-gap) auto; }.logos { gap:60px; }.logos img { width:116px; height:43px; }.about-layout { min-height:520px; }.about-text { width:min(78%,720px); font-size:29px; line-height:43px; letter-spacing:-1.6px; }.about-aside { width:220px; }.services { grid-template-columns:30% 1fr; row-gap:28px; }.availability { width:400px; }.email-wrap { padding:8px 18px; font-size:14px; }.contact-phone { width:min(56vw,500px); }.find-socials { gap:32px; } footer { width:92vw; } }
@media (max-width:700px) { :root { --type-heading:14px; --type-label:10px; --type-body:9px; --type-caption:8px; --type-description:10px; --caption-gap:38px; } body { font-size:var(--type-caption); }.site-nav { height:46px; padding:0 4vw; }.wordmark { font-size:15px; }.site-nav nav { gap:16px; font-size:var(--type-label); }.hero h1 { font-size:17vw; }.hero p { margin-top:13px; font-size:var(--type-label); }.trail-piece { width:32vw; }.section { width:91.6vw; }.works { padding-top:89px; }.section-heading { margin-bottom:11px; }.section-heading h2 { font-size:var(--type-heading); }.project { margin-bottom:86px; }.project-discotheque { margin-bottom:24px; }.project-other > .other-copy:first-child { margin:var(--caption-gap) auto; }.phase-mark { aspect-ratio:1.6; }.merch-grid { width:77%; margin-top:48px; gap:16%; }.garment span,.garment figcaption { margin-top:10px; font-size:var(--type-label); }.phase-copy,.disco-copy,.other-copy { width:78%; margin:var(--caption-gap) auto; font-size:var(--type-description); }.disco-copy { line-height:1.1; }.disco-copy p { margin-bottom:5px; }.work-art.work-stream { width:100%; }.drawing { width:96%; }.bag { width:88%; }.logo-section { padding:26px 0 91px; }.logo-section .section-heading { margin-bottom:35px; }.logo-section .section-heading h2 { font-size:var(--type-label); }.logos { gap:28px; padding:0; }.logos img { width:42px; height:38px; max-height:none; }.about { padding-bottom:102px; }.about .section-heading { margin-bottom:31px; }.about-layout { min-height:0; padding-left:0; }.about-text { width:92%; max-width:none; font-size:var(--type-body); line-height:1.18; letter-spacing:-.3px; }.about-text p { margin:0; }.about-aside { position:relative; right:auto; bottom:auto; width:142px; min-height:0; margin:11px 4% 0 auto; }.guy { width:100%; margin:0; }.services { margin-top:45px; display:grid; grid-template-columns:1fr; row-gap:25px; }.services h3,.find-me h3 { margin-bottom:0; font-size:var(--type-heading); }.credits h3 { margin-bottom:0; font-size:var(--type-heading); }.services ul { font-size:var(--type-label); margin:0; }.availability { grid-column:auto; width:min(280px,100%); font-size:var(--type-caption); }.contact { min-height:80svh; padding:90px 0; }.contact h2 { font-size:21vw; }.email-wrap { margin:25px auto 20px; padding:7px 15px; font-size:12px; }.copy-status { top:35px; }.contact-phone { width:min(78vw,420px); margin:0 auto; }.find-me { width:100%; margin-top:83px; }.find-me h3 { margin-bottom:34px; }.find-me-row { grid-template-columns:1fr auto; align-items:center; gap:18px; }.find-links { gap:9px; }.find-links a { font-size:var(--type-label); }.find-socials { justify-content:flex-end; gap:16px; }.find-socials a,.find-socials svg { width:22px; height:22px; }.find-me p { margin:13px 0 0 auto; font-size:var(--type-caption); text-align:right; }.credits { width:100%; margin-top:43px; }.credits h3 { margin-bottom:12px; }.credits p { color:#fff; font-size:var(--type-label); } footer { width:91.6vw; grid-template-columns:1fr auto; row-gap:15px; font-size:7px; } footer>span { grid-column:1/-1; grid-row:2; } footer .wordmark { font-size:14px; }.socials { gap:10px; }.socials a,.socials svg { width:12px; height:12px; } }
@media (min-width:701px) and (max-width:1199px) { .site-nav { height:68px; padding:0 3vw; }.wordmark { font-size:20px; }.site-nav nav { gap:36px; font-size:14px; }.logo-section.section { width:94vw; }.logo-section { padding:72px 0 150px; }.logo-section .section-heading { margin-bottom:96px; }.logo-section .section-heading h2 { font-size:28px; }.logos { gap:64px; }.logos img { height:auto; }.logos img:nth-child(1) { width:130px; }.logos img:nth-child(2) { width:126px; }.logos img:nth-child(3) { width:110px; }.about.section,.contact.section { width:94vw; }.about-layout { grid-template-columns:minmax(0,1fr) 220px; column-gap:40px; padding:0 3% 0 7%; }.about-text { width:100%; max-width:none; }.services { margin-top:94px; row-gap:34px; }.services-title>span { font-size:13px; }.services h3 { font-size:28px; }.services ul { font-size:17px; }.services li::before { padding-right:11px; }.availability { width:min(680px,100%); font-size:15px; }.find-me { margin-top:132px; }.find-me h3,.credits h3 { font-size:32px; }.find-me h3 { margin-bottom:62px; }.find-links a { font-size:17px; }.find-socials { gap:48px; }.find-socials a,.find-socials svg { width:42px; height:42px; }.find-me p { font-size:13px; }.credits { margin-top:88px; }.credits p { font-size:16px; } footer { width:100%; padding:30px 3vw 34px; font-size:11px; } footer .wordmark { font-size:20px; }.socials { gap:22px; }.socials a,.socials svg { width:20px; height:20px; } }
@media (max-width:700px) { .logo-section.section { width:91.6vw; }.logo-section .section-heading { margin-bottom:48px; }.logo-section .section-heading h2 { font-size:18px; }.logos { gap:22px; }.logos img { height:auto; }.logos img:nth-child(1) { width:70px; }.logos img:nth-child(2) { width:68px; }.logos img:nth-child(3) { width:58px; }.about.section,.contact.section { width:91.6vw; }.about-layout { display:block; padding:0; }.services-title>span { font-size:10px; }.services ul { font-size:12px; }.services li::before { padding-right:8px; }.availability { font-size:10px; }.find-links a { font-size:12px; }.find-socials a,.find-socials svg { width:26px; height:26px; }.find-me p { font-size:10px; }.credits p { font-size:12px; } footer { width:100%; padding:24px 4vw 28px; font-size:8px; } footer .wordmark { font-size:16px; }.socials a,.socials svg { width:14px; height:14px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.trail-piece { animation:none; opacity:.55; }.reveal,.about-text { opacity:1; transform:none; transition:none; }.site-nav { transition:none; } }