450;500;550;600;650;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--paper:#f7f7f2;--ink:#242622;--muted:#767971;--line:#dddfd6;--lime:#d9f886}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}header,main,footer{max-width:1440px;margin:auto}header{padding:30px 6%;display:flex;align-items:center;justify-content:space-between}.logo{font-size:39px;font-weight:700;letter-spacing:-5px}.logo span{color:#697d43}nav{display:flex;align-items:center;gap:35px;font-size:14px}nav .contact{border:1px solid var(--line);padding:13px 20px;border-radius:30px}.contact span{margin-left:24px}.hero{padding:90px 6% 0}.eyebrow{font-size:11px;letter-spacing:1.6px;font-weight:600;display:flex;align-items:center;gap:9px}.eyebrow i{width:7px;height:7px;border-radius:50%;background:#809d42;box-shadow:0 0 0 4px #e8eddd}h1{font-family:Manrope,sans-serif;font-size:clamp(64px,7.7vw,110px);letter-spacing:-7px;line-height:1.1;font-weight:500;margin:34px 0 32px}em{font-family:Georgia,serif;font-weight:400}.dot{color:#8b9e65}.hero-bottom{display:flex;align-items:end;justify-content:space-between}.hero-bottom p{font-size:17px;color:#6a6e64;line-height:1.7;margin:0}.discover{display:flex;align-items:center;gap:23px;font-size:13px}.discover span{display:grid;place-items:center;width:46px;height:46px;border:1px solid #cbd0bf;border-radius:50%;font-size:20px}.hero-note{font-size:9px;letter-spacing:1.4px;color:#8b8f82;margin-top:70px;padding-bottom:27px;border-bottom:1px solid var(--line)}.work{padding:55px 6% 0}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.section-heading h2{font-size:17px;font-weight:500;margin:0}.section-heading h2 span{font-size:11px;color:#939889;margin-left:16px}.section-heading>span{font-size:12px;color:var(--muted)}.grid{display:grid;grid-template-columns:1fr 1fr;gap:43px 27px}.project{display:block}.image-wrap{overflow:hidden;border-radius:5px;aspect-ratio:4/3;background:#e7e9df;position:relative}.image-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.project:hover img{transform:scale(1.035)}.image-wrap .arrow{position:absolute;right:17px;bottom:17px;width:35px;height:35px;background:#fff;border-radius:50%;display:grid;place-items:center;opacity:0;transform:translateY(6px);transition:.25s}.project:hover .arrow,.project:focus-visible .arrow{opacity:1;transform:none}.project-title{display:flex;align-items:center;justify-content:space-between;margin-top:17px}.project-title h3{font-size:19px;font-weight:500;margin:0}.project-title span{font-size:10px;border:1px solid var(--line);padding:5px 9px;border-radius:20px;color:#73786b}.project p{font-size:13px;color:var(--muted);line-height:1.6;margin:7px 0 0}.experiments{margin:90px 6%;padding:42px;background:#eaece2;border-radius:5px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.experiments h2,.about h2{font-family:Manrope,sans-serif;font-size:38px;font-weight:500;letter-spacing:-1.8px;line-height:1.2}.experiments p{font-size:13px;color:#74786b;line-height:1.8}.text-link{display:inline-block;margin-top:20px;font-size:12px;border-bottom:1px solid #979f87;padding-bottom:6px}.experiment-img img{width:100%;border-radius:3px;display:block}.experiment-img span{font-size:10px;display:block;margin-top:12px}.about{padding:0 6% 85px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:25px}.about h2{margin:0}.about p{font-size:15px;line-height:1.8;color:#73776b;margin:0 0 17px}.experience{margin:30px 0 10px;border-top:1px solid var(--line)}.experience>div{padding:17px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:8px;font-size:11px}.experience strong{font-weight:500}.experience span{color:var(--muted)}.experience span:last-child{text-align:right}.outro{margin:0 6%;padding:55px 0 35px;border-top:1px solid var(--line)}.outro>a{font-family:Manrope,sans-serif;font-size:clamp(44px,6.5vw,90px);letter-spacing:-4px;line-height:1.15;display:block;margin-top:29px;position:relative}.outro>a>span{position:absolute;right:0;top:25px;font-size:70px}.outro-bottom{margin-top:35px;display:flex;justify-content:space-between;font-size:12px}.outro-bottom>span{color:var(--muted)}footer{padding:28px 6% 32px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;color:#767c6d}footer div{display:flex;gap:24px}a:focus-visible{outline:2px solid #738e3d;outline-offset:5px}nav a:hover,.text-link:hover,footer a:hover{color:#7b953f}::selection{background:var(--lime)}
@media(min-width:1500px){h1{font-size:110px}}@media(max-width:700px){header{padding:21px 6%}nav{gap:20px;font-size:12px}nav .contact{padding:9px 13px}.contact span{margin-left:8px}.hero{padding-top:55px}h1{font-size:60px;letter-spacing:-3.7px;margin-top:30px}.hero-bottom{align-items:start;gap:24px;flex-direction:column}.hero-bottom p{font-size:15px}.hero-note{font-size:7px;letter-spacing:.8px;margin-top:40px}.work{padding-top:35px}.section-heading>span{display:none}.grid{grid-template-columns:1fr;gap:30px}.project-title h3{font-size:18px}.image-wrap .arrow{opacity:1;transform:none}.experiments{margin-top:55px;margin-bottom:55px;padding:24px;grid-template-columns:1fr;gap:30px}.experiments h2,.about h2{font-size:32px}.about-grid{grid-template-columns:1fr;gap:25px}.about{padding-bottom:55px}.outro{padding-top:35px}.outro>a{font-size:48px;letter-spacing:-2.5px}.outro>a>span{font-size:40px;top:5px}.outro-bottom{gap:15px;flex-direction:column}footer{flex-wrap:wrap;gap:24px}footer>a{margin-left:auto}footer div{gap:14px}footer>span{width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

header{justify-content:flex-end}.hero h1{margin-top:0}.design{padding-top:85px;padding-bottom:85px}.product-image{display:grid;place-items:center}.product-image img{width:30%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:22%;box-shadow:0 18px 40px #24262214}.product-card:hover img{transform:translateY(-5px) scale(1.035)}.outro{padding-bottom:65px}.outro>a{padding-right:65px;font-size:clamp(40px,5.6vw,78px)}@media(max-width:700px){.hero h1{font-size:clamp(40px,9vw,60px);letter-spacing:-2.7px}.design{padding-top:55px;padding-bottom:55px}.outro>a{font-size:clamp(30px,7vw,48px);padding-right:35px;letter-spacing:-1.7px}.outro>a>span{font-size:32px}.outro{padding-bottom:40px}}

.section-caption{font-size:11px;font-weight:400;color:#939889;margin:8px 0 0;line-height:1.3}
#products{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 28px}
.product-sticker{display:flex;align-items:center;flex-direction:column;text-align:center;padding:4px 8px;justify-self:stretch}
.sticker-stage{position:relative;width:100%;height:105px;display:flex;align-items:flex-start;justify-content:center;perspective:500px}
.sticker-stage img{width:84px;height:84px;object-fit:contain;border-radius:22%;position:relative;z-index:1;border:5px solid #fff;background:#fff;box-shadow:0 1px 1px #24262226,0 3px 4px #24262228,0 8px 12px #24262224;transform:rotate(0deg);transition:transform .25s,box-shadow .25s}

.sticker-shadow{display:none}
.product-sticker:hover img,.product-sticker:focus-visible img{transform:translateY(-1px) rotate(0deg);box-shadow:0 1px 1px #24262226,0 4px 5px #2426222b,0 10px 14px #24262229}
.sticker-name{font-size:12px;line-height:1.4}.sticker-name>span{font-size:10px;color:#92988a;opacity:0;transition:opacity .2s}.product-sticker:hover .sticker-name>span,.product-sticker:focus-visible .sticker-name>span{opacity:1}
@media(min-width:901px){header{padding-top:18px;padding-bottom:14px}.hero{padding-top:20px}.hero h1{font-size:clamp(60px,min(6.7vw,10.5svh),96px);letter-spacing:-5px;margin-bottom:20px}.hero-bottom p{font-size:15px;line-height:1.6}.hero-note{margin-top:22px;padding-bottom:17px}#work{padding-top:24px}#work .section-heading{margin-bottom:16px}#products{gap:12px 28px}.sticker-stage{height:clamp(80px,12svh,105px)}.sticker-stage img{width:clamp(62px,9.5svh,84px);height:clamp(62px,9.5svh,84px)}.design{padding-top:var(--design-peek-space,28px)}.design .section-heading{margin-bottom:20px}}
@media(max-width:900px){#products{gap:24px 12px}.sticker-stage{height:96px}.sticker-stage img{width:72px;height:72px}.hero{padding-top:35px}.hero-note{margin-top:30px}.design{padding-top:45px}}
@media(max-width:500px){#products{gap:24px 4px}.product-sticker{padding:0}.sticker-stage{height:77px}.sticker-stage img{width:56px;height:56px}.sticker-shadow{width:44px;height:9px;bottom:10px}.sticker-name{font-size:10px}.section-caption{font-size:11px}.sticker-stage img{border-width:4px}}
@media(prefers-reduced-motion:reduce){}

/* Masthead and product index */
header{position:absolute;left:50%;top:32px;transform:translateX(-50%);width:100%;padding:0 6%;pointer-events:none;z-index:2}header nav{pointer-events:auto}.hero{padding-top:32px}.hero h1{max-width:calc(100% - 310px);font-size:clamp(52px,5.5vw,78px);letter-spacing:-4px;margin-bottom:24px}.hero-bottom{align-items:center}.hero-note{margin-top:25px}
#products{gap:0 28px;counter-reset:product}.product-entry{position:relative;display:grid;grid-template-columns:18px 54px minmax(0,1fr) 12px;align-items:center;gap:12px;min-height:110px;border-top:1px solid var(--line);padding:18px 0;transition:background .25s}.product-entry:nth-last-child(-n+4){border-bottom:1px solid var(--line)}.product-number{font-size:9px;color:#929889;align-self:start;margin-top:4px;font-variant-numeric:tabular-nums}.product-entry img{width:54px;height:54px;object-fit:contain;border-radius:24%;transform:none;box-shadow:0 2px 3px #24262213;transition:transform .25s}.product-info{display:flex;flex-direction:column;gap:6px;min-width:0}.product-info strong{font-size:14px;font-weight:500;letter-spacing:-.3px}.product-info>span{font-size:10px;color:#929889;line-height:1.35}.entry-arrow{font-size:14px;color:#929889;transition:transform .25s,color .25s}.product-entry::before{content:"";position:absolute;inset:8px -9px;border-radius:8px;background:var(--product-tint);opacity:0;z-index:-1;transition:opacity .25s}.product-entry:hover::before,.product-entry:focus-visible::before{opacity:.6}.product-entry:hover img{transform:translateY(-2px)}.product-entry:hover .entry-arrow{transform:translate(2px,-2px);color:var(--ink)}
@media(min-width:901px){.hero{padding-top:32px}.hero h1{font-size:clamp(52px,5.5vw,78px);letter-spacing:-4px}.hero-note{margin-top:25px}#products{gap:0 28px}}
@media(min-width:901px) and (max-width:1150px){header nav{gap:22px}.hero h1{max-width:calc(100% - 275px);font-size:56px}#products{gap:0 18px}.product-entry{grid-template-columns:14px 44px minmax(0,1fr) 10px;gap:8px}.product-entry img{width:44px;height:44px}.product-info strong{font-size:13px}}
@media(max-width:900px){header{top:25px}.hero{padding-top:95px}.hero h1{max-width:none;font-size:clamp(40px,7.5vw,66px);letter-spacing:-3px}#products{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 25px}.product-entry:nth-last-child(-n+4){border-bottom:0}.product-entry:nth-last-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:500px){.product-entry{grid-template-columns:12px 40px minmax(0,1fr) 10px;gap:8px;min-height:94px}.product-entry img{width:40px;height:40px}.product-info strong{font-size:12px}.product-info>span{font-size:9px}.product-number{font-size:8px}#products{gap:0 16px}.hero h1{font-size:clamp(36px,8.8vw,48px)}}


/* Warm print-era details meet translucent, early desktop glass. */
:root{--paper:#f5f0e5;--ink:#342f29;--muted:#857b6d;--line:#d9cebd}
body{background-color:var(--paper);background-image:radial-gradient(#78634812 .55px,transparent .7px);background-size:4px 4px}
.hero-note,.section-caption,.product-number,.product-info>span,.eyebrow,footer{font-family:"Courier New",Courier,monospace}.hero-note{letter-spacing:1.3px;color:#8b7458}.section-caption{color:#927e64}.product-number{color:#a58b69}.section-heading h2{font-weight:500;letter-spacing:-.5px}.dot{color:#af704a}.hero-note,.outro{border-color:#cbbb9f}.product-entry{border-top-style:dashed}.product-entry:nth-last-child(-n+4){border-bottom-style:dashed}.project-title>span{border-color:#d0c1ab;background:#e8dfcf45}.contact{background:linear-gradient(#fffaf099,#e8dcc970);box-shadow:inset 0 1px 0 #ffffffb3}
.cartoon-sticker{position:relative;display:block;width:54px;height:54px;padding:5px;border:1px solid #ffffffed;border-radius:28%;background:linear-gradient(145deg,#ffffffd9 0%,#ffffff60 44%,#d5e5e669 75%,#ffffffc7 100%);box-shadow:inset 0 1px 1px #fff,inset 1px 0 1px #fff9,inset 0 -2px 3px #87949240,0 2px 2px #554b3924,0 6px 10px #554b391c,0 0 0 1px #9a998a45;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transform:rotate(0deg);transition:transform .2s,box-shadow .2s}
.cartoon-sticker::before{content:"";position:absolute;inset:2px 3px 49%;z-index:2;border-radius:13px 13px 40% 40%;background:linear-gradient(180deg,#ffffffab,#ffffff10);border-top:1px solid #fffc;pointer-events:none}
.cartoon-sticker::after{content:"";position:absolute;inset:1px;border:1px solid #ffffff55;border-radius:26%;pointer-events:none;box-shadow:inset 0 0 3px #fff8}
.product-entry .cartoon-sticker img{display:block;width:100%;height:100%;border-radius:22%;box-shadow:0 1px 2px #182b2a26;filter:saturate(1.12) contrast(1.03);transform:none}
.product-entry:hover .cartoon-sticker,.product-entry:focus-visible .cartoon-sticker{transform:translateY(-2px);box-shadow:inset 0 1px 2px #fff,inset 0 -2px 3px #87949240,0 3px 3px #554b3924,0 9px 14px #554b3924,0 0 0 1px #a4aaa280}.product-entry:hover .cartoon-sticker img{transform:none}.product-entry:active .cartoon-sticker{transform:translateY(1px);box-shadow:inset 0 1px 3px #8c918a44,0 1px 2px #554b3926}
@media(min-width:901px) and (max-width:1150px){.cartoon-sticker{width:44px;height:44px;padding:4px}}
@media(max-width:900px){.product-entry:nth-last-child(-n+2){border-bottom-style:dashed}}
@media(max-width:500px){.cartoon-sticker{width:40px;height:40px;padding:4px}.hero-note{letter-spacing:.7px}}

.dot{color:#000}

/* Real rendered glass sculptures and caustic shadows, with captions below. */
#products{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 28px}
.glass-product{display:flex;flex-direction:column;align-items:center;gap:0;border:0!important;padding:0 0 5px;min-height:0;position:relative}.glass-product::before{display:none}.glass-product .product-number{position:absolute;left:6px;top:8px;font-size:9px;margin:0}.glass-symbol{display:block;width:134px;max-width:100%;aspect-ratio:1;background-image:url('assets/glass-brand-logos.png');background-size:400% 200%;background-position:var(--sprite-x) var(--sprite-y);background-repeat:no-repeat;transition:transform .3s}.glass-product:hover .glass-symbol,.glass-product:focus-visible .glass-symbol{transform:translateY(-3px)}.glass-product .product-info{align-items:center;text-align:center;gap:4px;margin-top:4px}.glass-product .product-info strong{font-size:13px}.glass-product .product-info>span{font-size:9px}.glass-product .entry-arrow{position:absolute;right:5px;top:8px;font-size:12px;opacity:0}.glass-product:hover .entry-arrow,.glass-product:focus-visible .entry-arrow{opacity:1}
@media(min-width:901px){#products{gap:14px 28px}.glass-symbol{width:clamp(100px,14svh,134px)}}
@media(max-width:900px){#products{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 15px}.glass-symbol{width:120px}.glass-product .product-info strong{font-size:12px}}
@media(max-width:600px){#products{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 22px}.glass-symbol{width:140px}.glass-product .product-info strong{font-size:13px}.glass-product .entry-arrow{opacity:1}}

/* Brand glass artwork; monochrome interface typography. */
body{--ink:#000;--muted:#000}
body,body *{color:#000!important}
nav .contact{background:transparent;box-shadow:none;border:1px solid var(--line)}

/* Individual artwork files keep neighboring logos and clipped shadows out. */
.glass-product img.glass-symbol{display:block;width:184px;height:184px;max-width:100%;aspect-ratio:1;object-fit:contain;border-radius:0;box-shadow:none;filter:none;background:none;transform:none;mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 92%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 92%,transparent)}
.glass-product:hover img.glass-symbol,.glass-product:focus-visible img.glass-symbol{transform:translateY(-3px)}
.section-caption{font-size:14px;line-height:1.5}
.glass-product .product-number{font-size:13px;top:12px;line-height:1.5}
.glass-product .product-info strong{font-size:16px;line-height:1.4}
.glass-product .product-info>span{font-size:14px;line-height:1.5}
.glass-product .product-info{margin-top:0;gap:3px}
.project-title>span{background:transparent;border:1px solid var(--line);box-shadow:none}
@media(min-width:901px){.glass-product img.glass-symbol{width:clamp(150px,20svh,184px);height:clamp(150px,20svh,184px)}}
@media(max-width:900px){.glass-product img.glass-symbol{width:150px;height:150px}.glass-product .product-info strong{font-size:15px}.glass-product .product-info>span{font-size:13px}}
@media(max-width:600px){.glass-product img.glass-symbol{width:170px;height:170px}.glass-product .product-info strong{font-size:16px}.glass-product .product-info>span{font-size:14px}.section-caption{font-size:14px}.glass-product .product-number{font-size:13px}}

/* One native sans-serif family across the whole interface. */
:root{--site-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif}
body,body *{font-family:var(--site-font)!important}
.hero{border-bottom:1px solid var(--line);padding-bottom:25px;margin:0 6%;padding-left:0;padding-right:0}
.section-heading h2{font-size:19px;font-weight:400;letter-spacing:-.45px;line-height:1.35}
.section-heading h2 strong{font-weight:700}
.hero-bottom p{font-weight:400;letter-spacing:-.15px}
/* Clear glass sticker sleeves: original artwork stays intact under the surface. */
#projects .project{--glass-tint:139,165,215}
#projects .project:nth-child(3n+1){--glass-tint:175,141,192}
#projects .project:nth-child(3n+2){--glass-tint:124,177,199}
#projects .image-wrap{isolation:isolate;overflow:hidden;border-radius:30px;padding:10px;border:1px solid #ffffffed;background:linear-gradient(135deg,#ffffffc9,#ffffff3d 43%,rgba(var(--glass-tint),.16) 80%,#ffffffbf);box-shadow:inset 0 2px 2px #fff,inset 0 -2px 4px #b4c5cf70,0 2px 3px #20282e1a,0 13px 22px #333b431a,9px 16px 28px rgba(var(--glass-tint),.17);transform:translateZ(0)}
#projects .image-wrap img{display:block;border-radius:21px;width:100%;height:100%;object-fit:cover;box-shadow:inset 0 0 0 1px #fff9;transition:transform .5s}
#projects .image-wrap::before{content:"";position:absolute;inset:2px;z-index:2;border-radius:28px;pointer-events:none;border:1px solid #fff9;background:linear-gradient(145deg,#ffffff6b 0%,#ffffff12 25%,transparent 43%,#ffffff33 46%,transparent 51%,transparent 77%,#ffffff40 100%);box-shadow:inset 1px 2px 2px #ffffffba,inset -1px -2px 3px #bed4df8c}
.glass-peel{position:absolute;left:10px;bottom:10px;width:64px;height:64px;z-index:3;pointer-events:none;clip-path:polygon(0 0,100% 100%,0 100%);border-radius:0 0 0 20px;background:linear-gradient(45deg,#ffffffd9 5%,#e2eef5ed 39%,#fffffffa 49%,#bbccdba8 55%,#ffffff24 85%);filter:drop-shadow(3px -3px 3px #30495d3b)}
#projects .image-wrap .arrow{z-index:4;background:#ffffffd9;border:1px solid #fff;box-shadow:0 2px 6px #1c28332b;backdrop-filter:blur(8px)}
#projects .project:hover .image-wrap img{transform:scale(1.025)}
#projects .project-title{margin-top:20px}
#projects .project-title>span{background:transparent}
@media(max-width:700px){.section-heading h2{font-size:19px}#projects .image-wrap{border-radius:24px;padding:8px}#projects .image-wrap img{border-radius:17px}#projects .image-wrap::before{border-radius:22px}.glass-peel{width:50px;height:50px;left:8px;bottom:8px;border-bottom-left-radius:16px}}

/* A quieter introduction and secondary text hierarchy. */
.hero-preface{font-size:14px;line-height:1.5;margin:0 0 15px;color:#777!important;font-weight:400;letter-spacing:0}
.headline-line{display:block}.headline-and{display:block;font-size:14px;line-height:1.5;letter-spacing:0;font-weight:400;margin:8px 0;color:#777!important}
.hero h1 em{font-weight:300;font-style:italic}
.glass-product .product-info>span,.project p,.project-title>span{color:#777!important}
@media(max-width:700px){.hero-preface,.headline-and{font-size:12px}.hero-preface{margin-bottom:13px}.headline-and{margin:7px 0}}

/* Closer headline connectors. */
.hero-preface{margin-bottom:2px}.product-headline{display:flex;align-items:baseline;gap:12px}.product-headline .headline-and{display:inline;margin:0;font-size:14px;line-height:1;font-weight:400;letter-spacing:0}.hero h1{line-height:1.08}.headline-line+.headline-line{margin-top:2px}
/* Sparkles ramp up on hover and fade away when the pointer leaves. */
.glass-art{position:relative;display:block;width:184px;max-width:100%;aspect-ratio:1;isolation:isolate}
.glass-product .glass-art img.glass-symbol{width:100%;height:100%}
.glitter{position:absolute;inset:16% 20% 24% 19%;pointer-events:none;opacity:0;transform:scale(.94);transition:opacity .85s ease,transform .85s ease;z-index:2}
.glass-product:hover .glitter,.glass-product:focus-visible .glitter{opacity:1;transform:scale(1)}
.glitter i{position:absolute;width:12px;height:12px;left:calc(7% + var(--n)*12%);top:22%;background:radial-gradient(circle,#fff 0 8%,#ffffffbd 12%,transparent 40%);filter:drop-shadow(0 0 3px #fff);animation:glitter-twinkle 2.3s ease-in-out infinite;animation-delay:calc(var(--n)*-.33s)}
.glitter i::before,.glitter i::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(90deg,transparent,#fff,transparent)}.glitter i::before{width:100%;height:1px}.glitter i::after{width:1px;height:100%;background:linear-gradient(transparent,#fff,transparent)}
.glitter i:nth-child(2n){top:65%;width:9px;height:9px}.glitter i:nth-child(3n){top:43%;width:15px;height:15px}.glitter i:nth-child(4n){top:9%}
@keyframes glitter-twinkle{0%,100%{opacity:.15;transform:scale(.5)}45%{opacity:1;transform:scale(1.15)}70%{opacity:.35;transform:scale(.75)}}
.glass-product:hover .glass-art img.glass-symbol,.glass-product:focus-visible .glass-art img.glass-symbol{transform:translateY(-3px) scale(1.035)}
/* Artwork cards resting on tinted glass trays; no diagonal glare or peeled corner. */
#projects .image-wrap{padding:15px;border-radius:25px;border:1px solid rgba(var(--tray-rgb),.3);background:linear-gradient(180deg,rgba(var(--tray-rgb),.22),rgba(var(--tray-rgb),.48));box-shadow:inset 0 2px 2px #ffffffd9,inset 2px 0 3px #ffffff80,inset -2px -3px 4px rgba(var(--tray-rgb),.7),0 3px 2px rgba(var(--tray-rgb),.28),0 11px 19px #2d254522,5px 15px 23px rgba(var(--tray-rgb),.2);overflow:visible}
#projects .image-wrap img{border-radius:11px;box-shadow:0 2px 3px #13102833,0 5px 10px #15112430;position:relative;z-index:1}
#projects .image-wrap::before{inset:2px;border-radius:23px;background:none;border:1px solid #ffffff6b;box-shadow:inset 0 1px 2px #fff9;z-index:0}
#projects .image-wrap::after{content:"";position:absolute;left:16px;right:16px;bottom:2px;height:3px;border-radius:50%;background:#ffffff7a;box-shadow:0 1px 2px rgba(var(--tray-rgb),.6);pointer-events:none}
#projects .project:hover .image-wrap img{transform:translateY(-2px)}
@media(min-width:901px){.glass-art{width:clamp(150px,20svh,184px)}}
@media(max-width:900px){.glass-art{width:150px}}
@media(max-width:700px){.hero-preface{margin-bottom:2px}.product-headline{gap:8px}.product-headline .headline-and{font-size:12px}#projects .image-wrap{padding:12px;border-radius:21px}#projects .image-wrap img{border-radius:9px}#projects .image-wrap::before{border-radius:19px}}
@media(max-width:600px){.glass-art{width:170px}}
@media(prefers-reduced-motion:reduce){.glitter i{animation:none;opacity:.7}.glass-product:hover .glass-art img.glass-symbol{transform:none}}

@font-face{font-family:"Vercetti";src:url("assets/fonts/Vercetti-Regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
:root{--site-font:"Vercetti","Helvetica Neue",Helvetica,Arial,sans-serif;--paper:#faf9f6;--line:#deddd7}
body{background-color:var(--paper);background-image:radial-gradient(#78634805 .5px,transparent .7px)}
/* Optical glass: refractive colored perimeter, sharp specular light and a thick lower lip. */
#projects .image-wrap{padding:20px;border-radius:28px;border:1px solid rgba(var(--tray-rgb),.55);background:radial-gradient(ellipse at 12% 0%,#fff9,transparent 44%),radial-gradient(ellipse at 96% 90%,rgba(var(--tray-rgb),.8),transparent 47%),linear-gradient(165deg,rgba(var(--tray-rgb),.18),rgba(var(--tray-rgb),.5) 64%,rgba(var(--tray-rgb),.75));box-shadow:inset 0 2px 1px #fffffff0,inset 2px 0 2px #ffffffb3,inset -2px -3px 2px rgba(var(--tray-rgb),.85),inset 0 -7px 8px rgba(var(--tray-rgb),.4),0 2px 1px rgba(var(--tray-rgb),.7),0 5px 2px rgba(var(--tray-rgb),.45),0 11px 17px #18202a24,9px 19px 27px rgba(var(--tray-rgb),.22)}
#projects .image-wrap::before{inset:3px;z-index:2;padding:5px;border:0;border-radius:25px;background:conic-gradient(from 12deg,#ffffff18 0deg,#fffffff5 27deg,rgba(var(--tray-rgb),.75) 55deg,#ffffff12 88deg,#ffffffa8 122deg,#fff 145deg,rgba(var(--tray-rgb),.85) 176deg,#ffffff2b 206deg,#ffffffd6 257deg,#fff 278deg,rgba(var(--tray-rgb),.6) 315deg,#ffffff18 360deg);box-shadow:none;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
#projects .image-wrap::after{left:9%;right:9%;bottom:4px;height:4px;border-radius:50%;background:linear-gradient(90deg,transparent,#ffffff9c 14%,#fff 24%,#ffffff26 39%,rgba(var(--tray-rgb),.55) 60%,#ffffffed 86%,transparent);box-shadow:0 1px 1px rgba(var(--tray-rgb),.9),0 -1px 2px #ffffffa8}
#projects .image-wrap img{border:1px solid #ffffff9c;box-shadow:0 1px 1px #fff6,0 3px 4px #1c163a36,0 7px 12px #1c163a30;transform:translateY(-1px)}
@media(max-width:700px){#projects .image-wrap{padding:15px;border-radius:24px}#projects .image-wrap::before{border-radius:21px;padding:4px}}

@font-face{font-family:"Apfel Grotezk";src:url("assets/fonts/ApfelGrotezk-Regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Apfel Grotezk";src:url("assets/fonts/ApfelGrotezk-Mittel.woff2") format("woff2");font-style:normal;font-weight:500 600;font-display:swap}
@font-face{font-family:"Apfel Grotezk";src:url("assets/fonts/ApfelGrotezk-Fett.woff2") format("woff2");font-style:normal;font-weight:700 900;font-display:swap}
:root{--site-font:"Apfel Grotezk","Helvetica Neue",Helvetica,Arial,sans-serif}
header nav{gap:22px}.coffee-link{display:flex;align-items:center;flex:none}.coffee-link img{display:block;height:41px;width:auto;max-width:145px}.hero h1{font-size:clamp(39px,4.125vw,58.5px);letter-spacing:-2.8px;max-width:calc(100% - 420px)}.hero-preface{font-size:10.5px}.product-headline .headline-and{font-size:10.5px;gap:9px}
.glass-product .product-info>span,.project-title>span{text-transform:capitalize}
/* Rendered optical glass replaces the CSS-only tray. */
#projects .image-wrap{padding:0;border:0;border-radius:0;box-shadow:none;background:none;overflow:visible;isolation:isolate}
#projects .image-wrap::before{content:"";position:absolute;inset:0;z-index:0;padding:0;border:0;border-radius:0;box-shadow:none;background:url('assets/optical-glass-tray.png') center/100% 100% no-repeat;filter:hue-rotate(var(--tray-hue)) saturate(1.12) contrast(1.06);mask:none;-webkit-mask:none;pointer-events:none}
#projects .image-wrap::after{display:none}
#projects .image-wrap img{position:absolute;left:11%;top:18%;width:75%;height:61%;object-fit:cover;border-radius:9px;border:1px solid #ffffffc2;box-shadow:0 1px 1px #ffffff80,0 4px 5px #17142540,0 8px 13px #17142540;transform:translateY(0);z-index:1}
#projects .project:hover .image-wrap img{transform:translateY(-3px)}
#projects .image-wrap .arrow{right:13%;bottom:23%;z-index:3}
@media(min-width:901px) and (max-width:1150px){header nav{gap:15px}.coffee-link img{height:35px;max-width:125px}nav .contact{padding:10px 14px}.hero h1{font-size:42px;max-width:calc(100% - 375px)}}
@media(max-width:900px){.hero{padding-top:95px}.hero h1{font-size:clamp(30px,5.625vw,49.5px);max-width:none;letter-spacing:-2px}}
@media(max-width:700px){header nav{gap:13px}.coffee-link img{height:32px;max-width:116px}.hero-preface,.product-headline .headline-and{font-size:9px}.hero h1{font-size:clamp(27px,6.6vw,36px);letter-spacing:-1.5px}#projects .image-wrap img{border-radius:6px}}
@media(max-width:390px){header nav{gap:10px;font-size:11px}nav .contact{padding:8px 10px}.contact span{margin-left:3px}.coffee-link img{height:29px;max-width:105px}}

@font-face{font-family:"Departure Mono";src:url("assets/fonts/DepartureMono-Regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
:root{--site-font:"Departure Mono",monospace;--caption-size:13px}
body{font-kerning:normal}.hero h1{letter-spacing:-2px}.section-heading h2{font-size:22px;letter-spacing:-1px}.hero-preface,.product-headline .headline-and{letter-spacing:0}
#work .section-heading{margin-bottom:0}#work{padding-top:20px}
.glass-art{--art-size:184px;width:var(--art-size);height:calc(var(--art-size)*.84);max-width:100%;aspect-ratio:auto}
.glass-product .glass-art img.glass-symbol{position:absolute;top:calc(var(--art-size)*-.13);left:0;width:100%;height:var(--art-size)}
.glass-product .product-info{margin-top:2px;gap:3px}.glass-product .product-info strong{line-height:1.3}.glass-product .product-info>span{line-height:1.4}
.project p,.project-title>span,.glass-product .product-info>span,footer,footer a{font-size:var(--caption-size)}
.project-title{gap:12px;flex-wrap:wrap}.project-title>span{max-width:100%;line-height:1.4}.project p{line-height:1.6}footer{gap:20px;flex-wrap:wrap}footer div{flex-wrap:wrap}
@media(min-width:901px){.glass-art{--art-size:clamp(150px,20svh,184px);width:var(--art-size)}#products{row-gap:18px}}
@media(max-width:900px){.glass-art{--art-size:150px;width:var(--art-size)}header nav{gap:14px}.hero h1{font-size:clamp(27px,5.2vw,44px)}}
@media(max-width:600px){.glass-art{--art-size:170px;width:var(--art-size)}#products{row-gap:18px}.glass-product .product-info strong{font-size:15px}}
@media(max-width:500px){header nav{gap:10px;font-size:11px}.coffee-link img{height:29px;max-width:105px}nav .contact{padding:8px 9px}.contact span{margin-left:3px}.section-heading h2{font-size:19px}.hero h1{font-size:clamp(25px,6.2vw,33px);letter-spacing:-1.3px}}

/* Transparent phone cutouts share the glass scene instead of a separate thumbnail background. */
#projects .image-wrap img{left:10.5%;top:16%;width:76%;height:64%;object-fit:cover;object-position:center;border:0;border-radius:8px;background:transparent;box-shadow:none;filter:drop-shadow(3px 5px 4px #21162e40);transform:translateY(0)}
#projects .project:hover .image-wrap img{transform:translateY(-2px)}
@media(max-width:700px){#projects .image-wrap img{border-radius:6px}}

/* Complete individually rendered sticker scenes preserve the approved composition. */
#projects .image-wrap{aspect-ratio:1;display:block;position:relative;padding:0;border:0;border-radius:16px;overflow:hidden;background:transparent;box-shadow:none;isolation:isolate}
#projects .image-wrap::before,#projects .image-wrap::after{display:none;content:none}
#projects .image-wrap img{position:static;display:block;inset:auto;width:100%;height:100%;object-fit:contain;object-position:center;border:0;border-radius:0;background:none;box-shadow:none;filter:none;transform:none;transition:transform .45s}
#projects .project:hover .image-wrap img{transform:scale(1.015)}
#projects .image-wrap .arrow{right:16px;bottom:16px}
@media(max-width:700px){#projects .image-wrap{border-radius:12px}#projects .image-wrap img{border-radius:0}}

/* Keep the introduction on the same left axis at every breakpoint. */
.hero .hero-bottom{display:block;justify-content:flex-start;align-items:flex-start;width:100%;text-align:left}
.hero .hero-bottom>p{display:block;width:100%;margin:0;text-align:left;align-self:flex-start}
#projects .image-wrap{background:transparent;overflow:visible;border-radius:0}
@media(max-width:700px){#projects .image-wrap{border-radius:0}}

/* A lighter bone-white surface and consistent section rhythm. */
:root{--paper:#fdfcf9;--heading-grid-gap:20px}
body{background-color:var(--paper);background-image:none}
.headline-keyword{font-style:normal;font-weight:400}
#work .section-heading,#design .section-heading{margin-bottom:var(--heading-grid-gap)}
#projects .design-glitter{inset:10% 12% 12%;z-index:3;pointer-events:none;opacity:0;transform:scale(.94);transition:opacity .85s ease,transform .85s ease}
#projects .design-glitter i{width:17px;height:17px;filter:drop-shadow(0 0 5px #fff)}
#projects .design-glitter i:nth-child(2n){width:11px;height:11px}
#projects .design-glitter i:nth-child(3n){width:20px;height:20px}
@media(hover:hover){#projects .project:hover .design-glitter{opacity:1;transform:scale(1)}}
#projects .project:focus-visible .design-glitter{opacity:1;transform:scale(1)}

/* Version 2: independent optical-glass cubes gently levitate in place. */
#products .glass-art{animation:cube-levitate var(--float-duration,6s) ease-in-out infinite;animation-delay:var(--float-delay,0s);will-change:transform}
#products .glass-art img.glass-symbol{mask:none;-webkit-mask:none;filter:none}
@keyframes cube-levitate{0%,100%{transform:translateY(3px)}50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){#products .glass-art{animation:none;will-change:auto}}

/* Version 3: glass candies scattered on paper, resting until selected. */
#products.candy-scatter{display:block;position:relative;isolation:isolate;width:100%;height:clamp(320px,33vw,445px);margin:0;padding:0;background:none;border:0;box-shadow:none;overflow:visible}
#products .candy-item{display:block;position:absolute;left:var(--candy-x);top:var(--candy-y);width:clamp(140px,19vw,230px);height:auto;aspect-ratio:1;min-height:0;padding:0;border:0;transform:translate(-50%,-50%);z-index:1;outline-offset:-24px;isolation:isolate}
#products .candy-item:hover,#products .candy-item:focus-visible{z-index:10}
#products .candy-item .glass-art{position:relative;display:block;width:100%;height:100%;max-width:none;aspect-ratio:1;animation:none;will-change:auto;transform:rotate(var(--candy-turn));transition:transform .45s cubic-bezier(.2,.75,.25,1),filter .45s;filter:none}
#products .candy-item .glass-art img.glass-symbol{position:static;display:block;width:100%;height:100%;max-width:none;object-fit:contain;border:0;border-radius:0;box-shadow:none;mask:none;-webkit-mask:none;transform:none;filter:none}
#products .candy-item.original-cube .glass-art::before{content:"";position:absolute;left:27%;right:24%;bottom:19%;height:13%;background:#3e24242b;border-radius:50%;filter:blur(9px);z-index:-1;transform:rotate(calc(-1 * var(--candy-turn)));transition:opacity .45s}
#products .candy-item:hover .glass-art,#products .candy-item:focus-visible .glass-art{transform:translate(var(--lift-x),-17px) rotate(var(--candy-turn)) scale(1.12);filter:drop-shadow(6px 16px 8px #2b202025)}
#products .candy-item:hover .glass-symbol,#products .candy-item:focus-visible .glass-symbol{transform:none}
#products .candy-item:hover .glass-art::before{opacity:.35}
#products .candy-item>.candy-label{display:flex;position:absolute;left:76%;right:auto;top:42%;min-width:140px;max-width:190px;align-items:flex-start;text-align:left;gap:5px;margin:0;padding:12px 15px;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-8px);transition:opacity .35s ease,transform .35s ease,visibility .35s;background:#fdfcf9ed;border:1px solid #ffffffc9;border-radius:10px;box-shadow:0 3px 15px #25201c0a;backdrop-filter:blur(8px);z-index:4}
#products .candy-item.label-left>.candy-label{left:auto;right:76%;transform:translateX(8px)}
#products .candy-item:hover>.candy-label,#products .candy-item:focus-visible>.candy-label{opacity:1;visibility:visible;transform:translateX(0)}
#products .candy-label strong{font-size:15px;line-height:1.3;white-space:nowrap}
#products .candy-label>span{font-size:12px;line-height:1.45;color:#777!important}
@media(max-width:900px){#products.candy-scatter{height:330px}#products .candy-item{width:clamp(130px,23vw,195px)}}
@media(max-width:600px){#products.candy-scatter{height:535px}#products .candy-item{left:var(--mobile-x);top:var(--mobile-y);width:clamp(140px,44vw,190px)}#products .candy-item:nth-child(2)>.candy-label,#products .candy-item:nth-child(6)>.candy-label{left:auto;right:76%;transform:translateX(8px)}#products .candy-item:hover>.candy-label,#products .candy-item:focus-visible>.candy-label{transform:translateX(0)}#products .candy-item>.candy-label{min-width:125px;padding:10px 12px}#products .candy-label strong{font-size:14px}#products .candy-label>span{font-size:11px}}
@media(prefers-reduced-motion:reduce){#products .candy-item .glass-art,#products .candy-item>.candy-label{transition:none}#products .candy-item:hover .glass-art,#products .candy-item:focus-visible .glass-art{transform:rotate(var(--candy-turn)) scale(1.05)}}

/* Stronger contact shadows and the single-product fracture trial. */
#products .candy-item .glass-art{filter:drop-shadow(3px 7px 4px #2d24233d)}
#products .candy-item:hover .glass-art,#products .candy-item:focus-visible .glass-art{filter:drop-shadow(6px 18px 9px #2b202046)}
#projects .project-title{margin-left:var(--paper-left,10%);margin-right:var(--paper-right,10%)}
#projects .project>p{margin-left:var(--paper-left,10%);margin-right:var(--paper-right,10%)}
#projects .image-wrap img,#projects .project:hover .image-wrap img{transform:none;filter:none}
#projects .project-title{display:flex;justify-content:space-between;align-items:center;gap:10px}


#projects .project-title>span{margin-left:auto}
/* One shared card-info treatment, beneath every candy. */
#products .candy-item .glass-art{z-index:2}
#products .candy-item>.card-info,#products .candy-item.label-left>.card-info{left:50%;right:auto;top:76%;transform:translate(-50%,8px);align-items:center;text-align:center;min-width:145px;z-index:1;background:#fdfcf9;border-color:#eeeae4;box-shadow:none}
#products .candy-item:hover>.card-info,#products .candy-item:focus-visible>.card-info{transform:translate(-50%,0)}
/* Stable shared image slot keeps titles aligned across each grid row. */
#projects{row-gap:12px;align-items:start}
#projects .project{position:relative;isolation:isolate;z-index:0}
#projects .project:hover,#projects .project:focus-visible{z-index:20}
#projects .image-wrap{z-index:3;perspective:850px;aspect-ratio:1;height:auto}
#projects .project-title{position:relative;z-index:1;margin-top:-9%;min-height:62px;align-content:start;align-items:start}
#projects .project>p{position:relative;z-index:1;margin-top:2px}
:root{--site-font:Helvetica,"Helvetica Neue",Arial,sans-serif}
#projects .project-title{min-height:0;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin-top:-9%}
#projects .project-title h3{font-size:clamp(16px,1.7vw,22px);line-height:1.2;white-space:nowrap}
#projects .project-title>span{font-size:clamp(10px,1.1vw,13px);line-height:1.2;white-space:nowrap;padding:4px 7px;flex-shrink:0}
#projects .project>p{margin-top:5px;line-height:1.4}
#projects .paper-surface{position:relative;width:100%;height:100%}

#projects .image-wrap img.sticker-body,#projects .project:hover .image-wrap img.sticker-body{clip-path:none;transform:none;filter:none}
#projects .paper-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}

@media(max-width:700px){#projects .project-title h3{font-size:19px}#projects .project-title>span{font-size:12px}}
/* Shared spacing, compact four-column design gallery, simple intact zoom. */
.hero .dot{font-weight:400}
#products.candy-scatter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;height:auto;padding:0;margin:0}
#products .candy-item{position:relative;left:auto;top:auto;transform:none;width:100%;height:auto;aspect-ratio:1;margin:0}
#products .candy-item .glass-art{max-width:205px;margin:auto}
#products .candy-item>.card-info{top:76%}
#design.work{padding-top:28px!important}
#design .section-heading{margin-bottom:2px}
#projects{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:18px;row-gap:18px}
#projects .image-wrap{aspect-ratio:1/.81;overflow:visible;isolation:auto}
#projects .paper-surface{width:100%;height:auto;aspect-ratio:1;transform:translateY(-12%)}
#projects .image-wrap img.sticker-body{width:100%;height:100%;transform:none;transition:transform .4s cubic-bezier(.2,.8,.2,1);transform-origin:center}
#projects [data-project="decify"] .sticker-body{rotate:20deg}
#projects .project:hover .image-wrap img.sticker-body,#projects .project:focus-visible .image-wrap img.sticker-body{transform:scale(1.09);filter:none}
#projects .project-title{margin:0;gap:5px;align-items:center;min-height:27px}
#projects .project-title h3{font-size:15px;line-height:1.2;white-space:nowrap}
#projects .project-title>span{font-size:10px;padding:3px 5px;white-space:nowrap}
#projects .project>p{margin:3px 0 0;font-size:12px;line-height:1.4}
nav .contact{position:relative;isolation:isolate;border-color:var(--line)}
nav .contact span{font-weight:800;-webkit-text-stroke:.4px currentColor}
nav .contact::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:linear-gradient(100deg,#ef4ac8,#7b5cff,#20dce1,#f3ba46,#ef4ac8);background-size:300% 100%;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;opacity:0;transition:opacity .25s;pointer-events:none}
nav .contact:hover::before,nav .contact:focus-visible::before{opacity:1;animation:contact-border-flow 2s linear infinite}
@keyframes contact-border-flow{to{background-position:300% 0}}
#contact .pixel-arrow{display:block;width:clamp(36px,5vw,64px);height:auto;line-height:0}
#contact .pixel-arrow svg{width:100%;height:auto;display:block}
@media(max-width:1000px){#projects{grid-template-columns:repeat(2,minmax(0,1fr))}#projects .project-title h3{font-size:18px}#projects .project-title>span{font-size:11px}}
@media(max-width:600px){#products.candy-scatter{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}#products .candy-item{left:auto;top:auto;width:100%}#projects{grid-template-columns:1fr;row-gap:18px}#projects .project-title h3{font-size:19px}#projects .project-title>span{font-size:12px}}
@media(prefers-reduced-motion:reduce){#projects .image-wrap img.sticker-body{transition:none}nav .contact:hover::before{animation:none}}
/* One intact GPU surface. The original image stays as a reliable static fallback. */
#projects .paper-surface{--sticker-angle:0deg}
#projects [data-project="decify"] .paper-surface{--sticker-angle:20deg}
#projects .image-wrap img.sticker-body,#projects .project:hover .image-wrap img.sticker-body,#projects .project:focus-visible .image-wrap img.sticker-body{transform:none;transition:none;rotate:var(--sticker-angle);filter:none}
#projects .sticker-peel-canvas{position:absolute;left:-30%;top:-30%;width:160%;height:160%;max-width:none;pointer-events:none;rotate:var(--sticker-angle);z-index:4}
#projects .paper-surface.peel-rendering>.sticker-body{visibility:hidden}
#projects .project.peel-in-motion{z-index:30}
/* Fit the visible paper, rather than its transparent PNG margins, to each card. */
#projects .image-wrap{position:relative;aspect-ratio:1 / 0.947;overflow:visible}
#projects .paper-surface{position:absolute;top:auto;bottom:0;left:calc(-100% * var(--frame-left));width:calc(100% * var(--frame-scale));height:auto;aspect-ratio:1;transform:translateY(calc(100% * var(--frame-bottom)))}
#projects [data-project="yada"] .paper-surface{--sticker-angle:-30deg}
#projects .project-title{margin-top:8px}
#products .candy-item>.card-info,#products .candy-item.label-left>.card-info{background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;padding:8px 0}
/* Equal underlying cells, with restrained offsets for a scattered arrangement. */
#products .candy-item{transform:translate(var(--rest-x,0%),var(--rest-y,0%))}
#products .candy-item:nth-child(1){--rest-x:-3%;--rest-y:4%}
#products .candy-item:nth-child(2){--rest-x:2%;--rest-y:-5%}
#products .candy-item:nth-child(3){--rest-x:-1%;--rest-y:3%}
#products .candy-item:nth-child(4){--rest-x:3%;--rest-y:-2%}
#products .candy-item:nth-child(5){--rest-x:2%;--rest-y:-4%}
#products .candy-item:nth-child(6){--rest-x:-3%;--rest-y:5%}
#products .candy-item:nth-child(7){--rest-x:3%;--rest-y:-3%}
#products .candy-item:nth-child(8){--rest-x:-2%;--rest-y:4%}
nav .contact{display:inline-flex;align-items:center;gap:20px}
nav .contact .nav-pixel-arrow{display:block;width:13px;height:13px;margin:0;line-height:0;-webkit-text-stroke:0}
nav .nav-pixel-arrow svg{display:block;width:100%;height:100%}
#contact>a{display:inline-grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(14px,2vw,28px);width:max-content;max-width:100%}
#contact>a>.contact-copy{position:static;display:block;font-size:inherit;line-height:inherit}
#contact>a>.pixel-arrow{position:static;display:block;width:2.05em;height:2.05em;line-height:0;font-size:inherit}
#contact>a>.pixel-arrow svg{width:100%;height:100%}
footer,footer *{font-weight:600}
@media(max-width:600px){#contact>a{font-size:clamp(26px,6.2vw,40px);letter-spacing:-.055em}nav .contact{gap:12px}}

/* Remove the section rules without changing their spacing. */
.hero{border-bottom:0}
#contact,footer{border-top:0}
/* Reduce the two sections' combined whitespace by forty percent. */
#design{padding-bottom:51px}
#contact{padding-top:33px}
#contact>a{margin-top:17.4px}
/* Keep the introduction as one closely set, single-color text block. */
.hero,.hero *{color:#000!important}
.hero .hero-preface,.hero .headline-and,.hero .hero-bottom p{font-weight:400;color:#000!important}
.hero .hero-preface{margin:0}
.hero h1{margin-top:0;margin-bottom:0}
.hero .headline-line+.headline-line{margin-top:0}
.hero .hero-bottom{margin-top:0;padding-top:0}
.hero .hero-bottom p{line-height:1.35}
@media(max-width:700px){#design{padding-bottom:33px}#contact{padding-top:21px}}
/* Candies tossed across the page: no shared rows or columns. */
#products.candy-scatter{display:block;position:relative;height:clamp(400px,42vw,510px);width:100%;padding:0;margin:0;overflow:visible;--candy-size:clamp(160px,18vw,220px)}
#products .candy-item{position:absolute;width:var(--candy-size);height:var(--candy-size);left:clamp(calc(var(--candy-size) / 2 - 5vw),var(--candy-x),calc(100% - var(--candy-size) / 2 + 5vw));top:var(--candy-y);transform:translate(-50%,-50%);margin:0;padding:0}
#products .candy-item .glass-art{width:100%;height:100%;max-width:none;margin:0}
#work .section-heading{position:relative;z-index:3;width:fit-content}
@media(max-width:600px){#products.candy-scatter{height:660px;--candy-size:clamp(140px,38vw,185px)}#products .candy-item{left:clamp(calc(var(--candy-size) / 2 - 5vw),var(--mobile-x),calc(100% - var(--candy-size) / 2 + 5vw));top:var(--mobile-y);width:var(--candy-size);height:var(--candy-size);transform:translate(-50%,-50%)}}
/* Subtle colored contact shadows drawn from each candy's own palette. */
#products .candy-item:nth-child(1){--candy-shadow:217,28,54}
#products .candy-item:nth-child(2){--candy-shadow:139,76,216}
#products .candy-item:nth-child(3){--candy-shadow:32,90,230}
#products .candy-item:nth-child(4){--candy-shadow:215,40,170}
#products .candy-item:nth-child(5){--candy-shadow:134,60,208}
#products .candy-item:nth-child(6){--candy-shadow:32,184,209}
#products .candy-item:nth-child(7){--candy-shadow:225,25,119}
#products .candy-item:nth-child(8){--candy-shadow:236,163,0}
#products .candy-item .glass-art{filter:drop-shadow(3px 8px 6px rgba(var(--candy-shadow),.14))}
#products .candy-item:hover .glass-art,#products .candy-item:focus-visible .glass-art{filter:drop-shadow(6px 18px 10px rgba(var(--candy-shadow),.20))}
#products .candy-item.original-cube .glass-art::before{background:rgba(var(--candy-shadow),.12)}
/* Colored light pools remain visible while the glass candies rest on the page. */
#products .candy-item .glass-art{filter:drop-shadow(3px 9px 7px rgba(var(--candy-shadow),.4732))}
#products .candy-item:hover .glass-art,#products .candy-item:focus-visible .glass-art{filter:drop-shadow(6px 18px 11px rgba(var(--candy-shadow),.546))}
#products .candy-item::after{content:"";position:absolute;left:20%;right:14%;top:64%;height:18%;border-radius:50%;background:radial-gradient(ellipse at 45% 40%,rgba(var(--candy-shadow),.6188),rgba(var(--candy-shadow),.273) 43%,rgba(var(--candy-shadow),0) 75%);filter:blur(5px);transform:rotate(-9deg);opacity:.9;pointer-events:none;z-index:-1;transition:opacity .45s,transform .45s,filter .45s}
#products .candy-item:hover::after,#products .candy-item:focus-visible::after{opacity:.65;filter:blur(8px);transform:translateY(5px) rotate(-9deg) scale(1.1)}
#products .candy-item.original-cube .glass-art::before{display:none}
@media(prefers-reduced-motion:reduce){#products .candy-item::after{transition:none}}

/* Stable overlapping layers, each with its own angle and a small resting height. */
#products .candy-item{z-index:var(--pile-z,1)}
#products .candy-item .glass-art{transform:translateY(calc(-1 * var(--pile-lift,0px))) rotate(var(--candy-turn));filter:drop-shadow(3px calc(9px + var(--pile-lift,0px)) 7px rgba(var(--candy-shadow),.4732))}
#products .candy-item:hover,#products .candy-item:focus-visible{z-index:30}
#products .candy-item:hover .glass-art,#products .candy-item:focus-visible .glass-art{transform:translate(var(--lift-x),-22px) rotate(var(--candy-turn)) scale(1.12);filter:drop-shadow(6px 18px 11px rgba(var(--candy-shadow),.546))}
@media(max-width:600px){#products.candy-scatter{height:540px}}
@media(prefers-reduced-motion:reduce){#products .candy-item:hover .glass-art,#products .candy-item:focus-visible .glass-art{transform:translateY(calc(-1 * var(--pile-lift,0px))) rotate(var(--candy-turn))}}
/* Remove the font's extra leading between the preface and the headline. */
.hero .hero-preface{margin:0;line-height:1}
.hero h1{margin-top:-.1em}
/* A compact common canvas makes neighboring candies form one continuous heap. */
#products.candy-scatter{width:min(100%,760px);height:340px;margin:0 auto;--candy-size:clamp(180px,21vw,235px)}
@media(max-width:600px){#products.candy-scatter{width:100%;height:400px;--candy-size:clamp(150px,44vw,185px)}}
@media(min-width:601px){#products.candy-scatter{width:min(100%,660px);height:310px}}
/* Transparent image corners must not block visible neighboring candies. */
#products .candy-item,#products .candy-item .glass-art{pointer-events:none}
#products .candy-hit{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:translateY(calc(-1 * var(--pile-lift,0px))) rotate(var(--candy-turn));pointer-events:none}
#products .candy-hit polygon{fill:transparent;pointer-events:all}
/* Product-specific card-info directions. */
#products [data-product="istegelsin"]>.card-info{left:auto;right:88%;top:34%;bottom:auto;align-items:flex-end;text-align:right;transform:translate(-8px,0)}
#products [data-product="upope"]>.card-info,#products [data-product="petros"]>.card-info{left:50%;right:auto;top:auto;bottom:86%;transform:translate(-50%,8px)}
#products [data-product="parea"]>.card-info{left:82%;right:auto;top:auto;bottom:80%;align-items:flex-start;text-align:left;transform:translate(-6px,6px)}
#products [data-product="gaze"]>.card-info{left:89%;right:auto;top:34%;bottom:auto;align-items:flex-start;text-align:left;transform:translate(8px,0)}
#products [data-product="istegelsin"]:hover>.card-info,#products [data-product="istegelsin"]:focus-visible>.card-info,#products [data-product="parea"]:hover>.card-info,#products [data-product="parea"]:focus-visible>.card-info,#products [data-product="gaze"]:hover>.card-info,#products [data-product="gaze"]:focus-visible>.card-info{transform:translate(0,0)}
#products [data-product="upope"]:hover>.card-info,#products [data-product="upope"]:focus-visible>.card-info,#products [data-product="petros"]:hover>.card-info,#products [data-product="petros"]:focus-visible>.card-info{transform:translate(-50%,0)}
/* A second irregular pile, with details placed beyond the paper surfaces. */
#projects{display:block;position:relative;width:min(100%,740px);height:420px;margin:12px auto 0;--design-size:clamp(170px,21vw,235px)}
#projects .project{position:absolute;left:clamp(calc(var(--design-size) / 2),var(--design-x),calc(100% - var(--design-size) / 2));top:var(--design-y);width:var(--design-size);height:auto;transform:translate(-50%,-50%);z-index:var(--design-layer);pointer-events:none;isolation:isolate}
#projects .project>.project-title,#projects .project>p{display:none}
#projects .image-wrap{width:100%;height:auto;aspect-ratio:1 / 0.947;pointer-events:none}
#projects .sticker-hit{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:6;pointer-events:none}
#projects .sticker-hit polygon{fill:transparent;pointer-events:all}
#projects .project:hover,#projects .project:focus-visible{z-index:50}
#design-info{display:flex;justify-content:center;align-content:start;align-items:baseline;flex-wrap:wrap;gap:6px 12px;max-width:480px;min-height:88px;margin:28px auto 0;text-align:center;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none}
#design-info.is-visible{opacity:1;transform:none}
#design-info h3{margin:0;font-size:19px;font-weight:500}
#design-info>span{font-size:12px;color:#777!important}
#design-info p{flex-basis:100%;margin:0;font-size:13px;line-height:1.45;color:#777!important}
@media(max-width:900px){#products [data-product="istegelsin"]>.card-info,#products [data-product="gaze"]>.card-info,#products [data-product="parea"]>.card-info{left:50%;right:auto;top:auto;bottom:88%;align-items:center;text-align:center;transform:translate(-50%,8px)}#products [data-product="istegelsin"]:hover>.card-info,#products [data-product="istegelsin"]:focus-visible>.card-info,#products [data-product="gaze"]:hover>.card-info,#products [data-product="gaze"]:focus-visible>.card-info,#products [data-product="parea"]:hover>.card-info,#products [data-product="parea"]:focus-visible>.card-info{transform:translate(-50%,0)}}
@media(max-width:600px){#projects{width:100%;height:600px;--design-size:clamp(150px,46vw,205px)}#projects .project{left:clamp(calc(var(--design-size) / 2),var(--design-mobile-x),calc(100% - var(--design-size) / 2));top:var(--design-mobile-y)}#design-info{margin-top:24px}}
@media(prefers-reduced-motion:reduce){#design-info{transition:none}}
/* Match the regular managed/made typography while retaining the large hero titles. */
:root{--support-size:22px;--support-weight:400}
.hero h1,.hero h1 *{font-weight:var(--support-weight)}
.hero .hero-preface,.hero .headline-and,.hero .hero-bottom p{font-size:var(--support-size);font-weight:var(--support-weight)}
footer,footer *{font-size:var(--support-size);font-weight:var(--support-weight)}
/* Product names and categories share one place, outside the glass pile. */
#products .candy-item>.card-info{display:none!important}
#product-info,#design-info{display:flex;justify-content:center;align-content:start;align-items:baseline;flex-wrap:wrap;gap:6px 12px;max-width:640px;margin:28px auto 0;text-align:center;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none}
#product-info{min-height:62px}
#design-info{min-height:116px}
#product-info.is-visible,#design-info.is-visible{opacity:1;transform:none}
#product-info h3,#product-info>span,#design-info h3,#design-info>span,#design-info p{margin:0;font-size:var(--support-size);font-weight:var(--support-weight);line-height:1.35}
#design-info p{flex-basis:100%}
/* Stable studio highlights: static sparkles instead of continuous twinkling. */
#products .glitter{opacity:.5;transform:none}
#products .glitter i{animation:none;opacity:.72;transform:none}
#products .candy-item:hover .glitter,#products .candy-item:focus-visible .glitter{opacity:.85;transform:none}
/* Overhead studio light gives the paper a tight contact shadow and a soft falloff. */
#projects .image-wrap img.sticker-body{transform:none;filter:drop-shadow(0 7px 4px rgba(30,24,20,.169)) drop-shadow(0 14px 12px rgba(30,24,20,.104));transition:transform .4s cubic-bezier(.2,.75,.25,1),filter .4s}
#projects .project:hover .image-wrap img.sticker-body,#projects .project:focus-visible .image-wrap img.sticker-body{transform:translateY(-8px) scale(1.12);filter:drop-shadow(0 13px 7px rgba(30,24,20,.234)) drop-shadow(0 24px 18px rgba(30,24,20,.13))}
@media(max-width:500px){:root{--support-size:19px}}
@media(prefers-reduced-motion:reduce){#product-info,#design-info,#projects .image-wrap img.sticker-body{transition:none}}
/* Use the Let's talk type size consistently across the requested text areas. */
:root{--interface-size:14px;--support-size:var(--interface-size)}
header nav{font-size:var(--interface-size)}
.hero .hero-preface,.hero h1,.hero h1 *,.hero .headline-and,.hero .hero-bottom p{font-size:var(--interface-size);letter-spacing:0}
.hero h1{line-height:1.35;margin-top:0}
#work .section-heading h2,#design .section-heading h2{font-size:var(--interface-size);letter-spacing:0}
footer,footer *,#product-info h3,#product-info>span,#design-info h3,#design-info>span,#design-info p{font-size:var(--interface-size)}
/* Restore the stickers' original baked-in contact shadows. */
#projects .image-wrap img.sticker-body,#projects .project:hover .image-wrap img.sticker-body,#projects .project:focus-visible .image-wrap img.sticker-body{filter:none}
#products.candy-scatter{isolation:isolate}
@media(max-width:700px){:root{--interface-size:12px}}
@media(max-width:500px){:root{--interface-size:11px}}
/* A simple introduction, with the requested words emphasized as live text. */
.hero .hero-bottom strong,header nav .contact{font-weight:700}
#design{padding-bottom:12px}
#design-info{min-height:56px;margin-top:20px}
/* Only the arrow responds when the contact link is hovered. */
#contact>a>.pixel-arrow{transform:scale(1);transform-origin:center;transition:transform .35s cubic-bezier(.2,.75,.25,1)}
#contact>a:hover>.pixel-arrow,#contact>a:focus-visible>.pixel-arrow{transform:scale(1.12)}
/* Make all page copy selectable, including the shared hover information. */
.hero,.hero *,.section-heading,.section-heading *,footer,footer *,header nav .contact,#contact .contact-copy,#contact .contact-copy *,#product-info,#product-info *,#design-info,#design-info *{-webkit-user-select:text;user-select:text}
#product-info.is-visible,#design-info.is-visible{pointer-events:auto;cursor:text}
@media(max-width:700px){#design{padding-bottom:8px}}
@media(prefers-reduced-motion:reduce){#contact>a>.pixel-arrow{transition:none}}
header nav .contact{font-weight:400}
#product-info,#design-info{flex-direction:column;align-items:center;justify-content:flex-start;gap:2px}
#product-info h3,#design-info h3{font-weight:700}
#product-info>span,#design-info>span{font-weight:400}
#design-info p{flex-basis:auto;width:100%}
#design-info{min-height:68px}
#product-info.is-visible,#design-info.is-visible{pointer-events:none;cursor:default}
/* Two aligned design-info rows: title/category, then a matching-width description. */
#design-info{display:grid;grid-template-columns:auto auto;justify-content:stretch;align-items:baseline;align-content:start;column-gap:24px;row-gap:4px;width:max-content;max-width:min(640px,100%);margin-left:auto;margin-right:auto;text-align:left}
#design-info h3{grid-column:1;grid-row:1;justify-self:start}
#design-info>span{grid-column:2;grid-row:1;justify-self:end;text-align:right}
#design-info p{grid-column:1 / -1;grid-row:2;width:100%;white-space:nowrap;text-align:left}
/* Product details always stay centered below the entire pile, not the selected candy. */
#product-info{display:flex;flex-flow:column nowrap;align-items:center;justify-content:flex-start;gap:2px;width:min(100%,660px);margin-left:auto;margin-right:auto;text-align:center}
/* Match the header's animated gradient outline without shifting the footer links. */
footer div a{position:relative;display:inline-flex;align-items:center;isolation:isolate}
footer div a::before{content:"";position:absolute;inset:-7px -9px;border-radius:20px;padding:1.5px;background:linear-gradient(100deg,#ef4ac8,#7b5cff,#20dce1,#f3ba46,#ef4ac8);background-size:300% 100%;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;opacity:0;transition:opacity .25s;pointer-events:none}
footer div a:hover::before,footer div a:focus-visible::before{opacity:1;animation:contact-border-flow 2s linear infinite}
@media(max-width:700px){#design-info{width:min(100%,640px)}#design-info p{white-space:normal;overflow-wrap:break-word}footer div a::before{inset:-5px}}
@media(prefers-reduced-motion:reduce){footer div a:hover::before,footer div a:focus-visible::before{animation:none}}