@import url("/cursor.css");
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--paper:#f7f5ef;--ink:#22231f;--accent:#ADD371;--line:#d9d7ce}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:6px}.skip{position:absolute;top:-70px;left:24px;background:var(--paper);padding:12px;z-index:5}.skip:focus{top:12px}header{display:flex;align-items:center;justify-content:space-between;padding:49px 4.1vw 0}.logo{font-family:Manrope,sans-serif;font-size:30px;font-weight:800;letter-spacing:-1.8px;line-height:1}.logo .jam{display:inline-block;transform:rotate(-7deg);margin-left:5px}nav{display:flex;gap:34px}nav a{font-size:14px;padding:8px 0;border-bottom:1px solid transparent}nav a[aria-current=page]{border-color:var(--accent)}nav a:hover{color:var(--accent)}main{padding:0 4.1vw}.work{margin-top:156px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.tile{display:block;position:relative;overflow:hidden;aspect-ratio:1/1;background:#e9e6dc}.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s}.tile:hover img{transform:scale(1.035)}.tile .caption{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:end;gap:12px;padding:17px 20px;background:var(--paper);transform:translateY(102%);transition:transform .25s;font-size:14px}.tile:hover .caption,.tile:focus-visible .caption{transform:translateY(0)}.caption small{font-size:12px;color:#66665e}.gallery-note{display:flex;justify-content:space-between;margin:23px 0 100px;color:#74746c;font-size:12px}.footer{margin:0 4.1vw;padding:26px 0 34px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#65655f}.footer a:hover{color:var(--accent)}.page{margin-top:130px;margin-bottom:110px}.eyebrow{font-size:13px;color:#77776c;margin-bottom:28px}.about-layout,.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:10vw}h1,h2,p{margin-top:0}h1{font-family:Manrope,sans-serif;font-size:clamp(34px,4.1vw,62px);font-weight:500;letter-spacing:-2.3px;line-height:1.13;max-width:760px;margin-bottom:38px}h2{font-size:20px;letter-spacing:-.4px;font-weight:500}.intro{font-size:21px;line-height:1.6;max-width:600px}.body-copy{max-width:580px;color:#5d5e54;line-height:1.8}.studio-space{margin-top:55px;aspect-ratio:4/3;background:#e9e5da;display:flex;align-items:center;justify-content:center;color:#77776c;font-size:14px}.services{margin-top:50px;border-top:1px solid var(--line);padding-top:22px}.services ul{list-style:none;padding:0;columns:2;line-height:2}.contact-form{padding-top:4px}.field{margin-bottom:27px}label{display:block;font-size:14px;margin-bottom:9px}input,textarea{border:0;border-bottom:1px solid #aaa99f;background:transparent;border-radius:0;padding:10px 0;width:100%;color:var(--ink)}textarea{resize:vertical;min-height:110px}button{background:var(--ink);color:var(--paper);border:0;padding:13px 25px;cursor:pointer}button:hover{background:var(--accent)}.form-note{font-size:13px;color:#68695e;max-width:390px;margin-top:20px}.project-head{display:grid;grid-template-columns:1fr 1fr;gap:7vw;margin-bottom:60px}.project-head h1{margin-bottom:20px}.project-info{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);padding-top:18px;font-size:14px}.project-info span{display:block;color:#77776c;font-size:12px;margin-bottom:7px}.project-hero{width:100%;display:block;max-height:850px;object-fit:cover}.project-images{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.project-images img{width:100%;height:100%;aspect-ratio:1;object-fit:cover}.project-images .detail{object-position:30% 70%;transform:scale(1.4)}.detail-wrap{overflow:hidden}.project-bottom{display:flex;justify-content:space-between;gap:30px;padding-top:45px;font-size:14px}.project-bottom small{display:block;color:#78786f;font-size:12px;margin-bottom:8px}.concept{font-size:12px;color:#77776c;margin-top:22px}.contact-email{font-size:18px;border-bottom:1px solid var(--accent)}@media(hover:none){.tile .caption{transform:none;padding:11px 13px}.caption small{display:none}}@media(min-width:1700px){header,main{padding-left:6vw;padding-right:6vw}.footer{margin-left:6vw;margin-right:6vw}.work{margin-top:180px}}@media(max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.work{margin-top:125px}.about-layout,.contact-layout{gap:6vw}h1{letter-spacing:-1.5px}.intro{font-size:19px}}@media(max-width:600px){header{padding:28px 22px 0}.logo{font-size:25px}nav{gap:20px}nav a{font-size:13px}main{padding:0 16px}.work{margin-top:102px}.grid{grid-template-columns:1fr;gap:12px}.gallery-note{margin-bottom:70px;gap:20px}.page{margin-top:85px;margin-bottom:75px;padding:0 8px}.about-layout,.contact-layout,.project-head{grid-template-columns:1fr;gap:36px}.project-head{margin-bottom:32px}.page h1{font-size:39px}.project-images{gap:8px}.footer{margin:0 24px;font-size:12px}.footer span:last-child{max-width:160px;text-align:right}.contact-form{margin-top:15px}.studio-space{margin-top:28px}.gallery-note span:last-child{text-align:right}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.contact-email{overflow-wrap:anywhere}@media(max-width:600px){main.page{padding-left:24px;padding-right:24px}}@media(max-width:360px){header{padding-left:16px;padding-right:16px}nav{gap:14px}.logo{font-size:22px}}
/* Fill Work thumbnails; retain complete compositions in project galleries. */
.tile img{object-fit:cover;object-position:center}.tile .caption{font-size:14px}.tile .caption>span{max-width:68%;line-height:1.3}.caption small{text-align:right}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.project-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}.project-piece{margin:0;min-width:0}.project-piece:first-child,.project-piece.wide{grid-column:1/-1}.project-piece img{display:block;width:100%;height:auto}.project-piece video{display:block;width:100%;height:auto;background:#242020}.project-credit{font-size:14px;color:#626359;border-top:1px solid var(--line);padding-top:17px;margin-top:25px}.animation-toggle{font-size:13px;padding:8px 12px;margin-top:10px}.about-art{margin:0}.about-art img{display:block;width:100%;height:auto}.about-art figcaption{font-size:12px;color:#74746c;margin-top:12px}.project-bottom>a{max-width:36%}.project-bottom>a:last-child{text-align:right}@media(max-width:600px){.project-gallery{gap:12px;grid-template-columns:1fr}.project-piece{grid-column:1/-1}.project-bottom{gap:15px;font-size:13px}.tile .caption{transform:none;padding:11px 13px}.tile .caption>span{max-width:100%}.caption small{display:none}}

.about-portrait img{aspect-ratio:1/1;object-fit:cover;object-position:center}.about-layout .services li{break-inside:avoid}

/* Picnic Jam supplied brand assets and rich black palette. */
:root{--paper:#101112;--ink:#fffce9;--accent:#ADD371;--line:#3c403e;color-scheme:dark}
header{align-items:center}.logo{display:block;line-height:0;flex-shrink:0}.logo img{display:block;width:240px;height:auto}nav{gap:48px;align-items:center}nav a{display:flex;align-items:center;justify-content:center;padding:10px 0;min-height:48px}nav a img{display:block;width:auto;height:27px;max-width:none}nav a:hover img{opacity:.75}
.body-copy,.form-note,.project-credit,.footer{color:#c0c2b9}.eyebrow,.gallery-note,.caption small,.project-info span,.project-bottom small,.about-art figcaption,.concept{color:#a9aea5}.studio-space{background:#1b1e1d;color:#b8bdb4}.tile{background:#1b1e1d}input,textarea{border-bottom-color:#777f75}input::placeholder,textarea::placeholder{color:#a9aea5}button:hover{color:#101112}
@media(max-width:1000px){.logo img{width:210px}nav{gap:36px}nav a img{height:25px}}
@media(max-width:600px){header{flex-wrap:wrap;gap:25px;padding-top:30px}.logo img{width:195px}nav{width:100%;justify-content:space-between;gap:25px}nav a img{height:24px}nav a{min-height:44px}.work{margin-top:80px}}

/* Compensate for the SVG's 5.74% transparent left inset. */
.logo{transform:translateX(-5.74%)}.logo img{width:255px}.work{margin-top:78px}
@media(min-width:1700px){.work{margin-top:86px}}
@media(max-width:1000px){.logo img{width:224px}.work{margin-top:70px}}
@media(max-width:600px){.logo img{width:207px}.work{margin-top:48px}}

/* Final logo and exact sampled accent green. */
:root{--accent:#ADD371}.logo{transform:none}.logo img{width:255px;height:auto}
nav a,nav a[aria-current=page]{border-bottom:0!important;color:var(--ink)}
nav a:hover,nav a:focus-visible,nav a[aria-current=page]{color:var(--accent)}
.nav-glyph{display:block;height:27px;width:calc(27px * var(--nav-ratio));background:currentColor;-webkit-mask:var(--nav-image) center/contain no-repeat;mask:var(--nav-image) center/contain no-repeat}
.gallery-note,.caption small,.eyebrow,.services h2,.project-info span,.project-bottom small{color:var(--accent)}
.contact-email{color:var(--accent);border-bottom:0}.contact-form button{background:var(--accent);color:var(--paper)}.form-note{max-width:none}
.project-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:7vw;row-gap:0;align-items:stretch;margin-bottom:60px}
.project-title,.project-description{min-width:0;padding-bottom:22px}.project-title h1,.project-description p{margin-bottom:0}
.project-info,.project-credit-area{border-top:1px solid var(--line);padding-top:18px;min-width:0}.project-credit{border:0;margin:0;padding:0}
.project-gallery{width:min(100%,1160px);margin-inline:auto;gap:clamp(22px,2.5vw,38px);align-items:start}
.project-piece:first-child,.project-piece.wide{grid-column:1/-1}.project-piece img{width:100%;height:auto;object-fit:contain}
.gallery-open{display:block;padding:0;border:0;background:none;color:inherit;cursor:zoom-in;width:100%;text-align:inherit;line-height:0}.gallery-open:hover{background:none}.gallery-open img{transition:opacity .2s}.gallery-open:hover img{opacity:.9}
.lightbox{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:clamp(16px,2vw,30px);border:0;background:#111312;color:var(--ink);overflow:hidden}.lightbox::backdrop{background:rgba(0,0,0,.9)}.lightbox[open]{display:flex;flex-direction:column}.lightbox-top{display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:14px;min-height:40px}.lightbox-close,.lightbox-prev,.lightbox-next{border:0;background:transparent;color:var(--ink);cursor:pointer}.lightbox-close{padding:8px 0}.lightbox-stage{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:10px;flex:1;min-height:0}.lightbox-image{display:block;max-width:100%;max-height:calc(100dvh - 120px);height:auto;width:auto;object-fit:contain;margin:auto}.lightbox-prev,.lightbox-next{font-size:36px;padding:10px 0;min-height:56px}.lightbox button:hover{background:transparent;color:var(--accent)}
@media(min-width:1100px){.contact-form .form-note{white-space:nowrap}}
@media(max-width:1000px){.logo img{width:224px}.nav-glyph{height:25px;width:calc(25px * var(--nav-ratio))}}
@media(max-width:600px){.logo img{width:207px}.nav-glyph{height:23px;width:calc(23px * var(--nav-ratio))}.project-head{grid-template-columns:1fr;row-gap:0;margin-bottom:38px}.project-title{padding-bottom:12px}.project-description{padding-bottom:18px}.project-info{padding-top:16px}.project-credit-area{border-top:0;padding-top:6px}.project-gallery{gap:22px;grid-template-columns:1fr}.project-piece,.project-piece.wide{grid-column:1/-1}.lightbox{padding:12px}.lightbox-stage{grid-template-columns:35px minmax(0,1fr) 35px;gap:2px}.lightbox-image{max-height:calc(100dvh - 95px)}.lightbox-prev,.lightbox-next{font-size:28px}}
@media(hover:none){.tile .caption small{display:block}}
@media(max-width:600px){.tile .caption>span,.tile .caption small{max-width:48%}.tile .caption small{display:block;line-height:1.25}}

/* Fluid, reusable wrapping for existing and future copy. */
body{text-wrap:pretty}
p{orphans:2;widows:2}
h1,h2,.eyebrow,.gallery-note,.tile .caption,.project-info,.project-bottom,.services li,label,button{text-wrap:balance}

/* Align navigation lettering with the visible lower edge of the stationary logo. */
@media (min-width:601px){nav{transform:translateY(16px)}}
@media (min-width:1001px){nav{transform:translateY(18px)}}


/* Shared portfolio previews and proportionate editorial gallery rows. */
.tile img{object-fit:cover}
.project-gallery{--gallery-gap:clamp(22px,2.5vw,38px);display:grid;grid-template-columns:1fr;gap:var(--gallery-gap);align-items:start}
.gallery-row{display:grid;grid-template-columns:var(--row-columns);gap:var(--gallery-gap);align-items:start;min-width:0}
.project-gallery .gallery-row>.project-piece{grid-column:auto;width:100%;min-width:0}
.gallery-row.solo-square{width:min(100%,560px);justify-self:center}
.project-gallery .gallery-open{aspect-ratio:var(--preview-ratio);overflow:hidden}
.project-gallery .gallery-open img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--crop-position,50% 50%)}
.project-gallery .gallery-video{display:block;width:100%;height:auto;aspect-ratio:var(--preview-ratio);object-fit:cover;object-position:var(--crop-position,50% 50%)}
@media(max-width:600px){.project-gallery{--gallery-gap:22px}.gallery-row{grid-template-columns:1fr}.gallery-row.solo-square{width:100%}}

/* First Work card only: preserve the existing image and caption interactions. */
.first-card-hover{display:none;position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.72);opacity:0;pointer-events:none;transition:opacity .24s ease}
.first-card-hover-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 36px);border:1px solid var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px 18px;text-align:center;color:#fff;font-size:clamp(14px,1.15vw,17px);line-height:1.5;font-weight:500}
.tile--first-hover .caption{z-index:2}
@media(hover:hover) and (pointer:fine){.first-card-hover{display:block}.tile--first-hover:hover .first-card-hover,.tile--first-hover:focus-visible .first-card-hover{opacity:1}}