body[data-page="work"]{--accent:#ff4fd8;background:var(--accent);color:#111}.work-main{background:var(--accent);padding-top:var(--chrome-h)}.work-hero{position:relative;min-height:76svh;padding:clamp(70px,10vw,140px) clamp(16px,5vw,76px) 50px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}.work-hero:before{content:"";position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(0,0,0,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.22) 1px,transparent 1px);background-size:32px 32px}.work-hero>*{position:relative}.work-index{display:flex;gap:24px;align-items:center;font-size:11px;text-transform:uppercase}.work-index b{font-size:clamp(3rem,6vw,6rem);font-weight:400}.work-hero h1{font-family:AthensPixel,Departure,monospace;font-size:clamp(4.5rem,15vw,15rem);font-weight:400;line-height:.72;letter-spacing:-.06em;text-transform:uppercase;margin:5vh 0 0;max-width:9ch}.work-hero h1 span{display:block}.work-hero-meta{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-top:45px;border-top:1px solid #111;padding-top:12px}.work-hero-meta p{max-width:640px;line-height:1.7;font-size:12px;margin:0}.work-hero-meta i{font-style:normal;font-size:11px}.hero-scribble{position:absolute;right:7vw;top:16%;width:min(28vw,360px);aspect-ratio:1;border:2px solid #111;border-radius:45% 55% 48% 52%;transform:rotate(-12deg);opacity:.7}.hero-scribble:before,.hero-scribble:after{content:"";position:absolute;border:2px solid #111;border-radius:50%;inset:12%;transform:rotate(25deg)}.hero-scribble:after{inset:29%;transform:rotate(-30deg)}
.work-gallery{padding:0 clamp(16px,5vw,76px) clamp(70px,10vw,140px);display:grid;grid-template-columns:1fr 1fr;gap:18px}.work-shot{min-height:clamp(260px,39vw,590px);position:relative;border:1px solid #111;background:#eee;overflow:hidden;box-shadow:9px 9px 0 rgba(0,0,0,.2);isolation:isolate}.work-shot.wide{grid-column:1/-1;min-height:clamp(320px,52vw,760px)}.work-shot .shot-label{position:absolute;z-index:4;left:10px;top:10px;background:#fff;border:1px solid #111;padding:5px 8px;font-size:9px}.work-shot.pixel-image{background-size:cover;background-position:center}.work-shot.pixel-image:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 15px,rgba(0,0,0,.3) 15px 16px),repeating-linear-gradient(0deg,transparent 0 15px,rgba(0,0,0,.3) 15px 16px);mix-blend-mode:multiply;animation:pixelGrid 3.5s steps(5) infinite}@keyframes pixelGrid{50%{background-size:40px 40px;opacity:.35}}.work-shot.particle-image{background-size:cover;background-position:center;filter:contrast(1.15)}.work-shot.particle-image:after{content:"PARTICLES";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-family:AthensPixel,Departure,monospace;font-size:clamp(3rem,11vw,11rem);mix-blend-mode:difference;letter-spacing:.04em}.work-shot.sketch-image{background:#ecebe6;background-image:repeating-linear-gradient(7deg,transparent 0 3px,rgba(0,0,0,.08) 4px)}.sketch-portrait{position:absolute;left:50%;top:50%;width:34%;height:63%;transform:translate(-50%,-50%) rotate(-3deg);border:8px double #111;border-radius:46% 46% 43% 43%;filter:drop-shadow(12px 9px 0 rgba(0,0,0,.12))}.sketch-portrait:before,.sketch-portrait:after{content:"";position:absolute;top:39%;width:20%;height:6%;border:4px solid #111;border-radius:50%}.sketch-portrait:before{left:18%}.sketch-portrait:after{right:18%}.sketch-mouth{position:absolute;left:50%;top:68%;width:26%;height:7%;border-bottom:5px solid #111;transform:translateX(-50%) rotate(3deg)}.sketch-stroke{position:absolute;height:2px;background:#111;transform-origin:left}.sketch-stroke.s1{width:48%;left:4%;top:14%;transform:rotate(12deg)}.sketch-stroke.s2{width:42%;right:4%;bottom:18%;transform:rotate(-15deg)}.sketch-stroke.s3{width:28%;left:9%;bottom:8%;transform:rotate(7deg)}.work-shot.ascii-image{background:#090b08;color:#caff9c}.ascii-cloud{position:absolute;inset:-10%;margin:0;white-space:pre-wrap;word-break:break-all;font:400 clamp(16px,2.4vw,38px)/1 Departure,monospace;letter-spacing:.13em;opacity:.45;transform:rotate(-6deg);animation:asciiCloud 12s linear infinite}.ascii-face{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:AthensPixel,Departure,monospace;font-size:clamp(5rem,18vw,18rem);line-height:.7;text-align:center;text-shadow:8px 8px 0 rgba(202,255,156,.12)}@keyframes asciiCloud{50%{transform:rotate(5deg) translateY(-6%)}}
.work-description{background:#efefec;padding:clamp(80px,11vw,170px) clamp(16px,6vw,92px);background-image:linear-gradient(rgba(0,0,0,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.08) 1px,transparent 1px);background-size:29px 29px}.description-lead{max-width:1100px;margin:auto;display:grid;grid-template-columns:.55fr 1.45fr;gap:7vw}.description-lead>span{font-size:11px;text-transform:uppercase}.description-lead h2{font-family:AthensPixel,Departure,monospace;font-size:clamp(3rem,7vw,7rem);line-height:.9;font-weight:400;margin:0 0 35px;text-transform:uppercase}.description-lead p{font-size:clamp(.95rem,1.45vw,1.22rem);line-height:1.8;margin:0}.description-columns{max-width:1100px;margin:110px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:7vw}.description-columns h3{font-size:11px;text-transform:uppercase;border-bottom:1px solid #111;padding-bottom:8px}.description-columns p{font-size:12px;line-height:1.8}.work-facts{background:var(--accent);padding:clamp(80px,10vw,150px) clamp(16px,6vw,92px)}.facts-grid{max-width:1100px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.fact-card{min-height:300px;background:#efefec;border:1px solid #111;padding:20px;box-shadow:8px 8px 0 rgba(0,0,0,.22);display:flex;flex-direction:column}.fact-card>span{font-size:64px;font-family:AthensPixel,Departure,monospace}.fact-icon{margin:auto;position:relative;width:100px;height:100px;border:4px solid #111;transform:rotate(5deg)}.fact-icon:before,.fact-icon:after{content:"";position:absolute;background:#111}.fact-icon:before{left:12%;right:12%;height:4px;top:48%}.fact-icon:after{top:12%;bottom:12%;width:4px;left:48%}.fact-card h3{margin:20px 0 4px;font-size:11px;text-transform:uppercase}.fact-card p{margin:0;font-size:12px;line-height:1.6;text-transform:uppercase}.work-actions{display:flex;justify-content:center;gap:12px;padding:0 20px clamp(90px,11vw,160px);background:var(--accent)}.work-actions a{border:1px solid #111;background:#fff;padding:11px 15px;box-shadow:5px 5px 0 #111;font-size:10px;text-transform:uppercase}.work-actions a.primary{background:#111;color:#fff}.work-actions a:active{transform:translate(5px,5px);box-shadow:none}.work-marquee{overflow:hidden;background:var(--accent);border-top:1px solid #111;border-bottom:1px solid #111;white-space:nowrap}.work-marquee div{display:inline-block;font-family:AthensPixel,Departure,monospace;font-size:clamp(4rem,12vw,12rem);line-height:.85;padding:16px 0;animation:workMarquee 17s linear infinite}@keyframes workMarquee{to{transform:translateX(-50%)}}
.device-showcase{padding:clamp(90px,11vw,160px) clamp(16px,5vw,76px);background:#efefec;background-image:linear-gradient(rgba(0,0,0,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.08) 1px,transparent 1px);background-size:28px 28px}.device-row{max-width:1100px;margin:auto;display:flex;justify-content:center;align-items:end;gap:clamp(20px,5vw,75px)}.phone{width:min(25vw,255px);aspect-ratio:9/18;border:10px solid #111;border-radius:24px;background:var(--accent);padding:12px;box-shadow:15px 18px 0 rgba(0,0,0,.15);transform:rotate(-4deg);overflow:hidden}.phone:nth-child(2){transform:translateY(-30px) rotate(3deg)}.phone:nth-child(3){transform:rotate(-2deg)}.phone-screen{height:100%;border:1px solid #111;position:relative;overflow:hidden;background:#111;color:#fff}.phone-screen:before{content:"";position:absolute;left:50%;top:8px;transform:translateX(-50%);width:35%;height:5px;background:#111;border-radius:5px;z-index:2}.phone-title{position:absolute;left:10%;right:10%;top:36%;font-family:AthensPixel,Departure,monospace;font-size:clamp(1.2rem,3.8vw,3.5rem);line-height:.8;text-align:center}.phone-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px);background-size:18px 18px}.next-project{display:grid;grid-template-columns:1fr 1fr;background:var(--accent);border-top:1px solid #111}.next-copy{padding:clamp(45px,7vw,100px)}.next-copy span{font-size:10px;text-transform:uppercase}.next-copy h2{font-family:AthensPixel,Departure,monospace;font-size:clamp(3rem,7vw,7rem);font-weight:400;line-height:.85;text-transform:uppercase;margin:30px 0}.next-copy a{display:inline-block;border:1px solid #111;background:#fff;padding:9px 12px;font-size:10px}.next-visual{min-height:420px;border-left:1px solid #111;display:grid;place-items:center;background:#111;color:var(--accent);font-family:AthensPixel,Departure,monospace;font-size:clamp(4rem,10vw,10rem);line-height:.7;text-align:center;overflow:hidden}.work-footer{background:#050a12;color:#fff;min-height:390px;position:relative;overflow:hidden}.work-footer .email-marquee{padding-top:50px}.work-footer .floor-grid{height:120%;bottom:-55%}.work-footer .footer-links{padding-top:130px}
@media(max-width:800px){.work-hero{min-height:70svh}.work-hero-meta{align-items:start;flex-direction:column}.hero-scribble{opacity:.35;width:55vw}.work-gallery{grid-template-columns:1fr}.work-shot.wide{grid-column:auto}.description-lead,.description-columns{grid-template-columns:1fr}.description-columns{margin-top:70px}.facts-grid{grid-template-columns:1fr}.fact-card{min-height:240px}.device-row{gap:12px}.phone{width:29vw;border-width:6px;padding:6px}.next-project{grid-template-columns:1fr}.next-visual{border-left:0;border-top:1px solid #111;min-height:310px}.work-actions{flex-direction:column;align-items:stretch}.work-actions a{text-align:center}}

.work-hero:after{content:"ROBERTO / VISUAL ENGINE";position:absolute;right:5vw;bottom:18px;font-size:10px;letter-spacing:.12em}.work-shot{background:#f4f7ef}.work-shot.ascii-image{background:#050a12;color:#c8ff4d}.ascii-face{text-shadow:8px 8px 0 rgba(53,242,255,.22)}

/* V5 modern Sketchy presentation imagery. */
.work-shot.sketch-image{background:#071018;background-image:none}
.work-shot.sketch-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.18);transition:transform .9s cubic-bezier(.22,1,.36,1),filter .6s}
.work-shot.sketch-image:hover img{transform:scale(1.035);filter:grayscale(.1) contrast(1.08)}
.work-shot.sketch-image:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(53,242,255,.13),transparent 42%,rgba(255,79,216,.16)),repeating-linear-gradient(90deg,transparent 0 27px,rgba(255,255,255,.16) 27px 28px),repeating-linear-gradient(0deg,transparent 0 27px,rgba(255,255,255,.16) 27px 28px);mix-blend-mode:screen;pointer-events:none}
.sketch-photo-badge{position:absolute;z-index:4;right:12px;bottom:12px;padding:7px 9px;background:#c8ff4d;color:#071018;border:1px solid #071018;box-shadow:4px 4px 0 #071018;font-size:9px}

.work-shot.terminal-image{background-color:#0c6974;background-size:cover;background-position:center;image-rendering:auto}.work-shot.terminal-image:after{content:"ROBERTO OS 95";position:absolute;right:12px;bottom:12px;padding:7px 9px;background:#c8ff4d;color:#071018;border:1px solid #071018;box-shadow:4px 4px 0 #071018;font-size:9px}

/* V17 work detail visual containment patch
   Large screenshots now stay inside their frames instead of becoming cropped,
   over-zoomed, or unreadable. */
.work-gallery{overflow:hidden}
.work-shot{overflow:hidden;contain:paint;background-repeat:no-repeat!important;background-size:contain!important;background-position:center!important}
.work-shot.wide{background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}
.work-shot.mosaic-image{background-color:#061a24!important}
.work-shot.particle-image{background-color:#050a12!important;background-size:contain!important}
.work-shot.terminal-image{background-color:#0c6974!important;background-size:contain!important}
.work-shot.ascii-image{overflow:hidden}
.work-shot.ascii-image .ascii-face{font-size:clamp(3rem,12vw,13rem);max-width:92%;overflow:hidden}
.work-shot.sketch-image img{object-fit:contain;background:#efeee7}
.work-shot .shot-label{max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:800px){
  .work-shot,.work-shot.wide{min-height:clamp(220px,72vw,420px)}
  .work-shot.particle-image:after{font-size:clamp(2rem,14vw,5rem)}
}

/* V19: Work detail gallery cleanup.
   Removes the oversized PARTICLES/PROJECTS-style text mask and replaces it
   with crisp, modern framed screenshots that stay readable at large desktop
   and mobile sizes. */
.work-gallery{
  max-width:1760px;
  margin:0 auto;
  align-items:stretch;
}
.work-shot{
  border:2px solid #071018!important;
  background-color:#050a12!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center!important;
  box-shadow:12px 12px 0 rgba(0,0,0,.42)!important;
  filter:none!important;
  transition:transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s cubic-bezier(.22,1,.36,1), filter .35s ease;
}
.work-shot.wide{
  min-height:clamp(360px,48vw,820px)!important;
  background-size:cover!important;
}
.work-shot:not(.wide){
  min-height:clamp(300px,27vw,560px)!important;
}
.work-shot::before{
  content:"";
  position:absolute;
  inset:18px;
  z-index:3;
  border:1px solid rgba(255,255,255,.58);
  background:
    linear-gradient(90deg,rgba(53,242,255,.44) 0 2px,transparent 2px calc(100% - 2px),rgba(53,242,255,.44) calc(100% - 2px)),
    linear-gradient(0deg,rgba(255,255,255,.16),transparent 28%,transparent 72%,rgba(255,255,255,.14));
  box-shadow:0 0 0 1px rgba(7,16,24,.95), 8px 8px 0 rgba(0,0,0,.38), inset 0 0 28px rgba(53,242,255,.08);
  pointer-events:none;
}
.work-shot::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  display:block!important;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 8px),
    radial-gradient(circle at 15% 18%,rgba(53,242,255,.18),transparent 26%),
    radial-gradient(circle at 85% 82%,rgba(255,79,216,.15),transparent 28%),
    linear-gradient(120deg,transparent 0 44%,rgba(255,255,255,.20) 48%,transparent 52% 100%);
  background-size:auto,auto,auto,240% 100%;
  background-position:0 0,0 0,0 0,-120% 0;
  mix-blend-mode:screen!important;
  opacity:.25!important;
  pointer-events:none;
  animation:workGallerySweepV19 8.5s cubic-bezier(.22,1,.36,1) infinite;
  color:transparent!important;
  font-size:0!important;
  letter-spacing:0!important;
}
@keyframes workGallerySweepV19{
  0%,66%{background-position:0 0,0 0,0 0,-120% 0;opacity:.18}
  82%{background-position:0 0,0 0,0 0,0 0;opacity:.38}
  100%{background-position:0 0,0 0,0 0,120% 0;opacity:.18}
}
.work-shot:hover{
  transform:translateY(-5px);
  box-shadow:16px 18px 0 rgba(0,0,0,.48)!important;
  filter:saturate(1.04) contrast(1.02)!important;
}
.work-shot .shot-label{
  z-index:5!important;
  left:18px!important;
  top:18px!important;
  max-width:calc(100% - 36px)!important;
  padding:7px 10px 6px!important;
  background:rgba(243,246,239,.94)!important;
  color:#071018!important;
  border:1px solid #071018!important;
  box-shadow:4px 4px 0 rgba(0,0,0,.7)!important;
  font-size:9px!important;
  letter-spacing:.08em;
}
body[data-page="work"] .work-hero h1{
  max-width:11ch;
}
@media(max-width:800px){
  .work-gallery{gap:14px!important}
  .work-shot,.work-shot.wide{min-height:clamp(250px,64vw,430px)!important;background-size:cover!important}
  .work-shot::before{inset:12px}
  .work-shot .shot-label{left:12px!important;top:12px!important;max-width:calc(100% - 24px)!important}
}

/* V19 specificity guard: kill the old large particle word overlay. */
.work-shot.particle-image::after,
.work-shot.pixel-image::after,
.work-shot.sketch-image::after,
.work-shot.terminal-image::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  display:block!important;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 8px),
    radial-gradient(circle at 15% 18%,rgba(53,242,255,.18),transparent 26%),
    radial-gradient(circle at 85% 82%,rgba(255,79,216,.15),transparent 28%),
    linear-gradient(120deg,transparent 0 44%,rgba(255,255,255,.20) 48%,transparent 52% 100%)!important;
  background-size:auto,auto,auto,240% 100%!important;
  background-position:0 0,0 0,0 0,-120% 0!important;
  mix-blend-mode:screen!important;
  opacity:.25!important;
  pointer-events:none!important;
  animation:workGallerySweepV19 8.5s cubic-bezier(.22,1,.36,1) infinite!important;
  color:transparent!important;
  font-size:0!important;
  letter-spacing:0!important;
  font-family:inherit!important;
}