/* Wurks case study pages: same night sky, grain and orange/violet light as the homepage, built to show the work off. */
:root{
  --paper:#050505; --card:#121212; --ink:#F4F1EE; --muted:#A19C97; --line:#242424;
  --accent:#E64A0C; --ember:#F27A45; --violet:#7C3AFF; --lilac:#9d6bff;
  --display:"Space Grotesk","Helvetica Neue",Arial,sans-serif; --serif:"Instrument Serif",Georgia,serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--display);overflow-x:clip}
body::after{content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}
.aura{position:fixed;inset:-10%;z-index:-1;pointer-events:none;filter:blur(80px);opacity:.9}
.aura i{position:absolute;border-radius:50%}
.aura i:nth-child(1){width:50vw;height:50vw;left:60%;top:-6%;background:radial-gradient(circle,color-mix(in srgb,var(--c1) 55%,transparent),transparent 66%);animation:d1 26s ease-in-out infinite alternate}
.aura i:nth-child(2){width:46vw;height:46vw;left:-10%;top:45%;background:radial-gradient(circle,rgba(230,74,12,.45),transparent 66%);animation:d2 30s ease-in-out infinite alternate}
.aura i:nth-child(3){width:36vw;height:36vw;left:70%;top:65%;background:radial-gradient(circle,rgba(124,58,255,.35),transparent 66%);animation:d1 34s ease-in-out infinite alternate-reverse}
@keyframes d1{to{transform:translate(-12vw,10vh) scale(1.15)}}
@keyframes d2{to{transform:translate(14vw,-8vh) scale(.9)}}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.label{font:600 12px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}
em.s{font-family:var(--serif);font-style:italic;font-weight:400;background:linear-gradient(100deg,var(--ember),var(--accent) 45%,var(--lilac));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}

header.top{position:sticky;top:0;z-index:50;background:rgba(5,5,5,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
header.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:14px}
header.top img{height:32px;width:auto}
header.top nav{display:flex;gap:24px;font-weight:500;font-size:15px;color:var(--muted)}
header.top nav a{text-decoration:none}
header.top nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:99px;font:600 15px/1 var(--display);text-decoration:none;border:0;cursor:pointer;background:linear-gradient(180deg,#EE5A1C,#D24206);color:#0A0A0A;box-shadow:0 10px 30px -10px rgba(230,74,12,.8)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
@media (max-width:640px){header.top nav a:not(:last-child){display:none}}

/* hero */
.c-hero{padding-block:70px 30px}
.c-hero .crumbs{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.c-hero .crumbs a{color:var(--muted);text-decoration:none;font:500 13px var(--mono)}
.c-hero .crumbs a:hover{color:var(--ink)}
.kind{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border-radius:99px;border:1px solid rgba(242,122,69,.45);color:var(--ember)}
.kind.concept{border-color:rgba(157,107,255,.5);color:#b79bff}
.c-hero h1{margin:22px 0 0;font:500 clamp(64px,11vw,176px)/.86 var(--display);letter-spacing:-.06em}
.c-hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.c-hero h1 .ln > span{display:inline-block;transform:translateY(105%);animation:rise 1s cubic-bezier(.2,.8,.2,1) forwards}
.c-hero h1 .ln:nth-child(2) > span{animation-delay:.12s}
@keyframes rise{to{transform:none}}
.c-hero .sum{max-width:44ch;font-size:22px;line-height:1.45;color:#d9d4cf;margin:28px 0 0}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;border-block:1px solid var(--line)}
.facts div{padding:18px 18px 18px 0}
.facts div + div{padding-left:18px;border-left:1px solid var(--line)}
.facts b{display:block;font:500 17px/1.3 var(--display);margin-top:6px}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr}.facts div:nth-child(3){border-left:0;padding-left:0}.facts div:nth-child(n+3){border-top:1px solid var(--line)}}

/* showcase stage */
.stage{position:relative;margin-top:50px;border-radius:40px;padding:7% 7% 0;overflow:hidden;isolation:isolate;background:radial-gradient(70% 90% at 50% 110%,var(--c1),transparent 70%),radial-gradient(50% 60% at 90% 0%,rgba(124,58,255,.35),transparent 70%),#0d0d0d;border:1px solid rgba(255,255,255,.07)}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(80% 80% at 50% 30%,#000,transparent)}
.stage .desk{border-radius:18px 18px 0 0;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-bottom:0;background:#111;padding-top:30px;position:relative;box-shadow:0 -30px 80px -30px rgba(0,0,0,.8);transform:perspective(1600px) rotateX(calc(var(--t,1) * 14deg)) translateY(calc(var(--t,1) * 30px));transform-origin:bottom center}
.stage .desk::before{content:"";position:absolute;top:11px;left:14px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:15px 0 0 #3a3a3a,30px 0 0 #3a3a3a}
.stage .desk img{width:100%;height:auto}
.stage .phone{position:absolute;right:5%;bottom:-6%;width:21%;border-radius:30px;overflow:hidden;border:6px solid #161616;outline:1px solid rgba(255,255,255,.14);background:#000;box-shadow:0 40px 80px -20px rgba(0,0,0,.9);transform:translateY(calc(var(--t,1) * 80px)) rotate(calc(4deg - var(--t,1) * 4deg))}
.stage .phone img{width:100%;height:auto;aspect-ratio:390/760;object-fit:cover;object-position:top}
@media (max-width:760px){.stage{border-radius:24px;padding:8% 6% 0}.stage .phone{width:30%;border-width:4px;border-radius:18px}}

/* story */
section{padding-block:110px 10px}
.story{display:grid;grid-template-columns:1fr 1.3fr;gap:60px}
.story h2,.sec-h{margin:12px 0 0;font:500 clamp(36px,4.6vw,60px)/1 var(--display);letter-spacing:-.04em}
.story .cols{display:grid;gap:30px}
.story .cols p{margin:8px 0 0;color:#d4cfc9;font-size:19px}
@media (max-width:860px){.story{grid-template-columns:1fr;gap:20px}}

/* highlights */
.hl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.hl article{position:relative;padding:30px;border-radius:28px;background:rgba(14,14,14,.62);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.07);min-height:230px;display:grid;align-content:space-between;gap:30px;overflow:hidden}
.hl article::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c1) 45%,transparent),transparent 70%)}
.hl .n{font:400 italic 56px/1 var(--serif);color:var(--ember)}
.hl h3{margin:0 0 6px;font:500 24px/1.1 var(--display);letter-spacing:-.02em}
.hl p{margin:0;color:var(--muted);font-size:16px}
@media (max-width:900px){.hl{grid-template-columns:1fr}}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:40px}
.shot{position:relative;margin:0;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#111;cursor:zoom-in}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{position:absolute;left:14px;bottom:14px;right:14px;display:flex;justify-content:space-between;gap:10px;align-items:center;font:500 12.5px var(--mono);color:var(--ink);padding:9px 12px;border-radius:12px;background:rgba(5,5,5,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.g-a{grid-column:span 4;aspect-ratio:16/10}.g-b{grid-column:span 2;grid-row:span 2}.g-c{grid-column:span 2;aspect-ratio:16/10}.g-d{grid-column:span 2;aspect-ratio:16/10}
.g-e{grid-column:span 6;aspect-ratio:16/7}
@media (max-width:860px){.gallery{grid-template-columns:1fr}.g-a,.g-b,.g-c,.g-d,.g-e{grid-column:auto;grid-row:auto;aspect-ratio:16/10}.g-b{aspect-ratio:9/14}}
dialog.zoom{max-width:min(1300px,94vw);padding:0;border:0;border-radius:18px;background:#000;overflow:hidden}
dialog.zoom::backdrop{background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
dialog.zoom img{max-height:88vh;width:auto;margin:0 auto}
dialog.zoom button{position:absolute;top:12px;right:12px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:22px;cursor:pointer}

/* design system */
.sys{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-top:40px}
.panel{padding:30px;border-radius:28px;background:rgba(14,14,14,.62);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.07)}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px;margin-top:18px}
.sw{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.sw i{display:block;aspect-ratio:1}
.sw span{display:block;padding:8px 10px;font:500 11.5px var(--mono);color:var(--muted);background:#0e0e0e}
.type-spec{margin-top:18px;display:grid;gap:14px}
.type-spec div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px}
.type-spec b{font-size:30px;font-weight:500;line-height:1}
.type-spec span{font:500 12px var(--mono);color:var(--muted);text-align:right}
@media (max-width:860px){.sys{grid-template-columns:1fr}}

/* end: quiet live link + next project */
.live-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:80px;padding-block:20px;border-block:1px solid var(--line)}
.live-row p{margin:0;color:var(--muted);font-size:15px}
.quiet{font:500 13px var(--mono);color:var(--muted);text-decoration:none;padding:9px 14px;border-radius:99px;border:1px solid var(--line);transition:color .2s,border-color .2s}
.quiet:hover{color:var(--ink);border-color:#444}
.next{display:block;text-decoration:none;padding-block:90px 70px}
.next .label{margin-bottom:14px}
.next b{display:block;font:500 clamp(56px,10vw,160px)/.9 var(--display);letter-spacing:-.06em;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.next b span{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ember)}
.next:hover b{transform:translateX(18px)}
footer.foot{border-top:1px solid var(--line)}
footer.foot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:28px;color:var(--muted);font-size:14px}

/* work index */
.w-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
.w-card{text-decoration:none;display:grid;gap:14px}
.w-card .frame{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:16/11;border:1px solid rgba(255,255,255,.08);background:radial-gradient(70% 90% at 50% 120%,var(--c1),transparent 70%),#0d0d0d;padding:8% 8% 0}
.w-card .frame img{border-radius:12px 12px 0 0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.w-card:hover .frame img{transform:translateY(-10px) scale(1.02)}
.w-card .row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.w-card h3{margin:0;font:500 30px/1 var(--display);letter-spacing:-.03em}
.w-card p{margin:0;color:var(--muted)}
@media (max-width:860px){.w-grid{grid-template-columns:1fr}}

.js .rv{opacity:0;transform:translateY(30px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.c-hero h1 .ln > span{transform:none}.js .rv{opacity:1;transform:none}.stage .desk,.stage .phone{transform:none}}