@font-face{font-family:"Arimo";src:url(fonts/arimo-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Arimo";src:url(fonts/arimo-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cousine";src:url(fonts/cousine-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cousine";src:url(fonts/cousine-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#f5f5f3; --card:#ebebe8; --muted:#d9d9d5; --ink:#0d0d0d; --dim:#666660; --on-ink:#f5f5f3;
  --red:#ff0000; --blue:#0000ff; --green:#00cc00; --yellow:#ffe600;
  --on-red:#f5f5f3; --on-blue:#f5f5f3; --on-green:#0d0d0d; --on-yellow:#0d0d0d;
  --b:4px; --pad:clamp(16px,3.4vw,48px);
  --display:"Arimo","Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --mono:"Cousine","Liberation Mono","Courier New",ui-monospace,monospace;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0e0e0e; --card:#181818; --muted:#2a2a2a; --ink:#f5f5f3; --dim:#a3a39c; --on-ink:#0d0d0d;
  --red:#ff2b2b; --blue:#3a4bff; --green:#1ee65a; --yellow:#ffe600;
  --on-red:#0d0d0d; --on-blue:#f5f5f3; --on-green:#0d0d0d;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lock{overflow:hidden}
main{overflow-x:clip}
::selection{background:var(--red);color:var(--on-red)}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,canvas{display:block;max-width:100%}
:focus-visible{outline:var(--b) solid var(--blue);outline-offset:3px}
:root[data-theme="dark"] :focus-visible{outline-color:var(--green)}
.disp{font-family:var(--display);font-weight:400;letter-spacing:-.03em;text-transform:uppercase}

/* ---------- brutal primitives ---------- */
.brutal{transition:transform .1s,box-shadow .1s}
.brutal:hover{transform:translate(-4px,-4px);box-shadow:4px 4px 0 var(--ink)}
.brutal:active{transform:none;box-shadow:none}
.sticker{display:inline-block;padding:.5rem 1rem;border:2px solid var(--ink);background:var(--red);color:var(--on-red);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.3}
.sticker.g{background:var(--green);color:var(--on-green)}
.sticker.y{background:var(--yellow);color:var(--on-yellow)}
.scribble{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='20' viewBox='0 0 200 20'%3E%3Cpath d='M0,10 Q25,0 50,10 T100,10 T150,10 T200,10' stroke='%23ff0000' stroke-width='3' fill='none'/%3E%3C/svg%3E");background-repeat:repeat-x;background-position:bottom;background-size:100px 10px;padding-bottom:12px}
:root[data-theme="dark"] .scribble{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='20' viewBox='0 0 200 20'%3E%3Cpath d='M0,10 Q25,0 50,10 T100,10 T150,10 T200,10' stroke='%23ff2b2b' stroke-width='3' fill='none'/%3E%3C/svg%3E")}
.tag-label{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

/* ---------- reveal / entrance ---------- */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.js .reveal.in{opacity:1;transform:none}
@keyframes rotateIn{from{opacity:0;transform:rotate(-12deg) translateY(90px)}to{opacity:1;transform:none}}
@keyframes slideUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes eq{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}

/* ---------- fixed corner UI ---------- */
.logo{position:fixed;top:14px;left:16px;z-index:60;display:flex;align-items:center;white-space:pre;font-family:var(--display);font-size:2.3rem;line-height:1;letter-spacing:-.04em;text-decoration:none;color:#fff;mix-blend-mode:difference}
.logo .x{display:inline-block;max-width:0;overflow:hidden;transition:max-width .45s cubic-bezier(.16,1,.3,1)}
.logo:hover .x1,.logo:focus-visible .x1{max-width:3.2em}
.logo:hover .x2,.logo:focus-visible .x2{max-width:2.2em}
.ctl{position:fixed;top:12px;right:14px;z-index:60;display:flex;gap:8px}
.ctl button{background:var(--bg);border:var(--b) solid var(--ink);height:48px;padding:0 14px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.ctl .theme{width:48px;justify-content:center;padding:0;font-size:1.15rem;letter-spacing:0}
.ctl .snd[aria-pressed="true"]{background:var(--green);color:var(--on-green)}
.eqi{display:flex;align-items:flex-end;gap:2px;height:16px}
.eqi i{display:block;width:3px;height:100%;background:currentColor;transform:scaleY(.25);transform-origin:bottom}
.snd[aria-pressed="true"] .eqi i{animation:eq .5s ease-in-out infinite}
.snd[aria-pressed="true"] .eqi i:nth-child(2){animation-delay:.12s}
.snd[aria-pressed="true"] .eqi i:nth-child(3){animation-delay:.24s}
.snd[aria-pressed="true"] .eqi i:nth-child(4){animation-delay:.06s}
.side{position:fixed;left:14px;top:50%;z-index:30;display:none;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);white-space:nowrap;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
@media(min-width:1200px){.side{display:block}}
.fab{position:fixed;right:18px;bottom:20px;z-index:50;rotate:-3deg;font-family:var(--display);font-size:1.4rem;letter-spacing:-.02em;padding:.4rem 1.1rem;border-width:var(--b);text-decoration:none;text-transform:uppercase;transition:rotate .15s,translate .15s,opacity .25s,background .15s}
.fab:hover{rotate:0deg;translate:-3px -3px;background:var(--red);color:var(--on-red)}
.fab.off{opacity:0;pointer-events:none}

.menu{position:fixed;inset:0;z-index:55;background:var(--red);color:var(--on-red);overflow:hidden;display:none}
.menu.open{display:block}
.menu a{position:absolute;font-family:var(--display);text-transform:uppercase;letter-spacing:-.05em;line-height:.85;text-decoration:none;transition:color .15s}
.menu a:hover{color:var(--ink)}
.menu .m1{top:15%;left:8%;font-size:clamp(4.5rem,17vw,17rem);rotate:-6deg}
.menu .m2{top:40%;right:8%;font-size:clamp(4rem,13vw,13rem);rotate:4deg}
.menu .m3{bottom:9%;left:5%;font-size:clamp(4.5rem,16vw,16rem);rotate:-3deg}
.menu .deco1{position:absolute;bottom:38%;right:14%;width:96px;height:96px;border:var(--b) solid var(--on-red);transform:rotate(12deg)}
.menu .deco2{position:absolute;top:26%;right:30%;width:64px;height:64px;background:var(--ink);transform:rotate(45deg)}
.menu .deco3{position:absolute;top:62%;left:4%;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6;transform:rotate(90deg);transform-origin:left top}
@media(max-width:700px){.menu .m1{top:14%;left:6%}.menu .m2{top:38%;right:6%}.menu .m3{bottom:12%;left:6%}.menu .deco2{right:12%}}

/* ---------- hero ---------- */
#hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;position:relative;overflow:hidden}
.hero-top{padding:clamp(80px,11vh,120px) var(--pad) 0;position:relative}
h1.mega{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(3.2rem,18.4vw,20rem);line-height:.8;letter-spacing:-.045em;white-space:nowrap}
h1.mega span{display:block;animation:rotateIn .8s cubic-bezier(.16,1,.3,1) both}
h1.mega .l1{font-size:.76em;color:var(--ink);margin-left:-.6%;letter-spacing:-.04em}
h1.mega .l2{color:var(--red);animation-delay:.12s;margin-left:6%}
h1.mega .l3{color:var(--blue);animation-delay:.24s;margin-left:-.5%}
.hero-top .s-bcn{position:absolute;top:calc(clamp(80px,11vh,120px) + 12vw);right:5%;z-index:3;font-size:.85rem;padding:.6rem 1.1rem;animation:slideUp .6s .5s both cubic-bezier(.16,1,.3,1)}
.hero-row{margin-top:clamp(20px,3vh,34px);padding:0 var(--pad) 0 calc(var(--pad) + 8%)}
.hero-mid{max-width:56ch;font-size:clamp(.9rem,1.15vw,1.05rem);text-transform:uppercase;letter-spacing:.02em}
.hero-mid b{background:var(--ink);color:var(--on-ink);padding:0 .35em;font-weight:400}
#bars{width:100%;height:0;flex:1 1 0;min-height:84px;max-height:220px;margin-top:clamp(14px,3vh,28px);cursor:crosshair;touch-action:pan-y}
.hint{padding:6px var(--pad);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:flex;justify-content:space-between;gap:12px}
.infobar{border-top:var(--b) solid var(--ink);background:var(--bg);padding:16px var(--pad);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.infobar p{font-size:.85rem;text-transform:uppercase}
.infobar p span{color:var(--dim)}
.infobar .who{display:flex;gap:clamp(16px,3vw,40px);flex-wrap:wrap}
.cta{border:var(--b) solid var(--ink);background:var(--red);color:var(--on-red);padding:.75rem 2rem;font-family:var(--display);font-size:1.6rem;letter-spacing:-.02em;text-transform:uppercase;line-height:1.1;text-decoration:none;display:inline-block}

/* marquee */
.marquee{background:var(--ink);color:var(--on-ink);border-bottom:var(--b) solid var(--ink);overflow:hidden;white-space:nowrap}
.marquee .track{display:flex;width:max-content;animation:marquee 30s linear infinite}
.marquee span{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.4rem,2.6vw,2.2rem);padding:.5rem 0;letter-spacing:-.02em}
.marquee span::after{content:"✱";color:var(--red);margin:0 1.4rem}
.marquee span:nth-child(3n+1)::after{color:var(--green)}
.marquee span:nth-child(3n+2)::after{color:var(--yellow)}

/* ---------- sections ---------- */
section.s{padding:clamp(48px,7vw,96px) var(--pad);position:relative;overflow:hidden}
.s-head{display:flex;flex-direction:column;gap:2rem;margin-bottom:clamp(28px,4vw,52px)}
@media(min-width:1024px){.s-head{flex-direction:row;align-items:flex-end;justify-content:space-between}}
h2.huge{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(3rem,11.5vw,11.5rem);line-height:.86;letter-spacing:-.05em}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{border:var(--b) solid var(--ink);background:var(--bg);color:var(--ink);padding:.5rem 1rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.filters button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:var(--on-red)}
.filters button i{font-style:normal;opacity:.55;margin-left:.4em}

#work{background:var(--card);border-top:var(--b) solid var(--ink)}
.grid{display:grid;grid-template-columns:1fr;gap:18px;grid-auto-flow:dense}
@media(min-width:760px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:1280px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{border:var(--b) solid var(--ink);background:var(--bg);transition:transform .1s,box-shadow .1s,rotate .1s;position:relative;rotate:var(--rot,0deg)}
.card[hidden]{display:none}
.card:not(.open):hover{transform:translate(-4px,-4px);rotate:0deg;box-shadow:4px 4px 0 var(--ink)}
.card.open{grid-column:1/-1;rotate:0deg}
.card .head{display:block;width:100%;text-align:left;padding:20px 20px 22px}
.card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px}
.card .cl{font-size:.72rem;text-transform:uppercase;color:var(--dim);letter-spacing:.04em;line-height:1.4;max-width:70%}
.card .yr{font-size:.72rem;color:var(--dim);white-space:nowrap}
.card h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.8rem,2.7vw,2.8rem);line-height:.98;letter-spacing:-.035em;display:inline-block;margin-bottom:.5rem}
.card .role{font-size:.72rem;text-transform:uppercase;color:var(--red);letter-spacing:.03em}
:root[data-theme="dark"] .card .role{color:var(--green)}
.card .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{display:inline-block;border:2px solid var(--ink);padding:.1rem .5rem;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.chip.f{background:var(--yellow);color:var(--on-yellow)}
.chip.a{background:var(--green);color:var(--on-green)}
.card .thumb{display:none}
.card.feat .thumb{display:block;border-bottom:var(--b) solid var(--ink);aspect-ratio:16/9;position:relative;background:var(--ink)}
.card.feat .thumb canvas{width:100%;height:100%}
.card.open .thumb{display:none}
.card .more{display:none}
.card.open .more{display:grid;grid-template-columns:1fr;border-top:var(--b) solid var(--ink)}
@media(min-width:900px){.card.open .more{grid-template-columns:5fr 4fr}}
.stage{background:var(--muted);padding:20px}
.player{position:relative;aspect-ratio:16/9;background:var(--ink);border:var(--b) solid var(--ink);overflow:hidden}
.player canvas{width:100%;height:100%}
.player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player iframe,.player video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.player .play{position:absolute;left:12px;bottom:12px;background:var(--red);color:var(--on-red);border:var(--b) solid var(--ink);width:64px;height:64px;font-size:1.6rem;display:flex;align-items:center;justify-content:center;transition:transform .1s,box-shadow .1s}
.player .play:hover{transform:translate(-4px,-4px);box-shadow:4px 4px 0 var(--ink)}
.player.playing .play,.player.playing .ptag{display:none}
.ptag{position:absolute;right:12px;top:12px;background:var(--yellow);color:var(--on-yellow);border:2px solid var(--ink);padding:.25rem .6rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.detail{padding:22px 22px 26px;border-top:var(--b) solid var(--ink);display:flex;flex-direction:column;gap:12px}
@media(min-width:900px){.detail{border-top:0;border-left:var(--b) solid var(--ink)}}
.detail p{font-size:.88rem}
.detail .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.detail .rl b{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:400}
.detail .award{display:inline-block;align-self:flex-start;background:var(--green);color:var(--on-green);border:2px solid var(--ink);padding:.3rem .7rem;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em}
.detail ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.detail ul a{display:inline-block;border:2px solid var(--ink);padding:.3rem .7rem;font-size:.75rem;text-transform:uppercase;text-decoration:none;transition:.1s}
.detail ul a::after{content:" ↗"}
.detail ul a:hover{background:var(--ink);color:var(--bg)}
.close-card{align-self:flex-start;margin-top:auto;border:2px solid var(--ink);padding:.25rem .8rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.close-card:hover{background:var(--ink);color:var(--bg)}
.empty{display:none;padding:40px 0;font-family:var(--display);font-size:3rem;text-transform:uppercase}
.tint.cr{background:var(--red);color:var(--on-red)}
.tint.cb{background:var(--blue);color:var(--on-blue)}
.tint.cg{background:var(--green);color:var(--on-green)}
.tint.cy{background:var(--yellow);color:var(--on-yellow)}
.tint .cl,.tint .yr,.tint .role,.tint .detail .k,.tint .detail .rl b{color:inherit;opacity:.85}
.tint h3{background-image:none;padding-bottom:0;text-decoration:underline wavy currentColor;text-decoration-thickness:3px;text-underline-offset:9px}
.tint .chip{border-color:var(--ink);color:var(--ink);background:var(--bg)}
.tint.open .detail .close-card,.tint.open .detail ul a{border-color:currentColor}

/* ---------- about ---------- */
#about{background:var(--blue);color:var(--on-blue);border-top:var(--b) solid var(--ink)}
#about .tag-label{color:inherit;opacity:.65}
#about .ghost{position:absolute;top:2%;right:3%;font-family:var(--display);font-size:32vw;line-height:.8;letter-spacing:-.06em;color:rgba(255,255,255,.07);pointer-events:none}
.about-grid{display:grid;gap:clamp(32px,6vw,96px);position:relative;z-index:1}
@media(min-width:1024px){.about-grid{grid-template-columns:1.15fr .85fr}.about-grid>div:last-child{translate:0 -150px}}
.bio p.manifesto{font-family:var(--display);text-transform:uppercase;font-size:clamp(2rem,4.4vw,4.4rem);line-height:.97;letter-spacing:-.04em;margin-bottom:2rem;max-width:none;opacity:1}
.manifesto mark{background:var(--ink);color:var(--on-ink);padding:0 .12em;margin:0 .04em}
:root[data-theme="dark"] .manifesto mark{background:var(--bg);color:var(--ink)}
.bio p{font-size:.92rem;line-height:1.75;opacity:.92;margin-bottom:1rem;max-width:62ch}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:34px}
.stat{border:var(--b) solid var(--on-blue);padding:16px;text-align:center}
.stat:nth-child(1){background:var(--red);color:var(--on-red)}
.stat:nth-child(2){background:var(--green);color:var(--on-green)}
.stat b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(3rem,5vw,4.6rem);line-height:1;letter-spacing:-.05em}
.stat span{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.stamps{display:flex;flex-wrap:wrap;gap:12px 18px;margin:8px 0 34px}
.stamp{border:var(--b) solid var(--on-blue);padding:.7rem 1.2rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;line-height:1.35}
.stamp b{display:block;font-family:var(--display);font-weight:400;font-size:1.6rem;letter-spacing:-.03em;line-height:1}
.stamp small{opacity:.75;font-size:.66rem;letter-spacing:.12em}
.stamp:nth-child(odd){rotate:-2.5deg}.stamp:nth-child(even){rotate:2deg}
.clients{display:flex;flex-wrap:wrap;gap:8px}
.clients span{border:2px solid rgba(245,245,243,.45);padding:.15rem .7rem;font-size:.82rem;text-transform:uppercase;transition:.12s}
.clients span:hover{background:var(--on-blue);color:var(--blue);border-color:var(--on-blue)}
.photo{border:var(--b) solid var(--on-blue);aspect-ratio:4/5;max-width:360px;position:relative;background:var(--red);color:var(--on-red);display:flex;align-items:center;justify-content:center;rotate:2deg;margin-bottom:34px;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .ph{font-family:var(--display);font-size:8rem;line-height:1;letter-spacing:-.06em}

/* ---------- contact ---------- */
#contact{background:var(--bg);border-top:var(--b) solid var(--ink)}
#contact .bgtext{position:absolute;right:-1%;bottom:-6%;font-family:var(--display);font-size:26vw;line-height:.8;letter-spacing:-.06em;color:var(--muted);opacity:.6;pointer-events:none}
.contact-in{position:relative;z-index:1;display:grid;gap:clamp(28px,5vw,80px)}
@media(min-width:1024px){.contact-in{grid-template-columns:1.2fr .8fr}}
#contact h2 span{display:inline-block;margin-left:12%}
.lead{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.08;letter-spacing:-.03em;margin:1.8rem 0}
.mail{display:inline-block;border:var(--b) solid var(--ink);background:var(--green);color:var(--on-green);padding:.9rem 1.5rem;font-family:var(--display);font-size:clamp(1.2rem,2.4vw,2rem);letter-spacing:-.02em;line-height:1.1;text-decoration:none;word-break:break-all;text-transform:uppercase}
.links-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.links-row a{border:2px solid var(--ink);padding:.5rem 1rem;font-size:.82rem;text-transform:uppercase;text-decoration:none;transition:.1s}
.links-row a::after{content:" ↗"}
.links-row a:hover{background:var(--ink);color:var(--bg)}
.based{border-left:var(--b) solid var(--red);padding-left:16px;color:var(--dim);font-size:.85rem;margin-top:26px}
footer{background:var(--ink);color:var(--on-ink);border-top:var(--b) solid var(--red);padding:22px var(--pad);display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
footer .disp{font-size:1.9rem;line-height:1}
footer p{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
footer .sticker{rotate:4deg}

@media(min-width:760px){.card:nth-child(odd):not(.open){--rot:-.5deg}.card:nth-child(even):not(.open){--rot:.5deg}}
@media(max-width:700px){
  body{font-size:14px}
  .logo{font-size:1.9rem;top:12px;left:12px}
  .ctl{top:10px;right:10px;gap:6px}
  .ctl button{height:42px;padding:0 10px;font-size:.7rem}
  .ctl .theme{width:42px}
  .hero-top .s-bcn{top:calc(clamp(80px,11vh,120px) + 14.5vw);right:4%;font-size:.65rem;padding:.35rem .7rem}
  .hero-row{padding-left:var(--pad)}
  .cta{width:100%;text-align:center}
  .hint span:last-child{display:none}
  .card .head{padding:16px}
  .stage{padding:12px}
  .fab{font-size:1.1rem;right:10px;bottom:12px}
  #contact h2 span{margin-left:6%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .js .reveal{opacity:1;transform:none}
}

.theme .ti{display:block;width:18px;height:18px;border:3px solid currentColor;border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}