:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#080808;color:#fff}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:6px}.skip{position:absolute;left:20px;top:-100px}.skip:focus{top:15px;z-index:5;background:#000;padding:10px}header{background:#000;display:flex;align-items:center;justify-content:space-between;padding:32px 38px;gap:32px}.brand{font-size:21px;font-weight:700;letter-spacing:-.6px;white-space:nowrap}nav{display:flex;gap:26px}nav a{font-size:14px;line-height:1.5}nav a:hover,nav a[aria-current]{color:#aaa}.menu-button{display:none;color:white;background:none;border:0;padding:10px}main{padding:20px 38px 60px}.section-title{font-size:14px;font-weight:400;letter-spacing:.06em;margin:12px 0 34px}.works-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}.project-card{display:flex;flex-direction:column-reverse;gap:12px}.caption h3{font-size:14px;font-weight:400;margin:0}.thumbnail{overflow:hidden;background:#151515;aspect-ratio:16/9}.thumbnail img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}.project-card:hover img{transform:scale(1.025)}.project-heading{margin:20px 0 30px}.project-heading h1{font-size:24px;font-weight:400;margin:0 0 22px}.credits{display:flex;flex-wrap:wrap;gap:22px 45px;margin:0}.credits dt{font-size:12px;color:#aaa;text-transform:uppercase;margin-bottom:6px}.credits dd{margin:0;font-size:14px}.project-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:26px;align-items:start}.film{width:100%}.film video{display:block;background:#111;width:100%;aspect-ratio:16/9}.stills{display:flex;flex-direction:column;gap:22px}.stills img{display:block;width:100%;height:auto}.about-copy{max-width:850px;font-size:clamp(20px,3vw,34px);line-height:1.4}.about-copy p{margin:0 0 30px}.contact-details{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:70px}.contact-label{font-size:14px;color:#aaa;margin:0 0 18px}.contact-agency,.contact-email{font-size:clamp(22px,3vw,44px);overflow-wrap:anywhere}.contact-links{display:flex;gap:25px;font-size:16px}button,a{-webkit-tap-highlight-color:transparent}@media(min-width:1600px){header,main{padding-left:60px;padding-right:60px}.works-grid{gap:42px 30px}}@media(max-width:1000px){header{padding:24px;flex-wrap:wrap}nav{gap:20px;width:100%;justify-content:space-between}main{padding:12px 24px 40px}}@media(max-width:600px){header{padding:18px 16px;gap:0}.brand{font-size:18px}.menu-button{display:block}nav{display:none;flex-direction:column;gap:0;margin-top:20px}nav a{padding:13px 0}.menu-open nav{display:flex}main{padding:14px 16px 40px}.works-grid{grid-template-columns:1fr;gap:30px}.project-layout{grid-template-columns:1fr;gap:24px}.stills{gap:16px}.project-heading{margin:10px 0 24px}.project-heading h1{font-size:22px}.credits{gap:20px}.section-title{margin:6px 0 25px}.contact-details{grid-template-columns:1fr;gap:42px;margin-top:35px}.contact-agency,.contact-email{font-size:30px}}@media(prefers-reduced-motion:reduce){.thumbnail img{transition:none}}
.works-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 18px}.project-card{position:relative;gap:0;padding:9px 9px 0;background:#111}.caption{display:flex;align-items:baseline;gap:10px;padding:12px 2px 10px;font-family:'Courier New',monospace}.caption h3{font-size:13px;line-height:1.4}.frame-number{font-size:12px;color:#a7a7a7}.thumbnail img{filter:grayscale(1)}.selected .thumbnail img,.project-card:hover img,.project-card:focus-visible img{filter:grayscale(0)}.gesture{position:absolute;top:2px;left:1px;width:calc(100% - 2px);height:calc(100% - 38px);pointer-events:none;overflow:visible}.gesture path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.86}.commercial .gesture{color:#ee4137}.table-top .gesture{color:#eac64b}.celebrities .gesture{color:#56a56c}.narrative .gesture{color:#aaa}.stills img{filter:grayscale(1)}.editorial-layout{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:start;margin-top:50px}.about-copy{font-size:16px;line-height:1.6;max-width:600px}.about-copy h2{font-size:clamp(26px,3vw,44px);line-height:1.1;font-weight:400;margin:0 0 12px}.role{color:#aaa;font-size:18px}.facts{border-top:1px solid #333;padding-top:22px;margin-top:32px}.facts>div{margin-bottom:22px}.facts dt{color:#aaa;font-family:'Courier New',monospace;font-size:13px;margin-bottom:7px}.facts dd{margin:0;font-size:16px;line-height:1.65;overflow-wrap:anywhere}.missing-photo{width:100%;min-height:420px;background:#101010}.square{aspect-ratio:1;min-height:0}.contact-title{font-size:clamp(32px,5vw,64px);font-weight:400;letter-spacing:-.04em;line-height:1.06;margin:0}.contact-layout{gap:7vw}.social{font-size:14px}.contact-layout .facts{border:0}.about-photo{width:100%;height:auto;filter:grayscale(1)}@media(max-width:1200px){.works-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:800px){.works-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.editorial-layout{gap:30px}.missing-photo{min-height:280px}.square{min-height:0}}@media(max-width:600px){.works-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 10px}.project-card{padding:5px 5px 0}.caption{display:block;padding:9px 0}.caption h3{font-size:12px}.frame-number{display:block;margin-bottom:3px}.gesture{height:calc(100% - 60px)}.editorial-layout{grid-template-columns:1fr;margin-top:25px}.contact-layout{gap:35px}.missing-photo{min-height:0;aspect-ratio:1}.contact-title{font-size:42px}}
.contact-photo{display:block;width:100%;aspect-ratio:1;object-fit:contain}.contact-layout{margin-right:-38px}.project-layout>.film{position:sticky;top:24px}@media(max-width:1000px){.contact-layout{margin-right:-24px}}@media(max-width:600px){.contact-layout{margin-right:-16px}.project-layout>.film{position:static}}
.film iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;background:#111}
header .brand{font-family:'Courier New',monospace;font-weight:400;letter-spacing:.01em}header nav a{font-family:'Courier New',monospace}.vimeo-credits{font-size:14px;line-height:1.5;color:#ddd;max-width:850px}.vimeo-credits p{margin:4px 0}.film-duration{font-family:'Courier New',monospace;font-size:13px;color:#aaa;margin:14px 0 0}.vimeo-original{display:inline-block;margin-top:18px;font-family:'Courier New',monospace;font-size:14px;color:#aaa}.vimeo-original:hover{color:white}.project-card.accent-commercial .gesture{color:#f12c28}.project-card.accent-table-top .gesture{color:#f4ce20}.project-card.accent-celebrities .gesture{color:#8dd633}

/* Pencil marks on portfolio navigation, on every page. */
header nav a{position:relative;isolation:isolate}
header nav a::after{content:none!important}
header nav a[href="/commercial/"],header nav a[href="/table-top/"],header nav a[href="/celebrities/"]{--pencil:#f12c28}
header nav a[href="/table-top/"]{--pencil:#f4ce20}
header nav a[href="/celebrities/"]{--pencil:#8dd633}
header nav a[href="/commercial/"]::before,header nav a[href="/table-top/"]::before,header nav a[href="/celebrities/"]::before{content:'';position:absolute;pointer-events:none;left:-5px;right:-5px;bottom:-6px;height:9px;background:repeating-linear-gradient(-6deg,transparent 0 2px,var(--pencil) 2px 3px,transparent 3px 5px);clip-path:polygon(0 35%,96% 0,100% 27%,8% 68%,97% 53%,92% 100%,0 84%);transform:rotate(-2deg)}
.editorial-layout{align-items:stretch}
.editorial-photo{position:relative;aspect-ratio:3/2;min-width:0}
.editorial-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.contact-layout .editorial-photo{aspect-ratio:1}
.about-copy,.contact-copy{display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.about-copy{font-size:14px;line-height:1.5}
.about-copy h2{font-size:clamp(26px,2.5vw,40px);margin:0 0 8px}
.about-copy p{margin:0 0 12px}
.about-copy .role{font-size:16px}
.about-copy .facts{margin:4px 0 0;padding-top:12px}
.about-copy .facts>div{display:flex;justify-content:space-between;gap:16px;margin-bottom:8px}
.about-copy .facts dd{font-size:14px;line-height:1.5}
.about-copy .vimeo-original,.contact-copy .vimeo-original{margin-top:8px;align-self:flex-start}
.contact-copy .facts{margin-bottom:0}
.contact-copy .social{margin-top:auto}
@media(max-width:600px){.editorial-photo{aspect-ratio:3/2}.editorial-photo img{position:absolute}.about-copy,.contact-copy{gap:12px}.contact-copy .social{margin-top:0}.about-copy p{margin:0}.about-copy .facts{margin-top:8px}}

.editorial-photo{width:100%;min-height:0}

header nav a[href="/narrative/"]{--pencil:#e5e5e5}header nav a[href="/narrative/"]::before{content:"";position:absolute;left:-5px;right:-5px;bottom:-6px;height:9px;pointer-events:none;background:repeating-linear-gradient(-6deg,transparent 0 2px,var(--pencil) 2px 3px,transparent 3px 5px);clip-path:polygon(0 35%,96% 0,100% 27%,8% 68%,97% 53%,92% 100%,0 84%);transform:rotate(-2deg)}.project-card.accent-narrative .gesture{color:#e5e5e5}

.contact-socials{display:flex;gap:22px;align-items:center;margin:0 0 28px}.contact-socials a{display:flex;width:28px;height:28px;align-items:center;justify-content:center}.contact-socials svg{width:26px;height:26px}.contact-socials a:hover{color:#ccc}.contact-socials+.contact-layout{margin-top:30px}.contact-copy .facts>div{margin-bottom:16px}

.contact-copy .contact-socials{margin:18px 0 8px;justify-content:flex-start;flex-shrink:0}.contact-copy .facts{margin-top:18px}.contact-copy .facts dd a[href="tel:+393393348603"]{display:inline-block;margin-top:3px}

.contact-copy{justify-content:flex-start}.contact-copy .contact-socials{margin:8px 0 0;gap:18px}.contact-copy>.facts{margin:36px 0 0;padding:0;border:0}.contact-copy>.contact-location{margin-top:auto;padding-top:28px}.contact-copy>.contact-location>div:last-child{margin-bottom:0}@media(max-width:600px){.contact-copy{gap:0}.contact-copy>.contact-location{margin-top:28px;padding-top:0}}

/* Scanned colored-pencil gestures, preserving the original paper grain. */
.gesture.scan-mark{overflow:hidden;opacity:1}
.gesture.scan-mark image{width:640px;height:360px;image-rendering:auto}
.project-card.accent-narrative .gesture.scan-mark{filter:grayscale(1) brightness(0) invert(1)}

/* The scanned pencil frames extend slightly beyond thumbnail edges. */
.gesture.scan-mark{top:0;left:-4px;width:calc(100% + 8px);overflow:visible}


/* Larger scans: align each pencil gesture to the picture, then let its rough edge reach past the frame. */
.project-card .gesture.scan-mark{
  top:9px;left:9px;width:calc(100% - 18px);height:auto;aspect-ratio:16/9;
  transform:scale(1.16);transform-origin:center center;overflow:visible;z-index:2
}
@media(max-width:600px){.project-card .gesture.scan-mark{top:5px;left:5px;width:calc(100% - 10px)}}

/* Navigation strokes come from Cristiano's scanned pencil sheet. */
header nav a[href="/commercial/"]::before,
header nav a[href="/table-top/"]::before,
header nav a[href="/celebrities/"]::before,
header nav a[href="/narrative/"]::before{
  content:"";position:absolute;pointer-events:none;left:-6px;right:-6px;bottom:-7px;height:15px;
  background-repeat:no-repeat;background-position:center;background-size:100% 100%;clip-path:none;transform:none
}
header nav a[href="/commercial/"]::before{background-image:url("/assets/pencil-scanned/nav-commercial.webp")}
header nav a[href="/table-top/"]::before{background-image:url("/assets/pencil-scanned/nav-tabletop.webp")}
header nav a[href="/celebrities/"]::before{background-image:url("/assets/pencil-scanned/nav-celebrities.webp")}
header nav a[href="/narrative/"]::before{background-image:url("/assets/pencil-scanned/nav-narrative.webp")}

/* Stronger scanned Narrative pencil stroke. */
header nav a[href="/narrative/"]::before{height:19px;bottom:-9px;filter:drop-shadow(0 .65px 0 rgba(255,255,255,.7)) drop-shadow(0 -.65px 0 rgba(255,255,255,.5))}
/* Portrait mobile menu: each stroke follows only its word. */
@media(max-width:600px){
  header nav a{width:max-content;max-width:100%;align-self:flex-start}
  header nav a[href="/commercial/"]::before,
  header nav a[href="/table-top/"]::before,
  header nav a[href="/celebrities/"]::before,
  header nav a[href="/narrative/"]::before{left:0;right:0;bottom:4px}
  header nav a[href="/narrative/"]::before{bottom:2px}
}
