*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f2f0e9;color:#111;font-family:var(--font-body,Arial,Helvetica,sans-serif);font-weight:var(--weight-body,400);font-style:var(--style-body,normal)}
/* 90s CRT — stronger RGB separation + rounded/bulging cathode screen.
   The artwork itself stays sharp; the CRT character is built around/above the interface. */
body{overflow-x:hidden}
body::before,body::after{content:"";position:fixed;pointer-events:none;inset:-1.6vw}
body::before{
  z-index:20;
  border-radius:4.8vw / 3.2vw;
  background:
    radial-gradient(ellipse at center,transparent 54%,rgba(0,0,0,var(--crt-vignette,.35)) 88%,rgba(0,0,0,calc(var(--crt-vignette,.35) * 1.55)) 100%),
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,var(--crt-scan,.18)) 0px,
      rgba(0,0,0,var(--crt-scan,.18)) 1px,
      rgba(255,255,255,.028) 2px,
      transparent 4px);
  box-shadow:
    inset 0 0 4vw rgba(0,0,0,.32),
    inset 0 0 11vw rgba(0,0,0,var(--crt-vignette,.35));
  animation:crt-flicker .13s steps(2,end) infinite
}
body::after{
  z-index:21;
  border-radius:5vw / 3.4vw;
  background:
    linear-gradient(90deg,
      rgba(255,0,55,var(--crt-rgb,.12)) 0%,
      rgba(255,0,55,calc(var(--crt-rgb,.12) * .45)) 2.2%,
      transparent 7%,
      transparent 93%,
      rgba(0,210,255,calc(var(--crt-rgb,.12) * .45)) 97.8%,
      rgba(0,210,255,var(--crt-rgb,.12)) 100%),
    repeating-radial-gradient(circle at 23% 17%,
      rgba(255,255,255,var(--crt-noise,.05)) 0 1px,
      transparent 1px 5px);
  background-size:auto,8px 8px;
  mix-blend-mode:screen;
  box-shadow:
    -5px 0 10px rgba(255,0,70,var(--crt-edge,.16)),
     5px 0 10px rgba(0,190,255,var(--crt-edge,.16));
  animation:crt-drift .72s steps(3,end) infinite
}
/* The shell gets the characteristic convex CRT silhouette without changing the page structure. */
.site-shell{
  position:relative;
  border-radius:var(--crt-radius,0);
  overflow:hidden;
  transform-origin:center top;
  transform:perspective(1500px) scaleX(var(--crt-wide,1)) scaleY(var(--crt-tall,1));
  transition:filter .35s ease,transform .35s ease,border-radius .35s ease;
}
/* Stronger colour-channel fringing on typography/UI, not on portfolio artwork. */
.hero-copy,.scroll-mark,.project-head,.contact .role,.socials{
  text-shadow:
    calc(var(--crt-shift,0px) * -1) 0 rgba(255,20,45,var(--crt-fringe,0)),
    var(--crt-shift,0px) 0 rgba(0,220,255,var(--crt-fringe,0));
}
@keyframes crt-flicker{
  0%,100%{filter:brightness(1) contrast(1);opacity:1}
  44%{filter:brightness(calc(1 - var(--crt-flicker,.03))) contrast(1.015);opacity:.985}
  50%{filter:brightness(calc(1 + var(--crt-flicker,.03))) contrast(1.025);opacity:1}
}
@keyframes crt-drift{
  0%{transform:translate3d(0,0,0);background-position:0 0,0 0}
  33%{transform:translate3d(var(--crt-jitter,.4px),0,0);background-position:0 0,3px -1px}
  66%{transform:translate3d(calc(var(--crt-jitter,.4px) * -1),.25px,0);background-position:0 0,-2px 2px}
  100%{transform:translate3d(0,0,0);background-position:0 0,0 0}
}
/* Keep uploaded work above the texture/RGB overlays. */
.tile{z-index:41}
.tile img{position:relative;z-index:42}
.lightbox img,.modal img{position:relative;z-index:42}
a{color:inherit;text-decoration:none}button{font:inherit}
.site-shell{transition:filter .35s ease,transform .35s ease}.modal-open{overflow:hidden}.modal-open .site-shell{filter:blur(13px);transform:scale(.992);pointer-events:none;user-select:none}

.hero{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;padding:7vw 5vw;background:var(--hero-bg,#7a39ff);color:var(--hero-fg,#d5ff2f);overflow:hidden}
.hero-copy{width:min(92vw,1100px);position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero h1{margin:0;font-family:var(--font-hero_name,Georgia,'Times New Roman',serif);font-style:var(--style-hero_name,italic);font-size:clamp(58px,8.2vw,124px);line-height:.78;letter-spacing:-.065em;font-weight:var(--weight-hero_name,400);max-width:none;display:flex;flex-direction:column;align-items:center}
.hero-name-first{display:block;transform:translateX(-.34em)}
.hero-name-rest{display:block;transform:translateX(.30em);margin-top:.28em}
.hero-role-wrap{margin-top:clamp(34px,4vw,58px);display:flex;flex-direction:column;align-items:center;gap:15px;min-width:min(440px,72vw)}
.hero-role-line{display:block;width:min(330px,54vw);height:1px;background:currentColor;opacity:.62}
.hero-copy p{margin:0;font-family:var(--font-hero_role,Arial,Helvetica,sans-serif);font-weight:var(--weight-hero_role,500);font-style:var(--style-hero_role,normal);font-size:clamp(13px,1.05vw,17px);line-height:1.1;letter-spacing:.16em;text-transform:uppercase}
.scroll-mark{position:absolute;left:50%;transform:translateX(-50%);bottom:28px;font-size:30px;font-weight:800}
.wave-title{display:flex;flex-wrap:wrap;align-items:baseline}.wave-word{display:inline-flex;white-space:nowrap;margin-right:.22em}.wave-letter{display:inline-block;position:relative;will-change:transform;animation:wave-base 2.7s ease-in-out infinite;animation-delay:calc(var(--i) * -70ms)}.wave-letter::before,.wave-letter::after{content:attr(data-char);position:absolute;inset:0;pointer-events:none;font:inherit;letter-spacing:inherit;color:transparent;-webkit-text-stroke:1.6px currentColor;opacity:.5;will-change:transform;animation:wave-outline-a 2.3s ease-in-out infinite;animation-delay:calc(var(--i) * -95ms)}.wave-letter::after{opacity:.28;-webkit-text-stroke:1px currentColor;animation-name:wave-outline-b;animation-duration:3.15s;animation-delay:calc(var(--i) * -125ms)}
@keyframes wave-base{0%,100%{transform:translateY(0) skewX(0deg)}25%{transform:translateY(-2px) skewX(-1.1deg)}50%{transform:translateY(1px) skewX(.8deg)}75%{transform:translateY(2px) skewX(-.6deg)}}
@keyframes wave-outline-a{0%,100%{transform:translate(-2px,0) scale(1.01,1)}25%{transform:translate(3px,-4px) scale(1.045,.975)}50%{transform:translate(5px,1px) scale(.975,1.04)}75%{transform:translate(-4px,4px) scale(1.035,.985)}}
@keyframes wave-outline-b{0%,100%{transform:translate(3px,1px) scale(.99,1.025)}33%{transform:translate(-5px,-3px) scale(1.04,.97)}66%{transform:translate(4px,5px) scale(.97,1.045)}}

.project{padding:7vw 5vw 8vw;background:var(--project-bg,#111);color:var(--project-fg,#fff)}.project-head{display:grid;grid-template-columns:1.2fr .8fr;gap:7vw;align-items:end;max-width:1380px;margin:0 auto 4.2vw}.eyebrow{margin:0 0 18px;font-family:var(--font-category_meta,Arial,Helvetica,sans-serif);font-style:var(--style-category_meta,normal);font-size:12px;font-weight:var(--weight-category_meta,700);letter-spacing:.12em}.project-head h2{margin:0;font-family:var(--font-category_title,Georgia,'Times New Roman',serif);font-weight:var(--weight-category_title,400);font-style:var(--style-category_title,italic);font-size:clamp(58px,8.8vw,128px);line-height:.84;letter-spacing:-.045em}.project-head>p{margin:0 0 7px;max-width:500px;font-family:var(--font-category_meta,Arial,Helvetica,sans-serif);font-weight:var(--weight-category_meta,700);font-style:var(--style-category_meta,normal);font-size:clamp(16px,1.45vw,21px);line-height:1.25}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;align-items:start;grid-auto-flow:dense;max-width:1380px;margin:0 auto}.tile{border:0;padding:0;margin:0;background:transparent;color:inherit;position:relative;transform-origin:center;will-change:transform;cursor:pointer;text-align:left;grid-column:span 3}.tile img{display:block;width:100%;height:auto;box-shadow:0 10px 24px rgba(0,0,0,.16)}.t5,.t6,.t7{grid-column:span 4}.t1,.t2,.t3,.t4,.t8,.t9,.t10,.t11{grid-column:span 3}
@keyframes vibrate{0%{transform:translate(0) rotate(0)}20%{transform:translate(-1.4px,.9px) rotate(-.14deg)}40%{transform:translate(1.2px,-1px) rotate(.12deg)}60%{transform:translate(-.9px,-.5px) rotate(-.09deg)}80%{transform:translate(1.3px,.7px) rotate(.12deg)}100%{transform:translate(0) rotate(0)}}@media(hover:hover){.tile:hover{animation:vibrate .26s linear infinite}}

.contact{min-height:58vh;padding:6vw 5vw 4vw;background:var(--contact-bg,#ff5d9d);color:var(--contact-fg,#111);display:flex;flex-direction:column;justify-content:space-between;gap:55px}.role{margin:0;width:100%;font-family:var(--font-footer_role,Georgia,'Times New Roman',serif);font-style:var(--style-footer_role,italic);font-size:clamp(34px,5.6vw,82px);line-height:.96;letter-spacing:-.045em;font-weight:var(--weight-footer_role,700);white-space:nowrap}.socials{display:flex;gap:28px;flex-wrap:wrap;font-family:var(--font-links,Arial,Helvetica,sans-serif);font-style:var(--style-links,normal);font-size:clamp(17px,1.8vw,26px);font-weight:var(--weight-links,700)}.socials a{border-bottom:2px solid currentColor;padding-bottom:2px}

.lightbox{z-index:10001;font-family:var(--font-lightbox,Arial,Helvetica,sans-serif);font-weight:var(--weight-lightbox,400);font-style:var(--style-lightbox,normal);position:fixed;inset:0;display:grid;place-items:center;padding:4vw;visibility:hidden;opacity:0;transition:opacity .25s ease,visibility .25s ease}.lightbox.is-open{visibility:visible;opacity:1}.lightbox-backdrop{position:absolute;inset:0;border:0;background:rgba(8,8,8,.34);cursor:zoom-out}.lightbox-panel{position:relative;z-index:1;display:grid;grid-template-columns:minmax(280px,680px) minmax(220px,340px);align-items:center;gap:42px;max-width:1100px;width:min(92vw,1100px);max-height:88vh}.lightbox-media{display:flex;justify-content:center;align-items:center;min-width:0}.lightbox-media img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;box-shadow:0 24px 70px rgba(0,0,0,.38)}.lightbox-info{color:#ff5d9d;align-self:center}.lightbox-info h3{margin:0 0 15px;font-size:clamp(30px,4vw,58px);line-height:.9;letter-spacing:-.045em}.lightbox-date{margin:0 0 22px;font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.lightbox-caption{margin:0;max-width:32ch;font-size:clamp(17px,1.7vw,23px);line-height:1.25}.lightbox-close{position:absolute;right:-8px;top:-46px;border:0;background:transparent;color:#ff5d9d;font-size:42px;line-height:1;cursor:pointer;padding:0 5px}

@media(max-width:900px){.role{font-size:clamp(30px,6.7vw,58px)}}
@media(max-width:800px){.hero{padding:70px 20px}.hero h1{font-size:clamp(58px,17vw,92px)}.hero-name-first{transform:translateX(-.18em)}.hero-name-rest{transform:translateX(.16em);margin-top:.24em}.hero-role-wrap{margin-top:32px}.hero-copy p{font-size:12px;letter-spacing:.12em}.scroll-mark{left:50%}.project{padding:80px 20px}.project-head{grid-template-columns:1fr;gap:28px;margin-bottom:42px}.grid{gap:14px}.tile,.t1,.t2,.t3,.t4,.t5,.t6,.t7,.t8,.t9,.t10,.t11{grid-column:span 6}.grid .tile:nth-child(5n){grid-column:span 12;padding:0 9vw}.contact{min-height:50vh;padding:60px 20px 28px;gap:45px}.role{white-space:normal;font-size:clamp(44px,13vw,78px)}.lightbox{padding:52px 20px 24px}.lightbox-panel{grid-template-columns:1fr;gap:20px;max-height:90vh;overflow:auto;align-content:start}.lightbox-media img{max-height:61vh}.lightbox-info{padding-bottom:20px}.lightbox-close{right:0;top:-42px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tile:hover{animation:none!important}.wave-letter,.wave-letter::before,.wave-letter::after,body::before,body::after{animation:none}.site-shell{transition:none}}

/* V14 — uploaded gallery images stay completely outside the CRT treatment. */
.hero-copy,.scroll-mark,.project-head,.contact>*{position:relative;z-index:24}
.tile{position:relative;z-index:30;isolation:isolate}
.tile img{position:relative;z-index:31!important;filter:none!important;mix-blend-mode:normal!important;text-shadow:none!important}
.lightbox{z-index:10001!important}
.lightbox-media{position:relative;z-index:10002}
.lightbox-media img{position:relative;z-index:10003!important;filter:none!important;mix-blend-mode:normal!important}

body{font-size:var(--size-body,initial);text-decoration:var(--deco-body,none)}
.hero h1{font-size:var(--size-hero_name,clamp(58px,8.2vw,124px));text-decoration:var(--deco-hero_name,none)}
.hero-copy p{font-size:var(--size-hero_role,clamp(13px,1.05vw,17px));text-decoration:var(--deco-hero_role,none)}
.project-head h2{font-size:var(--size-category_title,clamp(58px,8.8vw,128px));text-decoration:var(--deco-category_title,none)}
.eyebrow,.project-head>p{font-size:var(--size-category_meta,inherit);text-decoration:var(--deco-category_meta,none)}
.lightbox-info{font-size:var(--size-lightbox,inherit);text-decoration:var(--deco-lightbox,none)}
.contact .role{font-size:var(--size-footer_role,clamp(34px,5.6vw,82px));text-decoration:var(--deco-footer_role,none)}
.socials{font-size:var(--size-links,clamp(17px,1.8vw,26px));text-decoration:var(--deco-links,none)}

/* V15 — YouTube media inside gallery categories */
.video-tile{
  grid-column:span 6;
  position:relative;
  z-index:30;
  background:transparent;
  cursor:default;
  animation:none!important;
}
.youtube-frame{
  position:relative;
  z-index:31;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#000;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.youtube-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  border:0;
  filter:none!important;
  mix-blend-mode:normal!important;
}
.video-meta{
  position:relative;
  z-index:31;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:baseline;
  padding-top:10px;
  font-family:var(--font-category_meta,Arial,Helvetica,sans-serif);
  font-weight:var(--weight-category_meta,700);
  font-style:var(--style-category_meta,normal);
  font-size:13px;
}
.video-meta small{font-size:11px;opacity:.72;letter-spacing:.08em}
@media(max-width:800px){
  .video-tile,.grid .video-tile:nth-child(5n){grid-column:span 12;padding:0}
}

/* V16 — Hero: name on one line, role aligned directly underneath. */
.hero-copy{
  width:min(92vw,1180px);
  align-items:flex-start!important;
  text-align:left!important;
}
.hero h1.hero-name{
  width:auto;
  max-width:100%;
  display:block!important;
  white-space:nowrap;
  line-height:.9;
  letter-spacing:-.065em;
  text-align:left;
  font-size:var(--size-hero_name,clamp(54px,8vw,118px));
}
.hero-name-full{
  display:inline-block;
  transform:none!important;
  margin:0!important;
}
.hero-role-wrap{
  align-items:flex-start!important;
  min-width:0!important;
  margin-top:clamp(24px,2.8vw,40px)!important;
}
.hero-role-line{
  width:min(330px,42vw);
}
.hero-copy p{
  text-align:left;
}
@media(max-width:800px){
  .hero-copy{width:94vw}
  .hero h1.hero-name{
    font-size:var(--size-hero_name,clamp(36px,11.5vw,70px));
    letter-spacing:-.055em;
  }
  .hero-role-wrap{margin-top:22px!important}
  .hero-role-line{width:min(280px,62vw)}
}

.wave-name-space{display:inline-block;width:var(--hero-word-gap,12px)}
.hero-name-full .wave-word{display:inline-block}

/* V17 — small-screen safety while keeping the hero name on one line */
@media(max-width:560px){
  .hero h1.hero-name{
    font-size:var(--size-hero_name,clamp(30px,9.3vw,52px));
    max-width:96vw;
  }
  .hero-role-wrap{max-width:92vw}
  .hero-copy p{font-size:var(--size-hero_role,11px)}
}