/* Three independent category columns, based on Meryl's Figma demo. */
.work-overview{padding:110px clamp(22px,3.2vw,64px) 120px;background:#e9e9e5;color:#191919;scroll-margin-top:78px}
.work-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.4vw,48px);max-width:1800px;margin:auto;align-items:start}
.work-category{margin:0 0 38px;min-height:65px}
.work-category h2{margin:0 0 12px;font-size:clamp(19px,1.9vw,34px);font-weight:400;letter-spacing:-.055em;line-height:1.2}
.work-category p{margin:0;color:#77776f;font-size:9px;letter-spacing:.08em}
.work-stack{display:flex;flex-direction:column;gap:58px}
.work-card{display:block;min-width:0;color:inherit;text-decoration:none;outline-offset:8px}
.work-cover{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1.42;background:#c9c9c9;overflow:hidden;transition:background .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.work-card--snap .work-cover{aspect-ratio:1.64}.work-card--arte .work-cover{aspect-ratio:1.32}.work-card--brand .work-cover{aspect-ratio:1.12}.work-card--fashion .work-cover{aspect-ratio:1.3}.work-card--city .work-cover{aspect-ratio:1.5}
.work-cover img{display:block;object-fit:contain;height:auto;flex-shrink:0}
.project-logo.logo-lyra{width:32%}.project-logo.logo-snap{width:53%}.project-logo.logo-brand{width:66%}.project-logo.logo-city{width:38%}
.cover-lockup{display:flex;width:100%;flex-direction:column;align-items:center;gap:28px}
.cover-lockup .arte-logo{width:24%}.cover-lockup .fashion-logo{width:26%}.cover-lockup .fashion-title{max-width:66%;height:auto}
.cover-descriptor{text-align:center;width:90%;line-height:1.5}.cover-descriptor strong{display:block;font-family:'ABC Normal',var(--sans);font-size:clamp(9px,.85vw,15px);font-weight:900}.cover-descriptor small{display:block;font-size:clamp(6px,.52vw,10px);margin-top:2px}
.work-open{position:absolute;right:18px;bottom:14px;color:#bb0058;font-size:25px;opacity:0;transform:translate(-5px,5px);transition:opacity .25s,transform .25s}
.work-card:hover .work-cover,.work-card:focus-visible .work-cover{transform:translateY(-6px);background:#c3c3c3}.work-card:hover .work-open,.work-card:focus-visible .work-open{opacity:1;transform:none}
.work-caption{padding:21px 8px 0;text-align:center}.work-caption h3{margin:0 0 8px;font-size:clamp(17px,1.45vw,25px);font-weight:400;letter-spacing:-.035em;line-height:1.4}.work-caption p{font-size:clamp(10px,.85vw,14px);line-height:1.65;margin:0;color:#686863;text-wrap:balance}
.case-page{background:#e9e9e5;color:#191919}.case-nav{display:flex;justify-content:space-between;align-items:center;padding:28px 4vw;border-bottom:1px solid #19191922;font-size:12px}.case-nav a,.case-footer a{text-decoration:none;color:inherit}.case-nav a:hover,.case-footer a:hover{color:#bb0058}.case-heading{padding:75px 5vw 60px;max-width:1600px;margin:auto}.case-heading p{font-size:12px;color:#777}.case-heading h1{font-size:clamp(34px,5vw,80px);font-weight:400;letter-spacing:-.055em;margin:15px 0 0}.case-artwork{max-width:1600px;margin:auto}.case-artwork>img{display:block;width:100%;height:auto}.case-footer{padding:65px 5vw;display:flex;justify-content:space-between;gap:24px;font-size:14px}.case-pdf{display:block;width:100%;height:88svh;border:0}.pdf-link{display:block;padding:24px;text-align:center;color:inherit}
@media(max-width:1000px) and (min-width:701px){.work-columns{gap:20px}.work-overview{padding-inline:24px}.work-category h2{font-size:20px}.work-category{min-height:80px}.work-caption h3{font-size:17px}.work-caption p{font-size:10px}.cover-lockup{gap:20px}}
@media(max-width:700px){.work-overview{padding:60px 22px 75px}.work-columns{grid-template-columns:1fr;gap:70px}.work-category{min-height:0;margin-bottom:25px;border-top:1px solid #19191925;padding-top:25px}.work-category h2{font-size:29px}.work-category p{font-size:8px}.work-stack{gap:38px}.work-cover{aspect-ratio:1.42}.work-card--brand .work-cover{aspect-ratio:1.35}.work-card--fashion .work-cover{aspect-ratio:1.4}.work-caption h3{font-size:20px}.work-caption p{font-size:12px}.cover-descriptor strong{font-size:11px}.cover-descriptor small{font-size:7px}.work-open{opacity:1;transform:none;font-size:22px}.case-heading{padding:45px 22px}.case-footer{font-size:12px;flex-wrap:wrap}.case-nav{padding:24px 22px}}
@media(prefers-reduced-motion:reduce){.work-cover,.work-open{transition:none}.work-card:hover .work-cover,.work-card:focus-visible .work-cover{transform:none}}
/* Demo 2–6: type-led project playground. */
.about-identity .about-kicker{position:absolute;bottom:100%;margin:0 0 18px}.about-identity h2{margin-top:0}.about-copy{padding-top:5px}
.work-playground{position:relative;isolation:isolate;min-height:100svh;display:grid;place-items:center;padding:180px 24px 150px;background:#121414;color:#fafaf7;overflow:hidden;scroll-margin-top:0}
.work-film,.work-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-2}.work-film{object-fit:cover;opacity:0;filter:brightness(.36) saturate(.7);transition:opacity .65s}.work-playground.has-film .work-film{opacity:1}.work-lines{z-index:-1;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(16.666% - 1px),#ffffff0c calc(16.666% - 1px),#ffffff0c 16.666%);mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent)}
.work-menu{width:min(1120px,95vw);display:flex;flex-direction:column;gap:38px;text-align:center}.work-group{position:relative}.work-group h2{margin:0;font-size:inherit}.work-trigger{font-family:'ABC Normal',var(--sans);font-size:clamp(25px,4.3vw,65px);font-weight:900;letter-spacing:-.055em;line-height:1.15;border:0;border-radius:18px;padding:8px 22px;color:inherit;background:transparent;cursor:pointer;transition:color .25s,background .25s,opacity .3s}.work-subtitle{font-size:clamp(10px,1.05vw,15px);font-weight:300;color:#aaa;margin:14px 0 0;display:inline-block;position:relative}.work-subtitle:after{content:'';position:absolute;left:0;right:0;bottom:-9px;height:2px;background:#ff278b;transform:scaleX(0);transition:transform .35s}.work-menu.has-active .work-group:not(.is-active) .work-trigger,.work-menu.has-active .work-group:not(.is-active) .work-subtitle{opacity:.25}.work-group.is-active{z-index:3}.work-group.is-active .work-trigger{background:#fff;color:#262727}.work-group.is-active .work-subtitle:after{transform:scaleX(1)}
.work-pop{position:absolute;inset:0;pointer-events:none}.project-pop{position:absolute;display:block;width:clamp(150px,18vw,255px);left:calc(50% - 110px);top:-185px;opacity:0;visibility:hidden;transform:translateY(65px) scale(.35) rotate(-18deg);transition:transform .55s cubic-bezier(.16,1.45,.35,1),opacity .18s,visibility .18s;transition-delay:calc(var(--i)*45ms);text-decoration:none;color:#fff;filter:drop-shadow(0 18px 28px #0006);will-change:transform}.project-pop img{width:100%;height:auto;display:block}.project-pop>span{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;margin:9px 9px 0;background:#141414dc;padding:8px 10px;border-radius:7px;white-space:nowrap}.project-pop b{font-size:9px;font-weight:400;color:#ff5ca7}.work-group.is-active .project-pop{opacity:1;visibility:visible;pointer-events:auto;transform:translate(var(--dx,0px),var(--dy,0px)) scale(1) rotate(var(--tilt,0deg))}.project-pop:focus-visible{outline:2px solid #ff278b;outline-offset:7px}.project-pop:hover{z-index:5;filter:drop-shadow(0 25px 32px #0009)}
.pop-lyra{left:12%;top:85px;width:clamp(120px,13vw,185px);--tilt:-4deg}.pop-snap{left:44%;top:-190px;--tilt:3deg}.pop-arte{left:72%;top:95px;width:clamp(140px,16vw,220px);--tilt:2deg}.pop-brand{left:calc(50% - 110px);top:-190px;--tilt:-2deg}.pop-fashion{left:25%;top:-205px;--tilt:-3deg}.pop-city{left:58%;top:-185px;--tilt:3deg}
.work-hint{position:absolute;bottom:45px;left:50%;transform:translateX(-50%);font-size:10px;color:#777;letter-spacing:.1em}.work-hint span{color:#ff278b;margin-left:12px}.work-film-toggle{position:absolute;right:35px;bottom:40px;border:1px solid #ffffff30;color:#bbb;background:#12141480;border-radius:20px;padding:9px 15px;font-size:10px;cursor:pointer}
#project-reader{padding:0;border:0;border-radius:14px;background:#e9e9e5;width:min(1500px,94vw);height:92svh;max-height:92svh;overflow:hidden;color:#171717}#project-reader[open]{display:flex;flex-direction:column;animation:reader-in .35s cubic-bezier(.2,.8,.2,1)}#project-reader::backdrop{background:#000c;backdrop-filter:blur(12px)}.reader-toolbar{display:flex;justify-content:space-between;align-items:center;padding:15px 24px;border-bottom:1px solid #2222;font-size:13px}.reader-close{background:none;border:0;font:inherit;cursor:pointer;padding:8px}#project-reader iframe{width:100%;flex:1;border:0;background:#e9e9e5}@keyframes reader-in{from{opacity:0;transform:translateY(40px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:700px){.work-playground{padding:110px 18px 95px;min-height:900px}.work-menu{gap:35px;width:100%}.work-trigger{font-size:clamp(23px,6vw,39px);padding:8px 10px;border-radius:10px}.work-subtitle{font-size:11px}.work-group.is-active .work-pop{position:relative;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;inset:auto;padding:20px 0 0}.work-group.is-active .project-pop{position:relative;left:auto;top:auto;width:clamp(100px,28vw,170px);transform:none}.project-pop>span{font-size:9px;flex-direction:column;gap:5px;margin:5px 0 0;padding:7px 4px}.project-pop b{font-size:9px}.about-identity .about-kicker{margin-bottom:12px}.work-film-toggle{right:18px;bottom:20px}.work-hint{bottom:60px}#project-reader{width:100vw;max-width:100vw;height:100svh;max-height:100svh;border-radius:0}.reader-toolbar{padding:10px 16px}}
@media(prefers-reduced-motion:reduce){.project-pop,.work-film,.work-trigger,.work-subtitle:after{transition:none}#project-reader[open]{animation:none}.work-film{display:none}}
/* Keep the supplied tilted artwork, clip only the exported outer canvas. */
.project-pop,.project-pop:hover{background:transparent;filter:none}.project-pop>span{display:none}
.pop-lyra img{clip-path:url(#card-clip-lyra)}
.pop-snap img{clip-path:url(#card-clip-snap)}
.pop-arte img{clip-path:url(#card-clip-arte)}
.pop-brand img{clip-path:url(#card-clip-brand)}
.pop-fashion img{clip-path:url(#card-clip-fashion)}
.pop-city img{clip-path:url(#card-clip-city)}
.case-film{max-width:1600px;margin:0 auto 50px;padding:0 5vw}.case-film video{display:block;width:100%;max-height:80svh;aspect-ratio:16/9;object-fit:contain;background:#101111;border-radius:8px}
@media(max-width:700px){.case-film{padding:0 16px;margin-bottom:28px}.case-film video{border-radius:4px}}
/* Centered composition and gently alternating horizontal / vertical lines. */
.work-playground{min-height:100svh;padding:150px 24px;box-sizing:border-box;align-content:center;justify-items:center}
.work-menu{margin:0 auto;align-items:center}.work-group{width:100%;text-align:center}.work-group h2{display:flex;justify-content:center}.work-subtitle{text-align:center}
.work-lines{background:none;overflow:hidden}.work-lines:before,.work-lines:after{content:'';position:absolute;inset:-10%;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(16.666% - 1px),#ffffff10 calc(16.666% - 1px),#ffffff10 16.666%);animation:vertical-flow 18s ease-in-out infinite alternate}.work-lines:after{background:repeating-linear-gradient(0deg,transparent 0,transparent calc(20% - 1px),#ffffff10 calc(20% - 1px),#ffffff10 20%);animation:horizontal-flow 18s ease-in-out infinite alternate}
@keyframes vertical-flow{0%,15%{transform:translateX(-2%);opacity:1}85%,100%{transform:translateX(2%);opacity:.12}}@keyframes horizontal-flow{0%,15%{transform:translateY(3%);opacity:.12}85%,100%{transform:translateY(-3%);opacity:1}}
#project-reader{width:98vw;max-width:1920px;height:96svh;max-height:96svh;border-radius:18px}.reader-toolbar{padding:16px 28px;min-height:70px;flex-shrink:0}#reader-title{font-size:clamp(20px,2vw,30px);letter-spacing:-.035em}.reader-close{display:grid;place-items:center;width:44px;height:44px;border-radius:50%}.reader-close:hover{background:#00000009}
.case-film{max-width:none;padding:0 24px}.case-film video{width:100%;height:auto;max-height:none;aspect-ratio:16/9;object-fit:contain;background:transparent}
@media(max-width:700px){.work-playground{padding:130px 18px;min-height:100svh}.reader-toolbar{padding:10px 16px;min-height:60px}#project-reader{width:100vw;max-width:100vw;height:100svh;max-height:100svh;border-radius:0}.case-film{padding:0 12px}}
@media(prefers-reduced-motion:reduce){.work-lines:before,.work-lines:after{animation:none}.work-lines:after{opacity:.2}}
.work-lines:before{background:repeating-linear-gradient(90deg,transparent 0,transparent calc(16.666% - 1px),#ffffff25 calc(16.666% - 1px),#ffffff25 16.666%);animation-duration:9s}.work-lines:after{background:repeating-linear-gradient(0deg,transparent 0,transparent calc(20% - 1px),#ffffff23 calc(20% - 1px),#ffffff23 20%);animation-duration:9s}
@keyframes vertical-flow{0%,10%{transform:translateX(-7%);opacity:1}90%,100%{transform:translateX(7%);opacity:.18}}@keyframes horizontal-flow{0%,10%{transform:translateY(9%);opacity:.18}90%,100%{transform:translateY(-9%);opacity:1}}
.career-signature .signature-name,.career-signature .signature-subtitle{font-style:italic;letter-spacing:-.055em;clip-path:inset(0 100% 0 0);padding-right:.1em}
.career-signature.is-written .signature-name{animation:autograph-write 1.7s ease-in-out both}.career-signature.is-written .signature-subtitle{animation:autograph-write 2s .95s ease-in-out both}
.autograph-trail{display:block;width:105%;height:auto;position:absolute;top:94%;left:-2%;overflow:visible}.autograph-trail path{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}.is-written .autograph-trail path{animation:autograph-trace 1.15s 2.5s ease-out forwards}
@keyframes autograph-write{to{clip-path:inset(0 -5% 0 0)}}@keyframes autograph-trace{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.work-lines:before,.work-lines:after{animation:none}.career-signature .signature-name,.career-signature .signature-subtitle{clip-path:none;animation:none}.autograph-trail path{stroke-dashoffset:0;animation:none}}
@font-face{font-family:'Meryl Signature';src:url('assets/fonts/signature.ttf') format('truetype');font-display:swap;font-weight:400}
.hero-opening h1 em{font-family:'Meryl Signature',cursive;font-size:1.38em;font-style:normal;font-weight:400;letter-spacing:-.025em;line-height:.7;transform:rotate(-8deg);margin-left:.02em}
.career-signature .signature-name,.career-signature .signature-subtitle{font-family:'Meryl Signature',cursive;font-style:normal;font-weight:400;letter-spacing:-.025em;line-height:.78;padding:.08em .12em .12em}
.career-signature .signature-name{font-size:1.13em}.career-signature .signature-subtitle{font-size:.9em;margin-top:-.07em}
.career-signature.is-written .signature-name{animation:signature-sweep .82s cubic-bezier(.22,.7,.2,1) both}.career-signature.is-written .signature-subtitle{animation:signature-sweep .95s .36s cubic-bezier(.22,.7,.2,1) both}.autograph-trail{top:82%;width:105%;left:-2%}.is-written .autograph-trail path{animation:autograph-trace .6s 1.03s cubic-bezier(.16,.65,.28,1) forwards}
@keyframes signature-sweep{0%{clip-path:inset(0 100% 0 0);transform:translate(-9px,5px) rotate(-2deg)}65%{transform:translate(2px,-1px) rotate(.3deg)}100%{clip-path:inset(0 -5% 0 0);transform:none}}
@media(max-width:700px){.hero-opening h1 em{font-size:1.23em}.autograph-trail{top:85%}}
@media(prefers-reduced-motion:reduce){.career-signature.is-written .signature-name,.career-signature.is-written .signature-subtitle{animation:none;clip-path:none;transform:none}.is-written .autograph-trail path{animation:none;stroke-dashoffset:0}}
/* Actual ink trajectories, revealed in writing order rather than by a text wipe. */
.hero-opening h1 em.pen-design{width:3.05em;height:1.32em;font-size:1em;line-height:1;vertical-align:middle;margin-left:-.02em;transform:rotate(-5deg);overflow:visible}
.signature-drawing{display:block;width:100%;height:auto;overflow:visible}.ink-reveal{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.pen-design .ink-reveal,.pen-signature.is-written .ink-reveal{animation:pen-trace var(--duration) var(--delay) cubic-bezier(.3,.05,.45,.98) both}
.career-signature.pen-signature{width:clamp(340px,43vw,690px);font-size:inherit;line-height:1;transform:translateX(-50%) rotate(-6deg)}
@keyframes pen-trace{0%{opacity:0;stroke-dashoffset:1}1%{opacity:1}100%{opacity:1;stroke-dashoffset:0}}
@media(max-width:760px){.career-signature.pen-signature{width:88vw}.hero-opening h1 em.pen-design{width:2.85em;margin-left:-.06em}}
@media(prefers-reduced-motion:reduce){.pen-design .ink-reveal,.pen-signature .ink-reveal{animation:none;stroke-dashoffset:0;opacity:1}.career-signature.pen-signature{transform:rotate(-6deg);left:auto}}