/* =============================================================
   I-BOMBES PRODUCTION — "Blueprint and Ember"
   Design system per spec Part 5. Components consume tokens only.
   ============================================================= */

/* ---------- fonts (self-hosted variable woff2, PERF-4) ---------- */
@font-face{font-family:"Space Grotesk";src:url(assets/fonts/space-grotesk-var.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(assets/fonts/jetbrains-mono-var.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

/* ---------- 5.2 colour tokens ---------- */
:root{
  --bg-0:#0A0C10; --bg-1:#0E1218; --surface:#151B24; --surface-2:#1B2230;
  --border:#242E3B; --border-hi:rgba(255,255,255,.10);
  --text-hi:#F2F5F8; --text-mid:#B4BFCB; --text-low:#7E8A97;
  --accent:#FFAD33; --accent-hot:#FF7A29; --accent-ink:#1A1206;
  --glow:rgba(255,150,50,.22); --focus:#FFC15E;
  --edge-ok:#41D18F; --edge-no:#FF5D5D;

  /* 5.4 space, radius, elevation */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --r-chip:10px; --r-card:16px; --r-panel:24px; --r-pill:999px;
  --e1:0 1px 2px rgba(0,0,0,.45);
  --e2:0 12px 32px -12px rgba(0,0,0,.55);
  --e-hover:0 0 0 1px rgba(255,173,51,.28), 0 12px 40px -10px var(--glow);

  /* 5.7 motion */
  --t-micro:140ms; --t-hover:240ms; --t-reveal:480ms; --t-hero:750ms;
  --ease-out:cubic-bezier(.22,1,.36,1);

  --rail-w:76px; --rail-w-open:264px; --topbar-h:60px;
  --gradient:linear-gradient(120deg,#FFC96B,#FF7A29); /* COL-3, the only gradient */
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth} /* NAV-2, dropped by MOT-1 */
[hidden]{display:none!important}
body{
  min-height:100svh; background:var(--bg-0); color:var(--text-mid);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1rem; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,canvas{display:block; max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}
ul,ol{list-style:none; padding:0}
h1,h2,h3{font-family:"Space Grotesk",Inter,system-ui,sans-serif; color:var(--text-hi); font-weight:700; line-height:1.1; text-wrap:balance}
p{text-wrap:pretty}

/* blueprint grid — COL-4, one fixed cheap layer */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(148,170,200,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,170,200,.05) 1px,transparent 1px);
  background-size:32px 32px;
}

/* ---------- typography scale (5.3) ---------- */
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500}
.overline{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-weight:500;
  font-size:.75rem; text-transform:uppercase; letter-spacing:.14em; color:var(--accent);
  display:flex; align-items:center; gap:var(--s3);
}
.tick{flex:0 0 auto; width:22px; height:2px; border-radius:2px; background:var(--gradient)}
.grad{background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent}
.dot{color:var(--accent); padding:0 .15em}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- layout ---------- */
.container{width:100%; max-width:1200px; margin-inline:auto; padding-inline:var(--s5)}
.section{
  position:relative; z-index:1;
  padding-block:clamp(72px,9vw,128px);
  scroll-margin-top:calc(var(--topbar-h) + 20px);
}
.section--alt{background:var(--bg-1)}
#home{scroll-margin-top:0}

/* PERF-5 — skip offscreen layout work. The placeholder heights are measured,
   not guessed, so anchor jumps land correctly before a section has rendered. */
#skills,#work,#communities,#games,#commissions,#contact,.footer{content-visibility:auto}
#skills     {contain-intrinsic-size:auto 1250px}
#work       {contain-intrinsic-size:auto 1780px}
#communities{contain-intrinsic-size:auto 1170px}
#games      {contain-intrinsic-size:auto 1200px}
#commissions{contain-intrinsic-size:auto 4320px}
#contact    {contain-intrinsic-size:auto 1350px}
.footer     {contain-intrinsic-size:auto 520px}
@media (min-width:768px){
  #skills{contain-intrinsic-size:auto 930px}      #work{contain-intrinsic-size:auto 1550px}
  #communities{contain-intrinsic-size:auto 1040px} #games{contain-intrinsic-size:auto 1560px}
  #commissions{contain-intrinsic-size:auto 2980px} #contact{contain-intrinsic-size:auto 1120px}
  .footer{contain-intrinsic-size:auto 400px}
}
@media (min-width:1024px){
  #skills{contain-intrinsic-size:auto 800px}      #work{contain-intrinsic-size:auto 1300px}
  #communities{contain-intrinsic-size:auto 1130px} #games{contain-intrinsic-size:auto 1020px}
  #commissions{contain-intrinsic-size:auto 2620px} #contact{contain-intrinsic-size:auto 920px}
  .footer{contain-intrinsic-size:auto 360px}
}

/* section radial glows — COL-4, one per major section, 10–14% */
.hero::after,#work::before,#contact::before{
  content:""; position:absolute; pointer-events:none; z-index:0;
  width:min(900px,110%); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(255,150,50,.13),transparent 68%);
}
.hero::after{top:-28%; right:-16%}
#work{overflow:hidden}
#work::before{top:6%; left:-28%; opacity:.8}
#contact{overflow:hidden}
#contact::before{top:50%; left:50%; translate:-50% -50%; opacity:.9}
.hero>*,.section>*{position:relative; z-index:1}

/* section header lockup (5.3) */
.lockup{margin-bottom:var(--s7)}
.lockup h2{font-size:clamp(1.8rem,3vw + .6rem,2.6rem); margin-top:var(--s3)}
.lockup__lede{margin-top:var(--s4); max-width:58ch; color:var(--text-mid)}
.lockup--center{text-align:center}
.lockup--center .overline{justify-content:center}
.lockup--center .lockup__lede{margin-inline:auto}

/* ---------- 5.5 glass ---------- */
.glass{
  background:rgba(21,27,36,.55);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--border-hi);
}

/* ---------- icons (5.6) · Lucide, 1.75 stroke, currentColor ---------- */
.icon{
  width:20px; height:20px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round;
}
.icon--24{width:24px;height:24px}

/* =============================================================
   COMPONENTS
   ============================================================= */

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:44px; padding:var(--s3) var(--s5); border-radius:var(--r-chip);
  font-weight:600; font-size:.9375rem; line-height:1.2; text-align:center;
  border:1px solid transparent; position:relative; isolation:isolate;
  transition:color var(--t-micro) var(--ease-out),
             background-color var(--t-micro) var(--ease-out),
             border-color var(--t-micro) var(--ease-out),
             transform var(--t-hover) var(--ease-out);
}
.btn--sm{padding:var(--s2) var(--s4); font-size:.875rem}
.btn--primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn--primary::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  background:var(--gradient); opacity:0; transition:opacity var(--t-hover) var(--ease-out);
}
.btn--outline{border-color:var(--border); background:var(--surface); color:var(--text-hi)}
.btn--ghost{color:var(--text-mid); padding-inline:var(--s3)}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .btn--primary:hover::before{opacity:1}
  .btn--outline:hover{border-color:rgba(255,173,51,.45); color:var(--text-hi)}
  .btn--ghost:hover{color:var(--accent)}
}
.btn:active{transform:translateY(0)}

/* focus (A11Y-2) */
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--focus); outline-offset:2px}

.skip-link{
  position:fixed; top:var(--s3); left:var(--s3); z-index:120;
  padding:var(--s3) var(--s5); border-radius:var(--r-chip);
  background:var(--accent); color:var(--accent-ink); font-weight:600;
  transform:translateY(-200%); transition:transform var(--t-micro) var(--ease-out);
}
.skip-link:focus-visible{transform:translateY(0)}

/* chips */
.chips{display:flex; flex-wrap:wrap; gap:var(--s2)}
.chip{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:6px var(--s3); border-radius:var(--r-chip);
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-low); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
}
.chip--accent{border-color:rgba(255,173,51,.35); color:var(--accent); background:rgba(255,173,51,.07)}
.chip--inline{margin-top:var(--s2)}
.chips--facts{margin-top:var(--s7); gap:var(--s3)}
.chips--facts .chip{padding:var(--s2) var(--s4)}

/* cards */
.card{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-card); padding:var(--s5); box-shadow:var(--e1);
  transition:transform var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.card::after{ /* MOT-3: pre-rendered glow, opacity-only fade */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:var(--e-hover); opacity:0; transition:opacity var(--t-hover) var(--ease-out);
}
@media (hover:hover){
  .card:hover{transform:translateY(-4px)}
  .card:hover::after{opacity:1}
}
.card h3{font-size:1.25rem; font-weight:600}
.card p{margin-top:var(--s3); font-size:.9375rem}
.card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--r-chip); margin-bottom:var(--s4);
  background:rgba(255,173,51,.10); border:1px solid rgba(255,173,51,.22); color:var(--accent);
}
.card__icon--brand{background:var(--surface-2); border-color:var(--border); color:var(--text-hi)}
.card--skill .chips{margin-top:var(--s5)}

/* copy button (5.8) */
.copy .copy__ok{display:none}
.copy.is-copied .copy__i{display:none}
.copy.is-copied .copy__ok{display:block}

/* stat tiles (ACC-3) */
.stats{display:flex; flex-wrap:wrap; gap:var(--s5); margin-top:var(--s7)}
.stat{
  flex:1 1 200px; padding:var(--s5); border-radius:var(--r-card);
  background:var(--surface); border:1px solid var(--border);
}
.stat__n{
  display:block; font-family:"Space Grotesk",sans-serif; font-weight:700;
  font-size:clamp(2.4rem,5vw,3.2rem); line-height:1;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat__l{display:block; margin-top:var(--s3); font-size:.6875rem; letter-spacing:.14em; color:var(--text-low)}

/* =============================================================
   LOADER (7.1) — CSS guarantees removal even if JS never runs
   ============================================================= */
.loader{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:var(--bg-0);
  animation:loader-out 400ms var(--ease-out) 1200ms forwards;
}
.loader__mark{width:clamp(120px,22vw,180px); height:auto; opacity:.92; animation:loader-pulse 1.6s ease-in-out infinite}
.loader.is-done{animation:loader-out 320ms var(--ease-out) forwards}
.no-js .loader{display:none}
@keyframes loader-out{to{opacity:0; visibility:hidden; pointer-events:none}}
@keyframes loader-pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* scroll progress (NAV-4) */
.progress{position:fixed; inset:0 0 auto; height:2px; z-index:90; background:transparent; pointer-events:none}
.progress__bar{display:block; height:100%; width:100%; background:var(--gradient); transform:scaleX(0); transform-origin:0 50%}

/* =============================================================
   NAVIGATION
   ============================================================= */
.topbar{
  position:fixed; inset:0 0 auto; z-index:80; height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--s5);
  background:rgba(14,18,24,.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--border-hi);
}
.topbar__brand img{width:64px; height:auto}
.topbar__toggle{
  display:grid; place-items:center; width:44px; height:44px;
  border-radius:var(--r-chip); color:var(--text-hi);
}
.no-js .topbar__toggle{display:none}

/* One nav element: drawer below 1024px, fixed rail above it (6.2) */
.nav-overlay{
  position:fixed; inset:0; z-index:98; background:rgba(6,8,12,.6);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 300ms var(--ease-out), visibility 0s linear 300ms;
}
.nav-overlay.is-open{opacity:1; visibility:visible; pointer-events:auto; transition:opacity 300ms var(--ease-out)}
.nav{
  position:fixed; inset:0 auto 0 0; z-index:99; width:min(300px,84vw);
  display:flex; flex-direction:column; gap:var(--s5); padding:var(--s5);
  background:var(--bg-1); border-right:1px solid var(--border);
  transform:translateX(-100%); visibility:hidden;
  transition:transform 300ms var(--ease-out), visibility 0s linear 300ms;
}
.nav.is-open{transform:none; visibility:visible; transition:transform 300ms var(--ease-out)}
.nav__bg{display:none}
.nav__head{display:flex; align-items:center; justify-content:space-between}
.nav__brand img{width:64px; height:auto}
.nav__close{display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r-chip); color:var(--text-hi)}
.nav__list{display:flex; flex-direction:column; gap:var(--s1)}
.nav__link{
  display:flex; align-items:center; gap:var(--s4); min-height:52px;
  padding:var(--s3) var(--s4); border-radius:var(--r-chip);
  color:var(--text-mid); font-weight:500;
  transition:background-color var(--t-micro), color var(--t-micro);
}
.nav__link[aria-current]{color:var(--accent); background:rgba(255,173,51,.09)}
.nav__expand{display:none}
.nav__foot{margin-top:auto; font-size:.6875rem; letter-spacing:.14em; color:var(--text-low)}

@media (min-width:1024px){
  .topbar,.nav-overlay{display:none!important}
  .nav{
    width:var(--rail-w); padding:var(--s5) 0; gap:0;
    align-items:flex-start; background:none; border:0;
    transform:none; visibility:visible; transition:none; contain:layout paint;
  }
  .nav.is-expanded{width:var(--rail-w-open)}
  .nav__bg{
    display:block; position:absolute; inset:0 auto 0 0; width:var(--rail-w-open);
    background:rgba(14,18,24,.72);
    -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
    box-shadow:1px 0 0 var(--border-hi);
    transform-origin:0 50%; transform:scaleX(.2879);
    transition:transform var(--t-hover) var(--ease-out);
  }
  .nav.is-expanded .nav__bg{transform:scaleX(1)}
  .nav__head{position:relative; width:var(--rail-w); padding:0 16px var(--s6)}
  .nav__brand img{width:46px}
  .nav.is-expanded .nav__head{width:auto; padding-inline:20px}
  .nav.is-expanded .nav__brand img{width:74px}
  .nav__close,.nav__foot{display:none}
  .nav__list{position:relative; margin:auto 0; width:100%; gap:var(--s1)}
  .nav__link,.nav__expand{
    position:relative; display:flex; align-items:center; gap:var(--s4);
    width:100%; min-height:48px; padding:0 0 0 26px; border-radius:0;
    background:none; color:var(--text-low); font-weight:500;
    transition:color var(--t-micro) var(--ease-out);
  }
  .nav__expand{margin-top:var(--s6)}
  .nav__link::before{ /* NAV-1 active indicator */
    content:""; position:absolute; left:0; top:50%; translate:0 -50%;
    width:3px; height:22px; border-radius:0 3px 3px 0; background:var(--gradient);
    opacity:0; transition:opacity var(--t-micro) var(--ease-out);
  }
  .nav__link[aria-current]{color:var(--accent); background:none}
  .nav__link[aria-current]::before{opacity:1}
  .nav__link:hover,.nav__expand:hover{color:var(--text-hi)}
  .nav__label{
    position:absolute; left:calc(100% - 10px); white-space:nowrap;
    padding:6px var(--s3); border-radius:var(--r-chip);
    background:var(--surface-2); border:1px solid var(--border); color:var(--text-hi);
    font-size:.8125rem; font-weight:500; box-shadow:var(--e2);
    opacity:0; pointer-events:none; transition:opacity var(--t-micro) var(--ease-out);
  }
  .nav__link:hover .nav__label,.nav__link:focus-visible .nav__label,
  .nav__expand:hover .nav__label,.nav__expand:focus-visible .nav__label{opacity:1}
  .nav.is-expanded .nav__label{
    position:static; padding:0; background:none; border:0; box-shadow:none;
    color:inherit; font-size:.9375rem; opacity:1;
    transition:opacity var(--t-hover) var(--ease-out) 60ms;
  }
  .nav__expand .icon{transition:transform var(--t-hover) var(--ease-out)}
  .nav.is-expanded .nav__expand .icon{transform:rotate(180deg)}
  main,.footer{margin-left:var(--rail-w)}
  .section{scroll-margin-top:var(--s5)}
}

/* =============================================================
   1 · HERO (7.2)
   ============================================================= */
.hero{
  position:relative; overflow:hidden;
  padding-block:calc(var(--topbar-h) + var(--s8)) var(--s9);
  min-height:100svh; display:flex; align-items:center;
}
.hero__grid{display:grid; gap:var(--s8); align-items:center}
.hero__overline{margin-bottom:var(--s5)}
.hero__title{font-size:clamp(2.6rem,6vw + 1rem,4.5rem); line-height:1.04; letter-spacing:-.02em}
.hero__sub{margin-top:var(--s5); max-width:56ch; font-size:1.0625rem}
.hero__cta{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s7)}

/* outlined block shapes, parallax ≤24px */
.hero__bricks{position:absolute; inset:0; z-index:0; pointer-events:none}
.brick{
  position:absolute; border:1px solid rgba(148,170,200,.14); border-radius:6px;
  will-change:transform;
}
.brick--1{top:12%; left:-4%; width:210px; height:96px; rotate:-8deg}
.brick--2{top:64%; left:6%; width:150px; height:70px; rotate:6deg; opacity:.7}
.brick--3{top:8%; right:12%; width:260px; height:110px; rotate:5deg; opacity:.55}
.brick--4{bottom:8%; right:4%; width:180px; height:82px; rotate:-6deg; opacity:.65}
.brick--5{top:42%; right:-5%; width:230px; height:100px; rotate:10deg; opacity:.4}

.hero__embers{position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; opacity:0}
.hero__embers.is-on{opacity:1; transition:opacity 600ms var(--ease-out)}
.hero__cursor{
  position:absolute; top:0; left:0; z-index:0; width:460px; height:460px; margin:-230px 0 0 -230px;
  border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle,rgba(255,150,50,.30),transparent 62%);
  transition:opacity 300ms var(--ease-out);
}
.hero__cursor.is-on{opacity:1}

/* avatar pedestal */
.hero__stage{display:flex; justify-content:center}
.pedestal{
  position:relative; width:min(420px,100%);
  padding:var(--s7) var(--s5) var(--s6);
  border-radius:var(--r-panel);
  background:rgba(21,27,36,.55);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--border-hi); box-shadow:var(--e2);
}
.pedestal__glow{
  position:absolute; left:50%; top:52%; translate:-50% -50%;
  width:112%; aspect-ratio:1; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle,rgba(255,150,50,.30),transparent 66%);
}
.pedestal__avatar{
  position:relative; z-index:1; width:100%; height:auto; margin-inline:auto;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.5));
  animation:float 6s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pedestal__base{
  position:relative; z-index:1; display:block; height:3px; margin:var(--s5) auto 0;
  width:64%; border-radius:3px; background:var(--gradient); opacity:.85;
  box-shadow:0 0 24px 2px var(--glow);
}
.pedestal__tag{
  position:relative; z-index:1; margin-top:var(--s4); text-align:center;
  font-size:.6875rem; letter-spacing:.14em; color:var(--text-low);
}

.scroll-cue{
  position:absolute; left:50%; bottom:var(--s5); translate:-50% 0; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:var(--s1);
  min-height:44px; padding:var(--s2) var(--s3);
  color:var(--text-low); font-size:.625rem; letter-spacing:.2em;
}
.scroll-cue .icon{animation:cue 2.4s ease-in-out infinite}
.scroll-cue:hover{color:var(--accent)}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(5px);opacity:1}}

@media (min-width:1024px){
  .hero__grid{grid-template-columns:1.15fr .85fr; gap:var(--s9)}
  .hero{padding-block:var(--s9)}
}
@media (max-width:1023px){
  .hero__stage{order:-1}
  .pedestal{width:min(300px,84%)}
  .hero__grid{gap:var(--s7)}
}

/* =============================================================
   2 · ABOUT (7.3)
   ============================================================= */
.about__grid{display:grid; gap:var(--s7)}
.about__prose p+p{margin-top:var(--s5)}
.about__prose p{font-size:1.0625rem}
@media (min-width:900px){
  .about__grid{grid-template-columns:1.25fr .75fr; gap:var(--s8); align-items:start}
}
.profile{
  border-radius:var(--r-panel); padding:var(--s6) var(--s5); box-shadow:var(--e2);
  position:relative; transition:transform var(--t-hover) var(--ease-out);
  transform-style:preserve-3d; will-change:transform;
}
.profile::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:var(--e-hover); opacity:0; transition:opacity var(--t-hover) var(--ease-out);
}
@media (hover:hover){.profile:hover::after{opacity:1}}
.profile__head{display:flex; align-items:center; gap:var(--s4)}
.profile__ring{
  display:block; flex:0 0 auto; width:76px; height:76px; padding:3px;
  border-radius:var(--r-pill); background:var(--gradient);
}
.profile__ring img{width:100%; height:100%; border-radius:var(--r-pill); background:var(--bg-0); object-fit:cover}
.profile__name{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.125rem; color:var(--text-hi)}
.profile__handle{font-size:.875rem; color:var(--text-low)}
.profile__role{margin-top:var(--s5); color:var(--text-hi); font-weight:500}
.profile__meta{margin-top:var(--s2); font-size:.75rem; letter-spacing:.1em; color:var(--text-low)}
.profile__actions{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s5)}

/* =============================================================
   3 · SKILLS (7.4)
   ============================================================= */
.cards-3{display:grid; gap:var(--s5)}
@media (min-width:700px){.cards-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.cards-3{grid-template-columns:repeat(3,1fr)}}

/* "How I work" strip — markup ships only when OWNER-05 confirms each claim (7.4) */
.howto{display:grid; gap:var(--s5); margin-top:var(--s7); padding-top:var(--s7); border-top:1px solid var(--border)}
@media (min-width:700px){.howto{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.howto{grid-template-columns:repeat(4,1fr)}}
.howto__item{position:relative; padding-left:var(--s7); font-size:.9375rem; color:var(--text-mid)}
.howto__item .mono{
  position:absolute; left:0; top:1px; display:grid; place-items:center;
  width:26px; height:26px; border-radius:var(--r-pill);
  background:rgba(255,173,51,.12); border:1px solid rgba(255,173,51,.35);
  color:var(--accent); font-size:.625rem;
}

/* =============================================================
   4 · PORTFOLIO (7.5)
   ============================================================= */
.filters{display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s6)}
.chip--filter{
  min-height:44px; padding:var(--s2) var(--s5); border-radius:var(--r-chip);
  background:var(--surface); border:1px solid var(--border); color:var(--text-low);
  font-family:"JetBrains Mono",monospace; font-weight:500; font-size:.75rem;
  letter-spacing:.1em; text-transform:uppercase;
  transition:color var(--t-micro), border-color var(--t-micro), background-color var(--t-micro);
}
.chip--filter[aria-pressed="true"]{color:var(--accent); border-color:rgba(255,173,51,.45); background:rgba(255,173,51,.08)}
@media (hover:hover){.chip--filter:hover{color:var(--text-hi)}}

.work-grid{display:grid; gap:var(--s5); grid-template-columns:1fr; align-items:start}
@media (min-width:640px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.work-grid{grid-template-columns:repeat(3,1fr)}}

.work-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  box-shadow:var(--e1); text-align:left; width:100%;
  transition:transform var(--t-hover) var(--ease-out);
}
.work-card__btn{position:absolute; inset:0; z-index:3; border-radius:inherit}
.work-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:var(--e-hover); opacity:0; transition:opacity var(--t-hover) var(--ease-out);
}
@media (hover:hover){
  .work-card:hover{transform:translateY(-4px)}
  .work-card:hover::after{opacity:1}
  .work-card:hover .work-card__frame img{transform:scale(1.05)}
  .work-card:hover .work-card__zoom{opacity:1}
}
.work-card__frame{display:block; position:relative; overflow:hidden; aspect-ratio:16/9; background:var(--surface-2)}
.work-card__frame img{width:100%; height:100%; object-fit:cover; transition:transform var(--t-hover) var(--ease-out)}
.work-card__zoom{
  position:absolute; top:var(--s3); right:var(--s3); display:grid; place-items:center;
  width:36px; height:36px; border-radius:var(--r-chip); color:var(--text-hi);
  background:rgba(10,12,16,.62); border:1px solid var(--border-hi);
  opacity:0; transition:opacity var(--t-hover) var(--ease-out);
}
.work-card__body{padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3); flex:1}
.work-card__body h3{font-size:1.25rem; font-weight:600}
.work-card__sub{display:block; color:var(--text-mid); font-size:.9375rem}
.work-card--feature .work-card__frame{aspect-ratio:2/1}
@media (min-width:640px){
  .work-card--feature{grid-column:span 2}
  .work-card--feature .work-card__body h3{font-size:1.5rem}
}
.work-card.is-hidden{display:none}

/* lightbox (7.5) */
.lightbox{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center;
  padding:clamp(12px,3vw,40px);
  background:rgba(6,8,12,.94);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; transition:opacity var(--t-hover) var(--ease-out);
}
.lightbox.is-open{opacity:1}
.lightbox__figure{
  display:flex; flex-direction:column; align-items:center; gap:var(--s4);
  max-width:min(1400px,100%); max-height:100%;
}
.lightbox__figure img{
  max-width:100%; max-height:64svh; width:auto; border-radius:var(--r-card);
  border:1px solid var(--border-hi); box-shadow:var(--e2);
}
.lightbox__cap{
  border-radius:var(--r-card); padding:var(--s4) var(--s5); max-width:74ch; text-align:center;
}
.lightbox__cap h3{font-size:1.125rem; font-weight:600}
.lightbox__cap p{margin-top:var(--s2); font-size:.9375rem; color:var(--text-mid)}
.lightbox__chrome{
  position:absolute; top:clamp(12px,3vw,28px); right:clamp(12px,3vw,28px);
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s1) var(--s1) var(--s1) var(--s4); border-radius:var(--r-pill);
}
.lightbox__count{font-size:.75rem; letter-spacing:.12em; color:var(--text-low)}
.lightbox__close{display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r-pill); color:var(--text-hi)}
.lightbox__nav{
  position:absolute; top:50%; translate:0 -50%; display:grid; place-items:center;
  width:48px; height:48px; border-radius:var(--r-pill); color:var(--text-hi);
  background:rgba(21,27,36,.7); border:1px solid var(--border-hi);
  transition:background-color var(--t-micro), color var(--t-micro);
}
.lightbox__nav--prev{left:clamp(8px,2vw,24px)}
.lightbox__nav--next{right:clamp(8px,2vw,24px)}
@media (hover:hover){.lightbox__nav:hover,.lightbox__close:hover{color:var(--accent)}}
.lightbox__nav[hidden]{display:none}
body.is-locked{overflow:hidden}

/* =============================================================
   5 · COMMUNITIES (7.6)
   ============================================================= */
.linkage{margin-bottom:var(--s8)}
.linkage__svg{width:100%; height:auto}
.linkage__lines path{opacity:.55}
.js .linkage__lines path{stroke-dasharray:var(--len,400); stroke-dashoffset:var(--len,400)}
.js .linkage.is-in .linkage__lines path{animation:draw 600ms var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.lnode rect{fill:var(--surface); stroke:var(--border); stroke-width:1}
.lnode text{fill:var(--text-mid); font-family:Inter,sans-serif; font-size:14px; text-anchor:middle}
.lnode--comm text{text-anchor:start}
.lnode--root rect{fill:var(--surface-2); stroke:rgba(255,173,51,.42)}
.lnode--root text{fill:var(--text-hi); font-weight:600; font-size:15px}
.lnode__sub{fill:var(--accent)!important; font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:1.4px; font-weight:500}
.lnode--game rect{fill:var(--bg-1); stroke:rgba(255,173,51,.28)}
.lnode--game text{fill:var(--text-hi); font-size:13px}
.linkage__stack{display:none}
@media (max-width:767px){
  .linkage__svg{display:none}
  .linkage__stack{display:flex; flex-direction:column; gap:var(--s2)}
  .lstack{
    position:relative; padding:var(--s3) var(--s4); border-radius:var(--r-chip);
    background:var(--surface); border:1px solid var(--border); color:var(--text-mid); font-size:.9375rem;
  }
  .lstack--root{background:var(--surface-2); border-color:rgba(255,173,51,.42); color:var(--text-hi); font-weight:600}
  .lstack--root .mono,.lstack--head .mono{display:block; font-size:.625rem; letter-spacing:.16em; color:var(--accent); margin-bottom:2px}
  .lstack--head{background:none; border:0; padding:var(--s3) 0 0}
  .lstack--game{border-color:rgba(255,173,51,.28); background:var(--bg-1); color:var(--text-hi)}
  .lstack__via{display:block; font-size:.6875rem; letter-spacing:.08em; color:var(--text-low); margin-top:2px}
}

.comm-grid{display:grid; gap:var(--s5)}
@media (min-width:768px){.comm-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){
  .comm-grid{
    grid-auto-flow:column; grid-auto-columns:82%; grid-template-columns:none;
    overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:var(--s4); margin-inline:calc(var(--s5) * -1); padding-inline:var(--s5);
    scrollbar-width:thin;
  }
  .card--comm{scroll-snap-align:start}
}
.card--comm{display:flex; flex-direction:column; gap:var(--s4)}
.comm__head{display:flex; align-items:center; gap:var(--s4)}
.comm__icon{
  position:relative; flex:0 0 auto; display:grid; place-items:center;
  width:56px; height:56px; border-radius:var(--r-chip); overflow:hidden;
  background:var(--surface-2); border:1px solid var(--border);
}
.comm__icon img{width:100%; height:100%; object-fit:cover}
.comm__icon.is-fallback img{display:none}
.comm__icon.is-fallback::after{ /* DIP-2 monogram fallback */
  content:attr(data-monogram); font-family:"JetBrains Mono",monospace; font-weight:500;
  font-size:.75rem; letter-spacing:.06em; color:var(--accent-ink);
  position:absolute; inset:0; display:grid; place-items:center; background:var(--gradient);
}
.card--comm h3{font-size:1.0625rem; font-weight:600}
.comm__role{margin-top:2px; font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.comm__desc{color:var(--text-low); font-size:.875rem; flex:1}
.card--comm .btn{align-self:flex-start}

/* =============================================================
   6 · GAMES (7.7)
   ============================================================= */
.games{display:flex; flex-direction:column; gap:var(--s7)}
.game{
  position:relative; display:grid; gap:0; overflow:hidden;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-panel);
  box-shadow:var(--e1); transition:transform var(--t-hover) var(--ease-out);
}
.game::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:var(--e-hover); opacity:0; transition:opacity var(--t-hover) var(--ease-out);
}
@media (hover:hover){
  .game:hover::after{opacity:1}
  .game:hover .game__frame img{transform:scale(1.04)}
}
.game__frame{display:block; overflow:hidden; aspect-ratio:16/9; background:var(--surface-2)}
.game__frame img{width:100%; height:100%; object-fit:cover; transition:transform var(--t-hover) var(--ease-out)}
.game__body{display:flex; flex-direction:column; gap:var(--s4); padding:var(--s6) var(--s5)}
.game__head{display:flex; align-items:flex-start; gap:var(--s4)}
.game__icon{flex:0 0 auto; width:56px; height:56px; border-radius:var(--r-card); border:1px solid var(--border)}
.game__body h3{font-size:1.375rem}
.game__contrib{color:var(--text-mid); font-size:.9375rem}
.game .btn{align-self:flex-start}
@media (min-width:900px){
  .game{grid-template-columns:1.1fr .9fr; align-items:stretch}
  .game__frame{aspect-ratio:auto; height:100%}
  .game__body{justify-content:center; padding:var(--s7) var(--s6)}
}

/* =============================================================
   7 · COMMISSIONS (7.8)
   ============================================================= */
.services{display:grid; gap:var(--s5)}
@media (min-width:640px){.services{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.services{grid-template-columns:repeat(4,1fr)}}
.services__note{margin-top:var(--s5); font-size:.875rem; color:var(--text-low); max-width:72ch}

.scope{display:grid; gap:var(--s5); margin-top:var(--s9)}
@media (min-width:900px){.scope{grid-template-columns:repeat(2,1fr); align-items:start}}
.panel{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-panel); padding:var(--s6) var(--s5); overflow:hidden;
}
.panel::before{content:""; position:absolute; inset:0 0 auto; height:2px}
.panel--ok::before{background:var(--edge-ok)}
.panel--no::before{background:var(--edge-no)}
.panel h3{display:flex; align-items:center; gap:var(--s3); font-size:1.25rem; font-weight:600}
.panel--ok h3 .icon{color:var(--edge-ok)}
.panel--no h3 .icon{color:var(--edge-no)}
.panel__list{margin-top:var(--s5); display:flex; flex-direction:column; gap:var(--s3)}
.panel__list li{position:relative; padding-left:var(--s5); font-size:.9375rem}
.panel__list li::before{
  content:""; position:absolute; left:0; top:.62em; width:8px; height:1px; background:var(--accent); opacity:.75;
}
.panel__list--long li{gap:var(--s2)}
.panel__list strong{color:var(--text-hi); font-weight:600}
.panel__close{margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--border); font-size:.8125rem; color:var(--text-low)}

.stepper{display:grid; gap:var(--s5); margin-top:var(--s9); counter-reset:step}
.step{position:relative; padding-left:var(--s7)}
.step::before{ /* connector line, drawn on reveal */
  content:""; position:absolute; left:11px; top:26px; bottom:-24px; width:1px;
  background:linear-gradient(180deg,rgba(255,173,51,.5),rgba(255,173,51,0));
  transform-origin:50% 0; transition:transform 600ms var(--ease-out);
}
.js .step::before{transform:scaleY(0)}
.js .stepper.is-in .step::before{transform:scaleY(1)}
.step:last-child::before{display:none}
.step__n{
  position:absolute; left:0; top:0; display:grid; place-items:center;
  width:24px; height:24px; border-radius:var(--r-pill);
  background:rgba(255,173,51,.12); border:1px solid rgba(255,173,51,.35);
  color:var(--accent); font-size:.625rem; letter-spacing:.02em;
}
.step h3{font-size:1.0625rem; font-weight:600}
.step p{margin-top:var(--s2); font-size:.9375rem}
@media (min-width:900px){
  .stepper{grid-template-columns:repeat(5,1fr); gap:var(--s5)}
  .step{padding-left:0; padding-top:var(--s7)}
  .step::before{left:26px; right:-24px; top:11px; bottom:auto; width:auto; height:1px;
    background:linear-gradient(90deg,rgba(255,173,51,.5),rgba(255,173,51,0));
    transform-origin:0 50%;
  }
  .js .step::before{transform:scaleX(0)}
  .js .stepper.is-in .step::before{transform:scaleX(1)}
}

.durations{display:grid; gap:var(--s5); margin-top:var(--s9)}
@media (min-width:700px){.durations{grid-template-columns:repeat(2,1fr)}}
.duration{
  position:relative; overflow:hidden; padding:var(--s6) var(--s5);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-panel);
}
.duration__arc{ /* decorative, deliberately not a gauge (ACC-2 adjacent) */
  position:absolute; top:-70px; right:-70px; width:190px; height:190px; border-radius:50%;
  border:1px solid rgba(255,173,51,.28); border-right-color:transparent; border-bottom-color:transparent;
  rotate:-30deg;
}
.duration__arc--wide{width:230px; height:230px; border-bottom-color:rgba(255,173,51,.14)}
.duration__value{
  margin-top:var(--s3); font-family:"Space Grotesk",sans-serif; font-weight:700;
  font-size:clamp(1.5rem,2.4vw + .6rem,2.1rem); color:var(--text-hi);
}
.duration__note{margin-top:var(--s2); font-size:.875rem; color:var(--text-low)}
.durations__caption{
  display:flex; gap:var(--s3); margin-top:var(--s5);
  font-size:.875rem; color:var(--text-low); max-width:80ch;
}
.durations__caption .icon{margin-top:3px; color:var(--accent)}

.pricing{
  margin-top:var(--s9); padding:var(--s7) var(--s6); border-radius:var(--r-panel);
  box-shadow:var(--e2); display:flex; flex-direction:column; align-items:flex-start; gap:var(--s4);
}
.pricing__line{font-size:clamp(1.0625rem,1.4vw + .6rem,1.375rem); color:var(--text-hi); max-width:52ch; line-height:1.45}

.trust{margin-top:var(--s8)}
.trust__quote{
  font-family:"Space Grotesk",sans-serif; font-weight:600; color:var(--text-hi);
  font-size:clamp(1.25rem,2vw + .6rem,1.75rem); line-height:1.35; max-width:38ch;
  padding-left:var(--s5); border-left:2px solid var(--accent);
}

/* =============================================================
   8 · CONTACT (7.9)
   ============================================================= */
.contact{display:grid; gap:var(--s5); align-items:start}
@media (min-width:900px){.contact{grid-template-columns:1.35fr .65fr}}
.card--discord{padding:var(--s7) var(--s6)}
.card--discord .overline{margin-bottom:var(--s4)}
.handle{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4); margin-top:var(--s2)}
.handle--sub{margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--border)}
.handle__value{
  font-size:clamp(1.5rem,3vw + .5rem,2.25rem); color:var(--text-hi); letter-spacing:-.01em; line-height:1.15;
}
.handle__value--sm{font-size:.9375rem; letter-spacing:.02em; color:var(--text-mid)}
.contact__caption{margin-top:var(--s3); font-size:.8125rem; color:var(--text-low)}
.contact__hint{
  margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--border);
  font-size:.9375rem; color:var(--text-mid);
}
.contact__head{display:flex; align-items:center; gap:var(--s4); margin-bottom:var(--s4)}
.contact__avatar{width:56px; height:56px; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--surface-2)}
.card--roblox{display:flex; flex-direction:column; align-items:flex-start; padding:var(--s6) var(--s5)}
.card--roblox .btn{margin-top:var(--s5)}
.contact__official{margin-top:var(--s7); text-align:center; font-size:.875rem; color:var(--text-low)}

/* =============================================================
   9 · FOOTER (7.10)
   ============================================================= */
.footer{position:relative; z-index:1; padding-block:var(--s8) var(--s7); border-top:1px solid var(--border); background:var(--bg-0)}
.footer__top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s5)}
.footer__brand{display:flex; align-items:center; gap:var(--s3); color:var(--text-hi); font-family:"Space Grotesk",sans-serif; font-weight:700}
.footer__brand img{width:64px; height:auto}
.footer__nav{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); font-size:.875rem}
.footer__nav a{color:var(--text-low); transition:color var(--t-micro)}
.footer__nav a:hover{color:var(--accent)}
.footer__refs{display:flex; flex-wrap:wrap; gap:var(--s5); margin-top:var(--s6); font-size:.875rem; color:var(--text-low)}
.footer__refs a{display:inline-flex; align-items:center; gap:var(--s2); transition:color var(--t-micro)}
.footer__refs a:hover{color:var(--accent)}
.footer__refs .mono{color:var(--text-mid)}
.footer__legal{margin-top:var(--s5); font-size:.75rem; line-height:1.7; color:var(--text-low); max-width:88ch}
.footer__copy{margin-top:var(--s5); font-size:.6875rem; letter-spacing:.14em; color:var(--text-low)}

/* =============================================================
   404
   ============================================================= */
.oops{min-height:100svh; display:grid; place-items:center; text-align:center; padding:var(--s7) var(--s5)}
.oops__mark{width:clamp(170px,26vw,240px); height:auto; margin-inline:auto; opacity:.92}
.oops h1{margin-top:var(--s7); font-size:clamp(2rem,4vw + 1rem,3rem)}
.oops p{margin-top:var(--s4); color:var(--text-mid)}
.oops .btn{margin-top:var(--s7)}

/* =============================================================
   MOTION — reveals (MOT-2)
   ============================================================= */
.js .reveal{opacity:0; transform:translateY(16px)}
.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay:var(--d,0ms);
}
/* One-time hero intro (7.2), 80ms steps. Driven purely by CSS so it begins at
   first paint instead of waiting on script.js — that keeps the LCP element early. */
.js .hero__text>*{opacity:0; animation:intro var(--t-hero) var(--ease-out) forwards}
.js .hero__text>*:nth-child(2){animation-delay:80ms}
.js .hero__text>*:nth-child(3){animation-delay:160ms}
.js .hero__text>*:nth-child(4){animation-delay:240ms}
/* The h1 and the avatar are the LCP candidates, so they never start transparent:
   they slide in instead. Keeps the LCP element paintable on the very first frame. */
.js .hero__title,.js .hero__stage{opacity:1; animation-name:intro-slide}
.js .hero__stage{animation:intro-slide var(--t-hero) var(--ease-out) 120ms forwards}
@keyframes intro-slide{from{transform:translateY(18px)}to{transform:none}}
@keyframes intro{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes intro-stage{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* =============================================================
   MOT-1 — full reduced-motion matrix
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}                                     /* smooth scrolling off */
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  .js .reveal{transform:none}
  .js .reveal.is-in{transition:opacity 150ms linear!important}   /* entrances → 150ms fade */
  .js .hero__text>*,.js .hero__stage{animation:fade-only 150ms linear forwards!important}
  @keyframes fade-only{from{opacity:0}to{opacity:1}}
  .pedestal__avatar{animation:none!important}                    /* avatar float off */
  .scroll-cue .icon{animation:none!important}
  .brick{transform:none!important}                               /* parallax off */
  .hero__embers,.hero__cursor{display:none!important}            /* particles + cursor glow off */
  .linkage__lines path{stroke-dashoffset:0!important; animation:none!important}
  .step::before{transform:none!important}                        /* connector draw off */
  .profile{transform:none!important}                             /* card tilt off */
  .nav,.nav-overlay{transition-duration:.001ms!important}
  .loader{animation:loader-out 1ms linear 400ms forwards}
  .loader__mark{animation:none}
}