/* A real collage: every piece is an independent, lightweight layer. */
.layered-hero{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;min-height:0;padding:42px var(--pad) 58px;gap:0 clamp(24px,4vw,80px);overflow:visible}
.layered-hero .hero-copy{width:auto;padding:0;z-index:2;align-self:center}
.layered-hero h1{font-size:min(clamp(70px,10.25vw,177px),18svh);line-height:1.07;letter-spacing:-.045em}
.layered-hero .role{font-size:min(clamp(34px,4.45vw,73px),7.6svh);white-space:nowrap;padding:8px 12px 13px;margin-top:14px}
.layered-hero .role::after{bottom:12px}
.hero-lede{font-size:min(clamp(16px,1.45vw,23px),2.4svh);line-height:1.6;margin-top:min(30px,3svh);max-width:520px}
.layered-hero .hero-actions{gap:28px;margin-top:26px;flex-wrap:wrap}
.layered-hero .paint-button{font-size:19px;gap:18px;min-height:54px;padding:15px 22px}
.hero-price-link{font-size:15px;border-bottom:1px solid currentColor;padding:10px 0;display:inline-flex;gap:12px;align-items:center;min-height:44px}
.hero-price-link:hover{color:var(--purple)}
.layered-hero .hero-art{position:relative;top:auto;right:auto;width:min(100%,calc(100svh - 250px));justify-self:center;margin:0;aspect-ratio:1;z-index:1;transform:none;transition:none;pointer-events:none;container-type:inline-size;color:#171719}
.collage-piece{position:absolute;transform:translate3d(var(--dx,0px),var(--dy,0px),0) rotate(var(--angle,0deg));transition:transform 1s cubic-bezier(.18,.65,.25,1);filter:drop-shadow(0 8px 7px #17171924)}
.piece-entrance,.piece-float{width:100%;height:100%}
.piece-float{animation:paper-breathe var(--duration,9s) ease-in-out var(--delay,0s) infinite;animation-play-state:paused;transform-origin:50% 70%}
.collage-stage[data-visible='true'] .piece-float{animation-play-state:running}
.paper-shape{filter:url(#rip);background-image:var(--grain);background-blend-mode:multiply}
.paper-back{left:16%;top:15%;width:69%;height:76%;--angle:6deg;z-index:0}.paper-back .piece-float{background-color:#ddd7c9}
.tape-piece .paper-shape,.lime-paper .paper-shape{filter:url(#rip-tape)}
.coral-disc .piece-float{filter:url(#rip-soft)}
.grid-paper{left:9%;top:13%;width:70%;height:71%;z-index:1}.grid-paper .piece-float{background-color:#222225;background-image:linear-gradient(#eee9dc60 1px,transparent 1px),linear-gradient(90deg,#eee9dc60 1px,transparent 1px),var(--grain);background-size:5.5% 5.5%,5.5% 5.5%,96px 96px;background-blend-mode:normal}
.purple-paper{left:23%;top:5%;width:29%;height:44%;z-index:2}.purple-paper .piece-float,.bottom-purple .piece-float{background-color:#7740d4}
.lime-paper{left:47%;top:8%;width:26%;height:41%;z-index:2}.lime-paper .piece-float,.tape-piece .piece-float{background-color:#d4ed5c}
.coral-disc{left:69%;top:14%;width:26%;height:29%;z-index:3}.coral-disc .piece-float{border-radius:50%;background:#ff795d;background-image:var(--grain)}
.browser-piece{left:5%;top:25%;width:67%;height:46%;z-index:4}
.browser-paper{background:#eee9dc;border:1px solid #c8c1b3;box-shadow:1px 2px 0 #c8c1b3;border-radius:3px;overflow:hidden;background-image:var(--grain)}
.browser-bar{height:13%;display:flex;align-items:center;gap:1.15cqw;padding:0 2.4cqw;border-bottom:1px solid #b8b1a3}
.browser-bar i{width:1.45cqw;height:1.45cqw;background:#171719;border-radius:50%}.browser-bar span{margin-left:auto;font:400 1.45cqw var(--font-sans);color:#6c6558;letter-spacing:.08em}
.browser-page{height:87%;display:grid;grid-template-columns:43% 57%;overflow:hidden}
.browser-page p{font-size:4.1cqw;line-height:1.18;padding:4.8cqw 0 0 4cqw;transform:rotate(-5deg);color:#37372f}
.browser-page p span{display:inline-block;border-bottom:2px solid #37372f;padding-bottom:1cqw;white-space:nowrap;font-size:3.55cqw}
.layered-hero .browser-page img{height:100%;width:100%;aspect-ratio:auto;object-fit:cover;object-position:34% center;mix-blend-mode:multiply}
.bottom-purple{left:30%;top:65%;width:44%;height:26%;z-index:5}
.tape-piece{left:23%;top:64%;width:38%;height:13%;z-index:7}
.phone-piece{left:62%;top:34%;width:26%;height:48%;z-index:8;filter:drop-shadow(4px 9px 7px #17171945)}
.phone-shell{padding:1.05cqw;border-radius:4.7cqw;background:#171719;box-shadow:0 0 0 .45cqw #f7f3e7,0 0 0 .65cqw #999489;overflow:hidden}
.phone-screen{height:100%;position:relative;overflow:hidden;border-radius:3.5cqw;background:#eee9dc}
.layered-hero .phone-screen img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:65% center;mix-blend-mode:multiply}
.phone-island{position:absolute;top:1.2cqw;left:30%;width:40%;height:2.2cqw;background:#141416;border-radius:3cqw}
.phone-home{position:absolute;bottom:1cqw;left:30%;width:40%;height:.5cqw;background:#eee9dc;border-radius:2px}
.note-piece{left:74%;top:72%;width:23%;height:26%;z-index:10;filter:drop-shadow(2px 7px 4px #17171930)}
.note-paper{background:#f3eedf;background-image:var(--grain);padding:2.2cqw 2.7cqw;font-size:3.3cqw;line-height:1.05;box-shadow:inset 0 0 0 1px #cec7b950}
.note-paper span{display:block;font:400 6cqw Caveat,cursive;line-height:.8;text-align:right;margin-top:.5cqw}
.star-piece{left:89%;top:53%;width:9%;height:9%;z-index:9;filter:none}.star-piece svg{width:100%;height:100%}
.doodle-piece{left:0;top:78%;width:28%;height:17%;z-index:8;filter:none}.doodle-piece svg{width:100%;height:100%}
.hero-motion-toggle{position:absolute;bottom:12px;right:var(--pad);background:transparent;color:var(--muted);font-size:12px;display:flex;align-items:center;gap:7px;min-height:44px;padding:8px 0}
.hero-motion-toggle:hover{color:var(--ink)}
@keyframes paper-breathe{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(.65deg)}}
html[data-motion='off'] .piece-float{animation:none!important;transform:none!important}
html[data-motion='off'] .collage-piece{transition:none;transform:rotate(var(--angle,0deg))}
html[data-motion='off'] .status-dot{animation:none}

/* Six previews first, with the complete portfolio still available. */
.showcase{padding-top:64px}
.showcase-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:26px}
.showcase-heading h2{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(42px,5.7vw,86px);line-height:1.05;letter-spacing:-.015em;margin:14px 0 12px}
.showcase-heading h2 span{color:var(--purple)}
.showcase-heading p{font-size:clamp(16px,1.5vw,22px);line-height:1.5}
.showcase-note{color:var(--purple);font-size:26px;transform:rotate(-8deg);margin:0 25px 10px 0;white-space:nowrap}
.work-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 28px}
.work-tabs[hidden],.project-panel[hidden],.project-card[hidden]{display:none!important}
.work-tabs button{padding:11px 19px;min-height:44px;background:transparent;border:1px solid var(--line);font-size:14px;transition:background .2s,color .2s}
.work-tabs button[aria-selected='true']{background:var(--lime);border-color:var(--lime);color:#171719}
.work-tabs button:hover{border-color:var(--purple)}
.project-group-title{font-family:var(--font-serif);font-weight:400;font-size:30px;margin:20px 0}
.showcase.has-tabs .project-group-title{display:none}
.showcase .project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 26px;margin:0;padding:0;list-style:none}
.showcase .project-card{min-width:0;padding:0;margin:0;background:none;border:0;transform:none;box-shadow:none}
.showcase .project-card>a{display:block;height:100%}
.project-screen{position:relative;aspect-ratio:var(--ar,16/9);background:var(--line);overflow:hidden;border:1px solid var(--line)}
.project-screen img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.project-card a:hover .project-screen img,.project-card a:focus-visible .project-screen img{transform:scale(1.035)}
.project-visit{position:absolute;right:9px;bottom:9px;padding:9px 12px;background:var(--lime);color:#171719;font-size:12px;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s}
.project-card a:hover .project-visit,.project-card a:focus-visible .project-visit{opacity:1;transform:none}
.project-caption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 14px;margin-top:13px}
.showcase .project-caption h3{font-family:var(--font-serif);font-size:clamp(22px,2vw,30px);line-height:1.1;font-weight:400;letter-spacing:-.5px}
.project-caption>span{font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:500}
.showcase .project-card p{font-size:14px;line-height:1.6;color:var(--muted);margin-top:8px;max-width:38em}
.showcase-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px}
.work-count{font-size:13px;color:var(--muted)}
.all-projects{display:flex;gap:18px;align-items:center;min-height:44px;padding:8px 0;background:transparent;border-bottom:1px solid currentColor;font-size:15px}
.all-projects:hover{color:var(--purple)}
.tag-paper{padding-top:clamp(30px,3.4vw,46px)}
.tag-title{min-height:2.08em}
.timeline-note{font-size:13px;line-height:1.6;color:var(--muted);margin:24px 0 0 32px;max-width:460px}
.contact-intro{font-size:clamp(16px,1.6vw,22px);line-height:1.5;max-width:650px;margin-top:20px;position:relative;z-index:2}
.contact-section h2{font-size:clamp(45px,7.6vw,112px);line-height:.98;max-width:1000px}

@media(min-width:1550px){.layered-hero{padding-top:50px;padding-bottom:60px}.layered-hero .hero-art{width:min(100%,calc(100svh - 260px))}}
@media(max-width:1000px){.layered-hero .hero-actions{gap:12px 24px}.layered-hero .hero-art{width:min(100%,calc(100svh - 250px))}.hero-lede{font-size:16px}.layered-hero .paint-button{font-size:17px;padding:14px 19px}.showcase-note{display:none}}
@media(max-width:900px){.showcase .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}}
@media(max-width:740px){
  .layered-hero{display:flex;flex-direction:column;gap:6px;padding:28px var(--pad) 54px;min-height:0}
  .layered-hero .hero-copy{width:100%;padding:0;align-self:stretch}
  .layered-hero h1{font-size:clamp(69px,15vw,112px);line-height:1.08}
  .layered-hero .role{font-size:clamp(31px,7.3vw,52px);margin-top:9px;white-space:nowrap}
  .hero-lede{font-size:16px;line-height:1.6;margin-top:21px;max-width:none}
  .layered-hero .hero-actions{margin-top:21px;gap:16px}.layered-hero .hero-actions .paint-button{font-size:17px;padding:14px 17px;gap:12px}.hero-price-link{font-size:14px;gap:8px}
  .layered-hero .hero-art{position:relative;width:min(100%,530px);margin:4px auto 0;top:auto;right:auto;align-self:center}
  .hero-motion-toggle{bottom:8px}
  .showcase{padding-top:38px}.showcase-heading{margin-bottom:22px}.showcase-heading h2{font-size:clamp(38px,8.5vw,60px)}
  .showcase .project-grid{gap:28px 18px}.showcase .project-caption h3{font-size:24px}.work-tabs{gap:6px}.work-tabs button{padding:10px 13px;font-size:13px}
  .project-caption>span{font-size:10px}.showcase .project-card p{font-size:13px}.tag-paper{padding-top:48px}.tag-title{min-height:0}
  .contact-section h2{font-size:clamp(40px,9.2vw,65px)}.timeline-note{margin-left:0}
}
@media(max-width:540px){.showcase .project-grid{grid-template-columns:minmax(0,1fr)}.showcase .project-card p{font-size:14px}.project-caption>span{font-size:11px}.showcase-foot{align-items:start;flex-wrap:wrap;gap:6px}.work-count{width:100%}.project-visit{opacity:1;transform:none;font-size:11px;padding:7px 10px}}
@media(max-width:620px){.site-header{display:grid;grid-template-columns:1fr auto;gap:0 18px;padding:12px var(--pad) 6px}.site-header .wordmark{font-size:25px;grid-column:1;grid-row:1}.site-header .mode-toggle{grid-column:2;grid-row:1;margin:0;min-width:44px}.site-header .mode-toggle [data-mode-label]{display:inline}.site-header .main-nav{grid-column:1 / -1;grid-row:2;margin:0;justify-content:space-between;gap:12px;font-size:13px}.site-header .main-nav a{min-height:38px;padding:6px 0}.site-header.is-scrolled{padding-top:6px;padding-bottom:3px}}
@media(prefers-reduced-motion:reduce){.piece-float{animation:none!important}.collage-piece,.project-screen img,.project-visit{transition:none!important}.project-card a:hover .project-screen img{transform:none}}