/* Shared by index.html and portfolio.html: tokens, base, buttons, nav, footer */
:root{
  --bg:#0A0A0A; --bg2:#111111; --bg3:#181818; --fg:#F2F0EC; --fg2:#A8A49D; --fg3:#8A857E;
  --line:#262626; --hair:#1C1C1C; --rec:#6E5BFF; --onRec:#FFFFFF; --recHi:#A79CFF; --paper:#F5F5F5;
  --fd:'Big Shoulders Display','Arial Narrow',Impact,sans-serif; --f:'Inter Tight','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1); --gap:clamp(80px,10vw,160px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f);font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--rec);color:var(--onRec)}
:focus-visible{outline:2px solid var(--rec);outline-offset:4px}
.wrap{max-width:1440px;margin:0 auto;padding-inline:clamp(20px,4vw,64px)}
.mega{font-family:var(--fd);font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.005em}
.disp{font-family:var(--f);font-weight:700;letter-spacing:-.035em;line-height:1.02}
.light{background:var(--paper);color:#0A0A0A;--fg:#0A0A0A;--fg2:#4F4B45;--fg3:#6B665F;--line:#DCD8D1;--recT:#4A38D9}
.light .lede{color:var(--fg2)}
.lede{color:var(--fg2);font-size:clamp(15px,1.3vw,18px);line-height:1.6;max-width:46ch}
.sec{padding-block:var(--gap)}
.r{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.r.in{opacity:1;transform:none}
body::after{content:"";position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.05;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 28px;border-radius:999px;font-weight:700;font-size:14px;letter-spacing:.01em;
 transition:transform .45s var(--ease),background-color .3s,color .3s,border-color .3s;cursor:pointer;border:1px solid transparent}
.btn:active{transform:scale(.97)}
.btnRec{background:var(--rec);color:var(--onRec)}
.btnRec:hover{background:#8172FF}
.btnGhost{border-color:rgba(242,240,236,.3);color:var(--fg);background:rgba(10,10,10,.3);backdrop-filter:blur(10px)}
.btnGhost:hover{border-color:var(--fg);background:rgba(242,240,236,.08)}
.arw{transition:transform .45s var(--ease)}
.btn:hover .arw,.more:hover .arw{transform:translateX(4px)}

/* nav */
.nav{position:fixed;z-index:120;top:16px;left:16px;right:16px;display:flex;align-items:center;gap:10px;transition:top .5s var(--ease)}
.nav.s{top:10px}
.pill{height:48px;display:flex;align-items:center;border-radius:999px;background:rgba(18,18,18,.62);backdrop-filter:blur(18px) saturate(1.3);
 border:1px solid rgba(255,255,255,.1)}
.brand{padding:0 22px}
.brand img{height:14px;width:auto;filter:invert(1)}
.links{margin:0 auto;padding:0 6px;gap:2px}
.links a{font-size:13px;color:var(--fg2);padding:10px 15px;border-radius:999px;transition:color .3s,background .3s}
.links a:hover{color:var(--fg);background:rgba(255,255,255,.07)}
.nav .btnRec{height:48px;padding:0 22px;font-size:13px;box-shadow:0 0 0 1px rgba(10,10,10,.35),0 8px 24px -10px rgba(0,0,0,.5)}
.menu{display:none;width:48px;flex:none;justify-content:center;flex-direction:column;align-items:center;gap:5px;cursor:pointer}
.menu i{display:block;width:16px;height:1.5px;background:var(--fg);transition:transform .5s var(--ease)}
.menu.x i:first-child{transform:translateY(3.25px) rotate(45deg)}.menu.x i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:115;background:rgba(10,10,10,.96);display:flex;flex-direction:column;justify-content:center;padding:0 28px;
 opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.mnav.x{opacity:1;pointer-events:auto}
.mnav a{font-weight:700;letter-spacing:-.035em;font-size:clamp(34px,9vw,52px);line-height:1.15}
.mnav a:hover{color:var(--rec)}
@media(max-width:1020px){.links{display:none}.menu{display:flex}.nav .btnRec{margin-left:auto}}

/* footer: the wordmark is sized from the footer's own width (the word is 4.22em wide), so it always runs edge to edge */
footer{padding:clamp(48px,6vw,90px) 0 30px;border-top:1px solid var(--line);container-type:inline-size}
.fBig{font-family:var(--fd);font-weight:900;text-transform:uppercase;font-size:clamp(64px,17vw,300px);font-size:23.6cqw;white-space:nowrap;overflow-x:clip;line-height:.8;color:#1A1A1A;letter-spacing:-.01em;user-select:none}
.fBot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:30px;font-size:13px;color:var(--fg3)}
.fBot nav{display:flex;gap:22px;flex-wrap:wrap}
.fBot a:hover{color:var(--fg)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.r{opacity:1!important;transform:none!important;transition:none!important}}