patx/afterdarklabs
Stabilize link hover wrapping in legacy browsers
Commit d2dd042 · patx · 2026-09-08T18:43:25-04:00
Comments
No comments yet.
Diff
diff --git a/docs/index.html b/docs/index.html
index 94c7d04..185724a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -29,7 +29,7 @@
<meta name="twitter:image:alt" content="After Dark Labs. Custom websites and apps.">
<link rel="preload" href="https://afterdarklabs.io/fonts/ubuntu-700-latin.woff2" as="font" type="font/woff2" crossorigin>
<style>
- @font-face{font-family:Ubuntu;font-style:normal;font-weight:700;font-display:swap;src:url(https://afterdarklabs.io/fonts/ubuntu-700-latin.woff2)format("woff2")}:root{--page-bg:#000;--site-nav-height:5.75rem}*,:before,:after{box-sizing:border-box}html{overscroll-behavior-x:none;scroll-behavior:smooth;-webkit-text-size-adjust:100%;max-width:100%;line-height:1.5;overflow-x:clip}@media (width>=1024px){:root{--site-nav-height:5.5rem}html{font-size:125%}}body{overscroll-behavior-x:none;background:var(--page-bg);color:#fff;max-width:100%;font-family:Ubuntu,system-ui,sans-serif;font-weight:700;line-height:inherit;margin:0;overflow-x:clip}h1,h2,p{margin:0}h1,h2{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:none}img,svg{vertical-align:middle;display:block}img{max-width:100%;height:auto}nav{z-index:50;background:#000;width:100%;position:fixed;top:0;backdrop-filter:none!important}.nav-shell{width:100%;max-width:80rem;margin-inline:auto;padding:1rem}.mobile-nav,.desktop-nav{justify-content:space-between;align-items:center}.mobile-nav{gap:.75rem;display:flex}.desktop-nav{display:none}.nav-brand{color:#fff;align-items:center;display:flex}.mobile-nav .nav-brand{text-align:left;border-radius:1rem;min-width:0;padding:.375rem .75rem .375rem .375rem;transition:background-color .15s cubic-bezier(.4,0,.2,1)}.mobile-nav .nav-brand:hover{background:#ffffff1a}.mobile-nav .nav-brand:focus{outline:none}.mobile-nav .nav-brand:focus-visible{outline-offset:2px;outline:2px solid #fff}.desktop-nav .nav-brand{gap:.75rem}@media (width>=640px){.nav-shell{padding-inline:1.5rem}}@media (width>=1024px){.nav-shell{padding-block:1.25rem}.mobile-nav{display:none}.desktop-nav{display:flex}}.hero-content{z-index:2;text-align:center;justify-items:center;gap:2.5rem;width:100%;max-width:none;margin-inline:auto;padding-block:0;padding-inline:0;display:grid;position:relative}#hero{box-sizing:border-box;background:var(--page-bg);height:100svh;min-height:100svh;padding-top:var(--site-nav-height);align-items:center;padding-bottom:0;display:flex;position:relative;overflow:hidden}.nav-brand{transform-origin:0}.nav-cta{letter-spacing:-.035em;border-radius:1rem;flex-shrink:0;justify-content:center;align-items:center;min-height:3.25rem;padding:.75rem 1.15rem;font-size:clamp(1.05rem,5vw,1.3rem);font-weight:700;line-height:1;transition:color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1);display:inline-flex;color:#fff!important;background-color:#000!important}.nav-cta:hover,.nav-cta:focus-visible{color:#000!important;background-color:#fff!important}.nav-brand-word{letter-spacing:-.055em;white-space:nowrap;gap:.22em;padding-right:.08em;font-size:clamp(1.25rem,5.8vw,1.7rem);font-weight:700;line-height:.9;display:flex}.nav-brand-letter{transform-origin:50%;display:inline-block}@media (width>=1024px){.nav-brand-word{font-size:clamp(1.5rem,2.2vw,2rem)}.nav-cta{min-height:2.75rem;padding:.72rem 1.35rem;font-size:clamp(1.2rem,2vw,1.6rem)}}.hero-vignette{pointer-events:none;z-index:1;background:#000;position:absolute;inset:0}@media (width<=767px){#hero{--mobile-nav-height:5.75rem;box-sizing:border-box;height:var(--mobile-hero-height,100svh);min-height:var(--mobile-hero-height,100svh);padding-top:var(--mobile-nav-height);align-items:stretch;padding-bottom:0}.hero-content{align-content:center;gap:0;padding-block:clamp(1.25rem,4svh,2rem)}.hero-content h1{font-size:clamp(2.75rem,min(17vw,9.5svh),4.5rem)}}.hero-content h1{width:max-content;font-size:31vw;font-size:min(31vw, calc((100svh - var(--site-nav-height)) * .4));letter-spacing:-.075em;flex-direction:column;align-items:center;padding-right:.1em;font-weight:700;line-height:.8;display:flex}.hero-letter{transform-origin:50%;display:inline-block}.hero-word{display:block}.hero-scroll-hint{bottom:max(1rem, env(safe-area-inset-bottom));z-index:3;color:#fff;letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:.55rem;font-size:clamp(.7rem,1.1vw,.85rem);font-weight:700;line-height:1;text-decoration:none;transition:opacity .16s;display:inline-flex;position:absolute;left:50%;transform:translate(-50%)}.hero-scroll-hint:after{content:"";border-bottom:.12em solid;border-right:.12em solid;width:.58em;height:.58em;animation:1.65s cubic-bezier(.45,0,.2,1) infinite hero-scroll-nudge}.hero-scroll-hint:hover{opacity:.68}.hero-scroll-hint:focus-visible{outline-offset:.4rem;outline:2px solid #fff}@keyframes hero-scroll-nudge{0%,to{transform:translateY(-.12rem)rotate(45deg)}50%{transform:translateY(.2rem)rotate(45deg)}}.work-intro{background:var(--page-bg);height:100svh;position:relative}.work-intro:not(.work-intro--closing){height:auto}.work-intro-stage{top:var(--site-nav-height);z-index:3;box-sizing:border-box;height:calc(100svh - var(--site-nav-height));align-items:center;padding:clamp(.75rem,1.5vw,1.25rem) clamp(1.5rem,5vw,4rem);display:flex;position:sticky;overflow:hidden}.work-intro:not(.work-intro--closing) .work-intro-stage{align-items:flex-start;height:auto;padding-top:0;padding-bottom:25px;position:relative;top:auto}.work-heading{color:#fff;letter-spacing:-.065em;text-wrap:balance;flex-wrap:wrap;gap:0 .2em;width:100%;max-width:78rem;margin:0 auto;font-size:clamp(2.85rem,8vw,7rem);font-weight:700;line-height:.94;display:flex}#work-heading{scroll-margin-top:calc(var(--site-nav-height) + 1rem)}.work-heading-words{display:contents}.work-heading-word{display:inline-block}.work-heading-email{color:inherit;width:100%;font-weight:700;text-shadow:0 0;text-decoration:none;transition:text-shadow .16s}.work-heading-email .bi-send{vertical-align:-.06em;width:.9em;height:.9em;display:inline-block}.work-heading-email:hover,.work-heading-email:focus-visible{text-shadow:.018em 0,-.018em 0}.work-heading-email:focus-visible{outline-offset:.075em;outline:.055em solid #fff}.work-intro--closing{height:auto;min-height:0}.work-intro--closing .work-intro-stage{align-items:flex-start;height:auto;padding-top:48px;padding-bottom:56px;position:relative;top:auto}.work-stage{box-sizing:border-box;padding:clamp(0rem,.5vw,.5rem) clamp(1rem,2vw,2rem)}#work{background:var(--page-bg);scroll-margin-top:6rem}.work-stage-content{width:100%;min-width:0;max-width:none;margin-inline:auto}#work-scroller{touch-action:pan-y pinch-zoom;grid-template-columns:minmax(0,1fr);gap:clamp(.3rem,.6vw,.65rem);padding:0;display:grid;overflow:visible}#work-scroller>article{isolation:isolate;aspect-ratio:16/9;background:var(--page-bg);border-radius:0;width:100%;min-width:0;position:relative;overflow:hidden}#work-scroller>article>.portfolio-media{border-radius:0;width:100%;height:100%;display:block}#work-scroller>article>.portfolio-media>img{aspect-ratio:auto;object-fit:cover;width:100%;height:100%;transition:transform .6s cubic-bezier(.16,1,.3,1)}#work-scroller>article>.portfolio-details{z-index:2;box-sizing:border-box;opacity:0;pointer-events:none;transform-origin:bottom;backdrop-filter:blur(.35rem);background:#000000f0;align-items:center;padding:clamp(1rem,2.5vw,2.75rem);transition:opacity .18s,transform .52s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;inset:0;overflow:hidden;transform:translateY(7%)skewY(1.2deg)}#work-scroller>article:focus-within>.portfolio-details{opacity:1;pointer-events:auto;transform:none}#work-scroller>article:focus-within>.portfolio-media>img{transform:scale(1.025)}#work-scroller>article:focus-visible{outline-offset:-2px;outline:2px solid #fff}#work-scroller>article>.portfolio-details>p{color:#fff;width:100%;font-size:var(--portfolio-copy-size,clamp(1.2rem, 3vw, 3.5rem));letter-spacing:-.04em;text-wrap:balance;margin:0;font-weight:700;line-height:.98}#work-scroller>article:first-child{--portfolio-copy-size:clamp(12px, calc(8.165vw - 5.73px), 88px)}#work-scroller>article:nth-child(2){--portfolio-copy-size:clamp(12px, calc(7.715vw - 6.08px), 88px)}#work-scroller>article:nth-child(3){--portfolio-copy-size:clamp(12px, calc(6.816vw - 4.68px), 88px)}#work-scroller>article:nth-child(4){--portfolio-copy-size:clamp(12px, calc(7.715vw - 6.08px), 88px)}#work-scroller>article:nth-child(5){--portfolio-copy-size:clamp(12px, calc(8.015vw - 5.58px), 88px)}#work-scroller>article:nth-child(6){--portfolio-copy-size:clamp(12px, calc(6.779vw - 5.5px), 88px)}#work-scroller>article:nth-child(7){--portfolio-copy-size:clamp(12px, calc(6.816vw - 4.68px), 88px)}#work-scroller>article:nth-child(8){--portfolio-copy-size:clamp(12px, calc(6.779vw - 5.5px), 88px)}.portfolio-description{color:#fff;display:block}.portfolio-name{font-weight:700;text-shadow:.018em 0,-.018em 0}.portfolio-live-link{color:#fff;text-shadow:0 0;white-space:nowrap;align-items:baseline;gap:.18em;font-weight:700;text-decoration:none;transition:text-shadow .16s;display:inline-flex}.portfolio-live-link svg{flex:none;width:.72em;height:.72em}.portfolio-live-link svg path{stroke:currentColor;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill;transition:stroke-width .16s}.portfolio-live-link:hover,.portfolio-live-link:focus-visible{text-shadow:.018em 0,-.018em 0;font-weight:700}.portfolio-live-link:hover svg path,.portfolio-live-link:focus-visible svg path{stroke-width:.45px}.portfolio-live-link:focus-visible{outline-offset:.08em;outline:.09em solid #fff}@media (width>=768px){#work-scroller{grid-template-columns:repeat(2,minmax(0,1fr))}#work-scroller>article:first-child{--portfolio-copy-size:clamp(12px, calc(3.576vw - .87px), 88px)}#work-scroller>article:nth-child(2){--portfolio-copy-size:clamp(12px, calc(3.238vw - .77px), 88px)}#work-scroller>article:nth-child(3){--portfolio-copy-size:clamp(12px, calc(2.995vw - .7px), 88px)}#work-scroller>article:nth-child(4){--portfolio-copy-size:clamp(12px, calc(3.229vw - .8px), 88px)}#work-scroller>article:nth-child(5){--portfolio-copy-size:clamp(12px, calc(3.507vw - .73px), 88px)}#work-scroller>article:nth-child(6){--portfolio-copy-size:clamp(12px, calc(2.769vw - .57px), 88px)}#work-scroller>article:nth-child(7){--portfolio-copy-size:clamp(12px, calc(3.003vw - .76px), 88px)}#work-scroller>article:nth-child(8){--portfolio-copy-size:clamp(12px, calc(2.856vw - .63px), 88px)}}@media (width>=768px) and (hover:hover){#work-scroller>article:hover>.portfolio-details{opacity:1;pointer-events:auto;transform:none}#work-scroller>article:hover>.portfolio-media>img{transform:scale(1.025)}}@media (hover:none),(pointer:coarse){#work-scroller>article{cursor:pointer}#work-scroller>article>.portfolio-details{backdrop-filter:none}}@supports (animation-timeline:scroll()){.hero-letter,.nav-brand-letter{animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root);animation-range-start:var(--hero-range-start);animation-range-end:var(--hero-range-end)}.hero-letter{will-change:opacity,transform;animation-name:hero-letter-out}.nav-brand-letter{will-change:opacity,transform;animation-name:nav-letter-in}.hero-letter:first-child,.nav-brand-letter:first-child{--hero-range-start:4.5svh;--hero-range-end:31svh}.hero-letter:nth-child(2),.nav-brand-letter:nth-child(2){--hero-range-start:25svh;--hero-range-end:51.5svh}.hero-letter:nth-child(3),.nav-brand-letter:nth-child(3){--hero-range-start:45.5svh;--hero-range-end:72svh}.nav-brand{animation-name:nav-brand-enable;animation-duration:auto;animation-timing-function:step-end;animation-fill-mode:both;animation-timeline:scroll(root);animation-range:4.5svh calc(4.5svh + 1px)}.hero-scroll-hint{animation-name:scroll-hint-out;animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root);animation-range:45.5svh 72svh}.work-intro:not(.work-intro--closing){view-timeline-name:--work-intro;view-timeline-axis:block}.work-intro:not(.work-intro--closing) .work-heading-word{animation-name:heading-word-in;animation-duration:auto;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both;animation-timeline:--work-intro;animation-range-start:var(--word-range-start);animation-range-end:var(--word-range-end);transform-origin:0 100%}.work-intro:not(.work-intro--closing) .work-heading-word:first-child{--word-range-start:cover 38%;--word-range-end:cover 44%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(2){--word-range-start:cover 39.2%;--word-range-end:cover 45.2%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(3){--word-range-start:cover 40.4%;--word-range-end:cover 46.4%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(4){--word-range-start:cover 41.6%;--word-range-end:cover 47.6%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(5){--word-range-start:cover 42.8%;--word-range-end:cover 48.8%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(6){--word-range-start:cover 44%;--word-range-end:cover 50%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(7){--word-range-start:cover 45.2%;--word-range-end:cover 51.2%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(8){--word-range-start:cover 46.4%;--word-range-end:cover 52.4%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(9){--word-range-start:cover 47.6%;--word-range-end:cover 53.6%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(10){--word-range-start:cover 48.8%;--word-range-end:cover 54.8%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(11){--word-range-start:cover 50%;--word-range-end:cover 56%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(12){--word-range-start:cover 51.2%;--word-range-end:cover 57.2%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(13){--word-range-start:cover 52.4%;--word-range-end:cover 58.4%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(14){--word-range-start:cover 53.6%;--word-range-end:cover 59.6%}#work-scroller>article{--card-start-blur:7px;--card-mid-blur:3.5px;--card-end-blur:1.25px;animation-name:portfolio-card-in-left;animation-duration:auto;transform-origin:bottom;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:cover 4% cover 45%}#work-scroller>article:nth-child(2n){animation-name:portfolio-card-in-right}.work-intro--closing{view-timeline-name:--closing-intro;view-timeline-axis:block}.work-intro--closing .work-heading-email,.work-intro--closing .work-heading-email>.work-heading-word{animation-name:heading-word-in;animation-duration:auto;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both;animation-timeline:--closing-intro;animation-range-start:var(--closing-range-start);animation-range-end:var(--closing-range-end);transform-origin:0 100%}.work-intro--closing .work-heading-email{--closing-range-start:entry 4%;--closing-range-end:entry 20%}.work-intro--closing .work-heading-email>.work-heading-word:first-child{--closing-range-start:entry 18%;--closing-range-end:entry 34%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(2){--closing-range-start:entry 32%;--closing-range-end:entry 48%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(3){--closing-range-start:entry 46%;--closing-range-end:entry 62%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(4){--closing-range-start:entry 60%;--closing-range-end:entry 76%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(5){--closing-range-start:entry 74%;--closing-range-end:entry 90%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(6){--closing-range-start:entry 84%;--closing-range-end:entry 100%}@media (orientation:portrait){#work-scroller>article:last-child{animation-range-end:cover 30%}}@media (width>=768px) and (orientation:portrait){#work-scroller>article:nth-last-child(2){animation-range-end:cover 30%}}}@keyframes hero-letter-out{0%{opacity:1;transform:scale(1)}35%{opacity:.72;transform:scale(.984)}65%{opacity:.28;transform:scale(.961)}to{opacity:0;transform:scale(.945)}}@keyframes nav-letter-in{0%{opacity:0;transform:translate(-1.35rem)rotate(-12deg)skew(-18deg)scale(.38,1.28)}35%{opacity:.28;transform:translate(-.82rem,.08rem)rotate(-6deg)skew(-10deg)scale(.61,1.15)}65%{opacity:.72;transform:translate(-.18rem,-.04rem)rotate(1.5deg)skew(2deg)scale(.9,1.04)}82%{opacity:.92;transform:translate(.05rem,.02rem)rotate(-.8deg)skew(-1deg)scale(1.02,.99)}to{opacity:1;transform:none}}@keyframes nav-brand-enable{0%{opacity:0}to{opacity:1}}@keyframes scroll-hint-out{0%{opacity:1}to{opacity:0}}@keyframes heading-word-in{0%{opacity:0;transform:translateY(.42em)rotate(1.5deg)}to{opacity:1;transform:none}}@keyframes portfolio-card-in-left{0%{opacity:0;transform:translate(-6vw,96px)rotate(-5deg)skewY(0)scale(.93,1.065)}50%{opacity:.82;transform:translate(-2vw,42px)rotate(-1.5deg)skewY(-.8deg)scale(.975,1.025)}72%{opacity:1;transform:translate(.35vw,8px)rotate(.7deg)skewY(.25deg)scale(1.006,.996)}to{opacity:1;transform:none}}@keyframes portfolio-card-in-right{0%{opacity:0;transform:translate(6vw,96px)rotate(5deg)skewY(0)scale(.93,1.065)}50%{opacity:.82;transform:translate(2vw,42px)rotate(1.5deg)skewY(.8deg)scale(.975,1.025)}72%{opacity:1;transform:translate(-.35vw,8px)rotate(-.7deg)skewY(-.25deg)scale(1.006,.996)}to{opacity:1;transform:none}}@media (hover:none),(pointer:coarse){#work-scroller>article{--card-start-blur:0px;--card-mid-blur:0px;--card-end-blur:0px}}@supports not (animation-timeline:scroll()){#hero{display:none}.work-intro:not(.work-intro--closing){padding-top:calc(var(--site-nav-height) + 1.5rem)}}@media (prefers-reduced-motion:reduce){#hero{display:none}.work-intro:not(.work-intro--closing){padding-top:calc(var(--site-nav-height) + 1.5rem)}.nav-brand,.nav-brand-letter,.hero-letter,.hero-scroll-hint,.work-heading-word,#work-scroller>article{opacity:1;filter:none;visibility:visible;transform:none;animation:none!important}.nav-brand,.hero-scroll-hint{pointer-events:auto}.hero-scroll-hint:after{animation:none}.work-intro{height:auto}.work-intro-stage{height:auto;position:relative;top:auto}#work-scroller>article>.portfolio-media>img,#work-scroller>article>.portfolio-details{transition:none}}@media (width>=768px){#work-scroller>article:focus-within:not(:hover)>.portfolio-details{opacity:0;pointer-events:none;transform:translateY(7%)skewY(1.2deg)}#work-scroller>article:focus-visible>.portfolio-details{opacity:1;pointer-events:auto;transform:none}#work-scroller>article:focus-visible>.portfolio-media>img{transform:scale(1.025)}}@media (width<768px){#work-scroller>article:focus-within>.portfolio-details{opacity:0;pointer-events:none;transform:translateY(7%)skewY(1.2deg)}#work-scroller>article.is-active>.portfolio-details{opacity:1;pointer-events:auto;transform:none}#work-scroller>article.is-active>.portfolio-media>img{transform:scale(1.025)}}
+ @font-face{font-family:Ubuntu;font-style:normal;font-weight:700;font-display:swap;src:url(https://afterdarklabs.io/fonts/ubuntu-700-latin.woff2)format("woff2")}:root{--page-bg:#000;--site-nav-height:5.75rem}*,:before,:after{box-sizing:border-box}html{overscroll-behavior-x:none;scroll-behavior:smooth;-webkit-text-size-adjust:100%;max-width:100%;line-height:1.5;overflow-x:clip}@media (width>=1024px){:root{--site-nav-height:5.5rem}html{font-size:125%}}body{overscroll-behavior-x:none;background:var(--page-bg);color:#fff;max-width:100%;font-family:Ubuntu,system-ui,sans-serif;font-weight:700;line-height:inherit;margin:0;overflow-x:clip}h1,h2,p{margin:0}h1,h2{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:none}img,svg{vertical-align:middle;display:block}img{max-width:100%;height:auto}nav{z-index:50;background:#000;width:100%;position:fixed;top:0;backdrop-filter:none!important}.nav-shell{width:100%;max-width:80rem;margin-inline:auto;padding:1rem}.mobile-nav,.desktop-nav{justify-content:space-between;align-items:center}.mobile-nav{gap:.75rem;display:flex}.desktop-nav{display:none}.nav-brand{color:#fff;align-items:center;display:flex}.mobile-nav .nav-brand{text-align:left;border-radius:1rem;min-width:0;padding:.375rem .75rem .375rem .375rem;transition:background-color .15s cubic-bezier(.4,0,.2,1)}.mobile-nav .nav-brand:hover{background:#ffffff1a}.mobile-nav .nav-brand:focus{outline:none}.mobile-nav .nav-brand:focus-visible{outline-offset:2px;outline:2px solid #fff}.desktop-nav .nav-brand{gap:.75rem}@media (width>=640px){.nav-shell{padding-inline:1.5rem}}@media (width>=1024px){.nav-shell{padding-block:1.25rem}.mobile-nav{display:none}.desktop-nav{display:flex}}.hero-content{z-index:2;text-align:center;justify-items:center;gap:2.5rem;width:100%;max-width:none;margin-inline:auto;padding-block:0;padding-inline:0;display:grid;position:relative}#hero{box-sizing:border-box;background:var(--page-bg);height:100svh;min-height:100svh;padding-top:var(--site-nav-height);align-items:center;padding-bottom:0;display:flex;position:relative;overflow:hidden}.nav-brand{transform-origin:0}.nav-cta{letter-spacing:-.035em;border-radius:1rem;flex-shrink:0;justify-content:center;align-items:center;min-height:3.25rem;padding:.75rem 1.15rem;font-size:clamp(1.05rem,5vw,1.3rem);font-weight:700;line-height:1;transition:color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1);display:inline-flex;color:#fff!important;background-color:#000!important}.nav-cta:hover,.nav-cta:focus-visible{color:#000!important;background-color:#fff!important}.nav-brand-word{letter-spacing:-.055em;white-space:nowrap;gap:.22em;padding-right:.08em;font-size:clamp(1.25rem,5.8vw,1.7rem);font-weight:700;line-height:.9;display:flex}.nav-brand-letter{transform-origin:50%;display:inline-block}@media (width>=1024px){.nav-brand-word{font-size:clamp(1.5rem,2.2vw,2rem)}.nav-cta{min-height:2.75rem;padding:.72rem 1.35rem;font-size:clamp(1.2rem,2vw,1.6rem)}}.hero-vignette{pointer-events:none;z-index:1;background:#000;position:absolute;inset:0}@media (width<=767px){#hero{--mobile-nav-height:5.75rem;box-sizing:border-box;height:var(--mobile-hero-height,100svh);min-height:var(--mobile-hero-height,100svh);padding-top:var(--mobile-nav-height);align-items:stretch;padding-bottom:0}.hero-content{align-content:center;gap:0;padding-block:clamp(1.25rem,4svh,2rem)}.hero-content h1{font-size:clamp(2.75rem,min(17vw,9.5svh),4.5rem)}}.hero-content h1{width:max-content;font-size:31vw;font-size:min(31vw, calc((100svh - var(--site-nav-height)) * .4));letter-spacing:-.075em;flex-direction:column;align-items:center;padding-right:.1em;font-weight:700;line-height:.8;display:flex}.hero-letter{transform-origin:50%;display:inline-block}.hero-word{display:block}.hero-scroll-hint{bottom:max(1rem, env(safe-area-inset-bottom));z-index:3;color:#fff;letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:.55rem;font-size:clamp(.7rem,1.1vw,.85rem);font-weight:700;line-height:1;text-decoration:none;transition:opacity .16s;display:inline-flex;position:absolute;left:50%;transform:translate(-50%)}.hero-scroll-hint:after{content:"";border-bottom:.12em solid;border-right:.12em solid;width:.58em;height:.58em;animation:1.65s cubic-bezier(.45,0,.2,1) infinite hero-scroll-nudge}.hero-scroll-hint:hover{opacity:.68}.hero-scroll-hint:focus-visible{outline-offset:.4rem;outline:2px solid #fff}@keyframes hero-scroll-nudge{0%,to{transform:translateY(-.12rem)rotate(45deg)}50%{transform:translateY(.2rem)rotate(45deg)}}.work-intro{background:var(--page-bg);height:100svh;position:relative}.work-intro:not(.work-intro--closing){height:auto}.work-intro-stage{top:var(--site-nav-height);z-index:3;box-sizing:border-box;height:calc(100svh - var(--site-nav-height));align-items:center;padding:clamp(.75rem,1.5vw,1.25rem) clamp(1.5rem,5vw,4rem);display:flex;position:sticky;overflow:hidden}.work-intro:not(.work-intro--closing) .work-intro-stage{align-items:flex-start;height:auto;padding-top:0;padding-bottom:25px;position:relative;top:auto}.work-heading{color:#fff;letter-spacing:-.065em;text-wrap:balance;flex-wrap:wrap;gap:0 .2em;width:100%;max-width:78rem;margin:0 auto;font-size:clamp(2.85rem,8vw,7rem);font-weight:700;line-height:.94;display:flex}#work-heading{scroll-margin-top:calc(var(--site-nav-height) + 1rem)}.work-heading-words{display:contents}.work-heading-word{display:inline-block}.work-heading-email{color:inherit;width:100%;font-weight:700;text-shadow:.018em 0 transparent,-.018em 0 transparent;text-decoration:none;transition:text-shadow .16s}.work-heading-email .bi-send{vertical-align:-.06em;width:.9em;height:.9em;display:inline-block}.work-heading-email:hover,.work-heading-email:focus-visible{text-shadow:.018em 0,-.018em 0}.work-heading-email:focus-visible{outline-offset:.075em;outline:.055em solid #fff}.work-intro--closing{height:auto;min-height:0}.work-intro--closing .work-intro-stage{align-items:flex-start;height:auto;padding-top:48px;padding-bottom:56px;position:relative;top:auto}.work-stage{box-sizing:border-box;padding:clamp(0rem,.5vw,.5rem) clamp(1rem,2vw,2rem)}#work{background:var(--page-bg);scroll-margin-top:6rem}.work-stage-content{width:100%;min-width:0;max-width:none;margin-inline:auto}#work-scroller{touch-action:pan-y pinch-zoom;grid-template-columns:minmax(0,1fr);gap:clamp(.3rem,.6vw,.65rem);padding:0;display:grid;overflow:visible}#work-scroller>article{isolation:isolate;aspect-ratio:16/9;background:var(--page-bg);border-radius:0;width:100%;min-width:0;position:relative;overflow:hidden}#work-scroller>article>.portfolio-media{border-radius:0;width:100%;height:100%;display:block}#work-scroller>article>.portfolio-media>img{aspect-ratio:auto;object-fit:cover;width:100%;height:100%;transition:transform .6s cubic-bezier(.16,1,.3,1)}#work-scroller>article>.portfolio-details{z-index:2;box-sizing:border-box;opacity:0;pointer-events:none;transform-origin:bottom;backdrop-filter:blur(.35rem);background:#000000f0;align-items:center;padding:clamp(1rem,2.5vw,2.75rem);transition:opacity .18s,transform .52s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;inset:0;overflow:hidden;transform:translateY(7%)skewY(1.2deg)}#work-scroller>article:focus-within>.portfolio-details{opacity:1;pointer-events:auto;transform:none}#work-scroller>article:focus-within>.portfolio-media>img{transform:scale(1.025)}#work-scroller>article:focus-visible{outline-offset:-2px;outline:2px solid #fff}#work-scroller>article>.portfolio-details>p{color:#fff;width:100%;font-size:var(--portfolio-copy-size,clamp(1.2rem, 3vw, 3.5rem));letter-spacing:-.04em;text-wrap:balance;margin:0;font-weight:700;line-height:.98}#work-scroller>article:first-child{--portfolio-copy-size:clamp(12px, calc(8.165vw - 5.73px), 88px)}#work-scroller>article:nth-child(2){--portfolio-copy-size:clamp(12px, calc(7.715vw - 6.08px), 88px)}#work-scroller>article:nth-child(3){--portfolio-copy-size:clamp(12px, calc(6.816vw - 4.68px), 88px)}#work-scroller>article:nth-child(4){--portfolio-copy-size:clamp(12px, calc(7.715vw - 6.08px), 88px)}#work-scroller>article:nth-child(5){--portfolio-copy-size:clamp(12px, calc(8.015vw - 5.58px), 88px)}#work-scroller>article:nth-child(6){--portfolio-copy-size:clamp(12px, calc(6.779vw - 5.5px), 88px)}#work-scroller>article:nth-child(7){--portfolio-copy-size:clamp(12px, calc(6.816vw - 4.68px), 88px)}#work-scroller>article:nth-child(8){--portfolio-copy-size:clamp(12px, calc(6.779vw - 5.5px), 88px)}.portfolio-description{color:#fff;display:block}.portfolio-name{font-weight:700;text-shadow:.018em 0,-.018em 0}.portfolio-live-link{color:#fff;text-shadow:.018em 0 transparent,-.018em 0 transparent;white-space:nowrap;align-items:baseline;gap:.18em;font-weight:700;text-decoration:none;transition:text-shadow .16s;display:inline-flex}.portfolio-live-link svg{flex:none;width:.72em;height:.72em}.portfolio-live-link svg path{stroke:currentColor;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill;transition:stroke-width .16s}.portfolio-live-link:hover,.portfolio-live-link:focus-visible{text-shadow:.018em 0,-.018em 0;font-weight:700}.portfolio-live-link:hover svg path,.portfolio-live-link:focus-visible svg path{stroke-width:.45px}.portfolio-live-link:focus-visible{outline-offset:.08em;outline:.09em solid #fff}@media (width>=768px){#work-scroller{grid-template-columns:repeat(2,minmax(0,1fr))}#work-scroller>article:first-child{--portfolio-copy-size:clamp(12px, calc(3.576vw - .87px), 88px)}#work-scroller>article:nth-child(2){--portfolio-copy-size:clamp(12px, calc(3.238vw - .77px), 88px)}#work-scroller>article:nth-child(3){--portfolio-copy-size:clamp(12px, calc(2.995vw - .7px), 88px)}#work-scroller>article:nth-child(4){--portfolio-copy-size:clamp(12px, calc(3.229vw - .8px), 88px)}#work-scroller>article:nth-child(5){--portfolio-copy-size:clamp(12px, calc(3.507vw - .73px), 88px)}#work-scroller>article:nth-child(6){--portfolio-copy-size:clamp(12px, calc(2.769vw - .57px), 88px)}#work-scroller>article:nth-child(7){--portfolio-copy-size:clamp(12px, calc(3.003vw - .76px), 88px)}#work-scroller>article:nth-child(8){--portfolio-copy-size:clamp(12px, calc(2.856vw - .63px), 88px)}}@media (width>=768px) and (hover:hover){#work-scroller>article:hover>.portfolio-details{opacity:1;pointer-events:auto;transform:none}#work-scroller>article:hover>.portfolio-media>img{transform:scale(1.025)}}@media (hover:none),(pointer:coarse){#work-scroller>article{cursor:pointer}#work-scroller>article>.portfolio-details{backdrop-filter:none}}@supports (animation-timeline:scroll()){.hero-letter,.nav-brand-letter{animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root);animation-range-start:var(--hero-range-start);animation-range-end:var(--hero-range-end)}.hero-letter{will-change:opacity,transform;animation-name:hero-letter-out}.nav-brand-letter{will-change:opacity,transform;animation-name:nav-letter-in}.hero-letter:first-child,.nav-brand-letter:first-child{--hero-range-start:4.5svh;--hero-range-end:31svh}.hero-letter:nth-child(2),.nav-brand-letter:nth-child(2){--hero-range-start:25svh;--hero-range-end:51.5svh}.hero-letter:nth-child(3),.nav-brand-letter:nth-child(3){--hero-range-start:45.5svh;--hero-range-end:72svh}.nav-brand{animation-name:nav-brand-enable;animation-duration:auto;animation-timing-function:step-end;animation-fill-mode:both;animation-timeline:scroll(root);animation-range:4.5svh calc(4.5svh + 1px)}.hero-scroll-hint{animation-name:scroll-hint-out;animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root);animation-range:45.5svh 72svh}.work-intro:not(.work-intro--closing){view-timeline-name:--work-intro;view-timeline-axis:block}.work-intro:not(.work-intro--closing) .work-heading-word{animation-name:heading-word-in;animation-duration:auto;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both;animation-timeline:--work-intro;animation-range-start:var(--word-range-start);animation-range-end:var(--word-range-end);transform-origin:0 100%}.work-intro:not(.work-intro--closing) .work-heading-word:first-child{--word-range-start:cover 38%;--word-range-end:cover 44%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(2){--word-range-start:cover 39.2%;--word-range-end:cover 45.2%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(3){--word-range-start:cover 40.4%;--word-range-end:cover 46.4%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(4){--word-range-start:cover 41.6%;--word-range-end:cover 47.6%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(5){--word-range-start:cover 42.8%;--word-range-end:cover 48.8%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(6){--word-range-start:cover 44%;--word-range-end:cover 50%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(7){--word-range-start:cover 45.2%;--word-range-end:cover 51.2%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(8){--word-range-start:cover 46.4%;--word-range-end:cover 52.4%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(9){--word-range-start:cover 47.6%;--word-range-end:cover 53.6%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(10){--word-range-start:cover 48.8%;--word-range-end:cover 54.8%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(11){--word-range-start:cover 50%;--word-range-end:cover 56%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(12){--word-range-start:cover 51.2%;--word-range-end:cover 57.2%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(13){--word-range-start:cover 52.4%;--word-range-end:cover 58.4%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(14){--word-range-start:cover 53.6%;--word-range-end:cover 59.6%}#work-scroller>article{--card-start-blur:7px;--card-mid-blur:3.5px;--card-end-blur:1.25px;animation-name:portfolio-card-in-left;animation-duration:auto;transform-origin:bottom;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:cover 4% cover 45%}#work-scroller>article:nth-child(2n){animation-name:portfolio-card-in-right}.work-intro--closing{view-timeline-name:--closing-intro;view-timeline-axis:block}.work-intro--closing .work-heading-email,.work-intro--closing .work-heading-email>.work-heading-word{animation-name:heading-word-in;animation-duration:auto;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both;animation-timeline:--closing-intro;animation-range-start:var(--closing-range-start);animation-range-end:var(--closing-range-end);transform-origin:0 100%}.work-intro--closing .work-heading-email{--closing-range-start:entry 4%;--closing-range-end:entry 20%}.work-intro--closing .work-heading-email>.work-heading-word:first-child{--closing-range-start:entry 18%;--closing-range-end:entry 34%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(2){--closing-range-start:entry 32%;--closing-range-end:entry 48%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(3){--closing-range-start:entry 46%;--closing-range-end:entry 62%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(4){--closing-range-start:entry 60%;--closing-range-end:entry 76%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(5){--closing-range-start:entry 74%;--closing-range-end:entry 90%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(6){--closing-range-start:entry 84%;--closing-range-end:entry 100%}@media (orientation:portrait){#work-scroller>article:last-child{animation-range-end:cover 30%}}@media (width>=768px) and (orientation:portrait){#work-scroller>article:nth-last-child(2){animation-range-end:cover 30%}}}@keyframes hero-letter-out{0%{opacity:1;transform:scale(1)}35%{opacity:.72;transform:scale(.984)}65%{opacity:.28;transform:scale(.961)}to{opacity:0;transform:scale(.945)}}@keyframes nav-letter-in{0%{opacity:0;transform:translate(-1.35rem)rotate(-12deg)skew(-18deg)scale(.38,1.28)}35%{opacity:.28;transform:translate(-.82rem,.08rem)rotate(-6deg)skew(-10deg)scale(.61,1.15)}65%{opacity:.72;transform:translate(-.18rem,-.04rem)rotate(1.5deg)skew(2deg)scale(.9,1.04)}82%{opacity:.92;transform:translate(.05rem,.02rem)rotate(-.8deg)skew(-1deg)scale(1.02,.99)}to{opacity:1;transform:none}}@keyframes nav-brand-enable{0%{opacity:0}to{opacity:1}}@keyframes scroll-hint-out{0%{opacity:1}to{opacity:0}}@keyframes heading-word-in{0%{opacity:0;transform:translateY(.42em)rotate(1.5deg)}to{opacity:1;transform:none}}@keyframes portfolio-card-in-left{0%{opacity:0;transform:translate(-6vw,96px)rotate(-5deg)skewY(0)scale(.93,1.065)}50%{opacity:.82;transform:translate(-2vw,42px)rotate(-1.5deg)skewY(-.8deg)scale(.975,1.025)}72%{opacity:1;transform:translate(.35vw,8px)rotate(.7deg)skewY(.25deg)scale(1.006,.996)}to{opacity:1;transform:none}}@keyframes portfolio-card-in-right{0%{opacity:0;transform:translate(6vw,96px)rotate(5deg)skewY(0)scale(.93,1.065)}50%{opacity:.82;transform:translate(2vw,42px)rotate(1.5deg)skewY(.8deg)scale(.975,1.025)}72%{opacity:1;transform:translate(-.35vw,8px)rotate(-.7deg)skewY(-.25deg)scale(1.006,.996)}to{opacity:1;transform:none}}@media (hover:none),(pointer:coarse){#work-scroller>article{--card-start-blur:0px;--card-mid-blur:0px;--card-end-blur:0px}}@supports not (animation-timeline:scroll()){#work-scroller>article>.portfolio-details>p,.work-intro--closing .work-heading{ text-wrap:wrap;}#hero{display:none}.work-intro:not(.work-intro--closing){padding-top:calc(var(--site-nav-height) + 1.5rem)}}@media (prefers-reduced-motion:reduce){#hero{display:none}.work-intro:not(.work-intro--closing){padding-top:calc(var(--site-nav-height) + 1.5rem)}.nav-brand,.nav-brand-letter,.hero-letter,.hero-scroll-hint,.work-heading-word,#work-scroller>article{opacity:1;filter:none;visibility:visible;transform:none;animation:none!important}.nav-brand,.hero-scroll-hint{pointer-events:auto}.hero-scroll-hint:after{animation:none}.work-intro{height:auto}.work-intro-stage{height:auto;position:relative;top:auto}#work-scroller>article>.portfolio-media>img,#work-scroller>article>.portfolio-details{transition:none}}@media (width>=768px){#work-scroller>article:focus-within:not(:hover)>.portfolio-details{opacity:0;pointer-events:none;transform:translateY(7%)skewY(1.2deg)}#work-scroller>article:focus-visible>.portfolio-details{opacity:1;pointer-events:auto;transform:none}#work-scroller>article:focus-visible>.portfolio-media>img{transform:scale(1.025)}}@media (width<768px){#work-scroller>article:focus-within>.portfolio-details{opacity:0;pointer-events:none;transform:translateY(7%)skewY(1.2deg)}#work-scroller>article.is-active>.portfolio-details{opacity:1;pointer-events:auto;transform:none}#work-scroller>article.is-active>.portfolio-media>img{transform:scale(1.025)}}
</style>
<script type="application/ld+json">
{