:root{--ink:#16181f;--ink-deep:#101218;--ink-raise:#1d2029;--paper:#e8e4da;--gold:#fc0;--red:#d42a1e;--slate:#a6bac4;--line:#e8e4da24;--display:"Fraunces", "Libre Baskerville", serif;--body:"Archivo", "Open Sans", sans-serif;--mono:"IBM Plex Mono", monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--ink);color:var(--paper);font-family:var(--body);-webkit-font-smoothing:antialiased;margin:0;font-size:1rem;line-height:1.6;overflow-x:clip}::selection{background:var(--gold);color:var(--ink)}img{max-width:100%;height:auto;display:block}a{color:var(--gold)}body:before{content:"";z-index:2000;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");position:fixed;inset:0}#progress{background:linear-gradient(90deg, var(--red), var(--gold));transform-origin:0;z-index:1000;width:100%;height:3px;position:fixed;top:0;left:0;transform:scaleX(0)}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){@keyframes grow-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}#progress{animation:linear grow-progress scroll(root)}}}.site-head{z-index:900;font-family:var(--mono);letter-spacing:.22em;text-transform:uppercase;pointer-events:none;background:linear-gradient(#101218d9,#10121800);justify-content:space-between;align-items:center;padding:1.1rem clamp(1.25rem,4vw,3rem);font-size:.72rem;display:flex;position:fixed;top:0;left:0;right:0}.site-head a{pointer-events:auto;color:var(--paper);text-decoration:none;transition:color .25s}.site-head a:hover{color:var(--gold)}.wordmark{align-items:center;gap:.6em;display:flex}.dot{background:var(--paper);opacity:.5;border-radius:50%;flex:none;width:10px;height:10px}.hero{view-timeline:--hero;background:url(/img/Web/2023-frogtape-design-trends.webp) 50%/cover no-repeat;align-content:center;min-height:100svh;padding:55vh clamp(1.25rem,4vw,3rem) 4rem;display:grid;position:relative}.hero-kicker{font-family:var(--mono);color:#fff;letter-spacing:.35em;text-transform:uppercase;align-items:center;gap:1rem;margin:0 0 1.5rem;font-size:clamp(.7rem,1.4vw,.85rem);display:flex}.hero-kicker:before{content:"";background:var(--gold);width:3em;height:1px}.hero h1{font-family:var(--display);font-variation-settings:"opsz" 144, "SOFT" 0, "WONK" 1;letter-spacing:-.02em;text-wrap:balance;margin:0;font-size:clamp(3.2rem,8.5vw,11.5rem);font-weight:560;line-height:.92}.hero h1 .accent{color:var(--gold);font-weight:400}.hero h1 .mark-dot{background:var(--red);border-radius:50%;width:.14em;height:.14em;margin-left:.06em;display:inline-block}.hero-sub{max-width:34em;color:var(--paper);margin:2.2rem 0 0;font-size:clamp(1rem,1.8vw,1.2rem)}.hero-sub strong{color:var(--paper);font-weight:600}.hero-glyphs{pointer-events:none;z-index:-1;position:absolute;inset:0;overflow:clip}.hero-glyphs span{font-family:var(--display);color:#0000;-webkit-text-stroke:1px #e8e4da17;user-select:none;font-size:clamp(6rem,18vw,26rem);font-style:italic;line-height:1;position:absolute}.hero-glyphs span:first-child{top:4%;right:4%}.hero-glyphs span:nth-child(2){-webkit-text-stroke-color:#ffcc0014;bottom:18%;left:4%}.hero-glyphs span:nth-child(3){-webkit-text-stroke-color:#d42a1e24;font-size:clamp(4rem,12vw,13rem);top:40%;right:8%}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()) and (animation-range:entry){@keyframes drift-up{to{transform:translateY(-18vh)rotate(4deg)}}@keyframes drift-down{to{transform:translateY(14vh)rotate(-3deg)}}.hero-glyphs span:nth-child(odd){animation:linear both drift-up --hero;animation-range:exit}.hero-glyphs span:nth-child(2n){animation:linear both drift-down --hero;animation-range:exit}@keyframes hero-fade{to{opacity:0;transform:translateY(-6vh)}}.hero>:not(.hero-glyphs){animation:linear both hero-fade --hero;animation-range:exit 10% exit 90%}}@keyframes rise-in{0%{opacity:0;transform:translateY(1.6rem)}to{opacity:1;transform:none}}.hero-kicker,.hero h1,.hero-sub,.scroll-cue{animation:.9s cubic-bezier(.22,1,.36,1) backwards rise-in}.hero h1{animation-delay:.12s}.hero-sub{animation-delay:.28s}.scroll-cue{animation-delay:.5s}}.scroll-cue{font-family:var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--slate);align-items:center;gap:.8rem;font-size:.7rem;display:flex;position:absolute;bottom:2rem;left:clamp(1.25rem,4vw,3rem)}.scroll-cue:after{content:"";background:linear-gradient(to bottom, var(--gold), transparent);width:1px;height:3.2em}@media (prefers-reduced-motion:no-preference){@keyframes cue-pulse{0%,to{opacity:.5}50%{opacity:1}}.scroll-cue:after{animation:2.2s ease-in-out infinite cue-pulse}}.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-deep);padding:1.1rem 0;display:flex;overflow:clip}.marquee-track{white-space:nowrap;font-family:var(--display);color:var(--slate);flex:none;gap:3rem;padding-right:3rem;font-size:clamp(1.1rem,2.4vw,1.6rem);font-style:italic;display:flex}.marquee-track em{font-style:normal;font-family:var(--mono);color:var(--gold);letter-spacing:.3em;align-self:center;font-size:.6em}@media (prefers-reduced-motion:no-preference){@keyframes marquee-scroll{to{transform:translate(-100%)}}.marquee-track{animation:28s linear infinite marquee-scroll}}.work{padding:clamp(4rem,10vh,8rem) clamp(1.25rem,4vw,3rem)}.chapter{grid-template-columns:1fr;gap:2rem;max-width:1500px;margin:0 auto clamp(6rem,14vh,11rem);display:grid}@media (width>=900px){.chapter{grid-template-columns:minmax(240px,1fr) 3fr;gap:clamp(2rem,5vw,5rem)}}.chapter-meta{position:relative}@media (width>=900px){.chapter-meta-inner{position:sticky;top:6rem}}.chapter-index{font-family:var(--mono);letter-spacing:.3em;color:var(--red);margin-bottom:1rem;font-size:.72rem;display:block}.chapter h2{font-family:var(--display);font-variation-settings:"opsz" 100;letter-spacing:-.015em;text-wrap:balance;margin:0 0 1.2rem;font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:500;line-height:1.05}.chapter p{color:var(--slate);max-width:38em;margin:0 0 1rem;font-size:.98rem}.chapter .visit{font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--gold);padding-bottom:.2em;font-size:.75rem;text-decoration:none;transition:color .25s,border-color .25s}.chapter .visit:hover{color:var(--paper);border-color:var(--paper)}.chapter-divider{font-family:var(--display);color:var(--gold);text-align:center;letter-spacing:-.02em;max-width:1500px;margin:0 auto clamp(6rem,14vh,11rem);padding:0 clamp(1.25rem,4vw,3rem);font-size:clamp(2.2rem,6vw,4.5rem);font-style:italic}.chapter-divider small{font-family:var(--mono);letter-spacing:.35em;text-transform:uppercase;color:var(--slate);margin-bottom:1rem;font-size:.72rem;font-style:normal;display:block}.gallery{grid-template-columns:1fr;gap:clamp(1.2rem,2.5vw,2rem);margin:0;padding:0;list-style:none;display:grid}@media (width>=700px){.gallery{grid-template-columns:1fr 1fr}.gallery>li:nth-child(4n+1):last-child,.gallery>li:only-child{grid-column:1/-1}.gallery.stagger>li:nth-child(2n){transform:translateY(clamp(1.5rem,4vw,3.5rem))}}.gallery figure{margin:0;position:relative}.gallery img{border:1px solid var(--line);background:var(--ink-raise);width:100%;transition:transform .5s cubic-bezier(.34,.14,.25,1),border-color .35s}.gallery a{display:block}.gallery a:hover img{border-color:var(--gold);transform:scale(1.02)rotate(-.3deg)}.gallery figcaption{font-family:var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--slate);margin-top:.7rem;font-size:.68rem}.gallery.gallery--snap{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-color:var(--slate) var(--ink-raise);scrollbar-width:thin;flex-wrap:nowrap;gap:clamp(1.2rem,2.5vw,2rem);width:calc(100% + clamp(1.25rem,4vw,3rem));display:flex;overflow-x:auto}.gallery.gallery--snap::-webkit-scrollbar{height:8px}.gallery.gallery--snap::-webkit-scrollbar-track{background:var(--ink-raise);border-radius:8px}.gallery.gallery--snap::-webkit-scrollbar-thumb{background:var(--slate);border-radius:8px}.gallery.gallery--snap::-webkit-scrollbar-thumb:hover{background:var(--gold)}@media (width>=900px){.gallery.gallery--snap{width:calc(50vw + 33.3333% - clamp(2rem,5vw,5rem)/2)}}.gallery.gallery--snap>li{scroll-snap-align:start;flex:none;width:calc(83.3333% - clamp(1.2rem,2.5vw,2rem)/6)}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()) and (animation-range:entry){@keyframes reveal{0%,20%{opacity:0;clip-path:inset(12% 6%);transform:translateY(3.5rem)}to{opacity:1;clip-path:inset(0)}}.gallery>li{animation:linear backwards reveal view();animation-range:entry entry 70%}@keyframes snap-fade{0%{opacity:0}to{opacity:1}}.gallery.gallery--snap>li{animation:linear backwards snap-fade view(inline);animation-range:entry entry 15%}@keyframes meta-reveal{0%,20%{opacity:0;transform:translate(-14.5rem)}}.chapter-meta-inner{animation:linear backwards meta-reveal view();animation-range:entry entry 50%}@keyframes divider-in{0%,20%{opacity:0;letter-spacing:.15em}to{opacity:1;letter-spacing:-.02em}}.chapter-divider{animation:linear backwards divider-in view();animation-range:entry entry 70%}}}.site-foot{border-top:1px solid var(--line);background:var(--ink-deep);text-align:center;padding:clamp(4rem,12vh,8rem) clamp(1.25rem,4vw,3rem) 3rem}.site-foot .kicker{font-family:var(--mono);letter-spacing:.35em;text-transform:uppercase;color:var(--slate);margin:0 0 1.5rem;font-size:1.72rem}.site-foot .cta{font-family:var(--display);font-variation-settings:"opsz" 144, "WONK" 1;letter-spacing:-.02em;color:var(--paper);font-size:clamp(2rem,7vw,5.5rem);font-weight:500;line-height:1;text-decoration:none;transition:color .3s;display:inline-block}.site-foot .cta em{color:var(--gold);font-weight:400}.site-foot .cta:hover{color:var(--gold)}.site-foot .fine{font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--slate);justify-content:center;align-items:center;gap:.8rem;margin-top:4rem;font-size:.68rem;display:flex}.site-foot .fine .dot{background:var(--gold);border-radius:50%;width:8px;height:8px}.portfolio .site-head{background:var(--ink-deep);pointer-events:auto;letter-spacing:.06em;border-bottom:1px solid var(--line);gap:1.5rem;position:sticky}.portfolio .site-head nav{align-items:center;gap:clamp(1rem,2.4vw,2.5rem);display:flex}.portfolio .site-head nav a{white-space:nowrap;padding:.65rem 0}.portfolio .site-head a[aria-current=page]{color:var(--gold);text-underline-offset:.65rem;text-decoration:underline}.portfolio .hero{background:0 0;max-width:1596px;min-height:auto;margin:auto;padding:clamp(3rem,7vw,6rem) clamp(1.25rem,4vw,3rem) 3rem}.portfolio .hero>*,.portfolio .chapter-meta-inner,.portfolio .gallery>li{animation:none}.portfolio .hero h1{font-size:clamp(3.2rem,7vw,6rem)}.portfolio .hero-position{margin:1.5rem 0 0;font-size:clamp(1.2rem,2vw,1.6rem)}.portfolio .hero-sub{max-width:45ch;color:var(--slate);margin-top:.6rem;font-size:1.05rem}.portfolio .work{padding-top:0;padding-bottom:0;scroll-margin-top:8rem}.portfolio .chapter{border-bottom:1px solid var(--line);margin-bottom:3rem;padding-bottom:3rem}.portfolio .chapter h2{font-size:clamp(1.8rem,3vw,2.7rem)}.portfolio .chapter .project-role{color:var(--gold);margin:.8rem 0 1rem;font-size:.85rem}.portfolio .gallery.gallery--snap{width:100%;padding-bottom:.85rem}.portfolio .gallery.gallery--snap>li{width:88%}.portfolio .gallery figcaption{letter-spacing:.04em;text-transform:none;font-size:.8rem}.project-story{margin-top:1.5rem}.portfolio .project-story p{font-size:.95rem}.portfolio :focus-visible{outline:2px solid var(--gold);outline-offset:5px}.skip-link{z-index:2100;background:var(--paper);color:var(--ink);padding:.75rem 1rem;position:fixed;top:.5rem;left:1rem;transform:translateY(-200%)}.skip-link:focus{transform:translateY(0)}.portfolio .site-foot .kicker{letter-spacing:.12em;font-size:1rem}@media (width<=850px){.portfolio .site-head{flex-direction:column;align-items:flex-start;gap:.35rem;padding-block:.75rem}.portfolio .site-head nav{flex-wrap:wrap;gap:1.2rem;width:100%}.portfolio .chapter-meta-inner{position:static}}@media (width<=480px){.portfolio .site-head{font-size:.66rem}.portfolio .site-head nav{gap:0 1rem}.portfolio .hero{padding-top:2.5rem}.portfolio .gallery.gallery--snap>li{width:94%}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}.portfolio .chapter{scroll-margin-top:10rem}.project-gallery{min-width:0}.gallery-controls:not([hidden]){justify-content:space-between;align-items:center;gap:.75rem;margin-top:.75rem;display:flex}.gallery-controls button{font:inherit;color:var(--paper);border:1px solid var(--slate);cursor:pointer;background:0 0;min-height:44px;padding:.6rem .85rem}.gallery-controls button:hover:not(:disabled){color:var(--gold);border-color:var(--gold)}.gallery-controls button:disabled{opacity:.45;cursor:default}.gallery-controls [data-image-count]{color:var(--slate);font-variant-numeric:tabular-nums;font-size:.85rem}.contact-links{flex-wrap:wrap;justify-content:center;gap:.5rem 2rem;margin-top:2rem;display:flex}.contact-links a{text-underline-offset:.3em;padding-block:.65rem}.site-foot h2.cta{margin:0}.portfolio .hero.hero--image{background:linear-gradient(90deg,#10121899,#10121833,#1012181a),url(/img/Web/2023-frogtape-design-trends.webp) 50%/cover no-repeat;align-content:end;max-width:none;min-height:75svh;margin:0 0 3rem;padding:clamp(5rem,16vh,10rem) clamp(1.25rem,4vw,3rem) 4rem}.portfolio .hero--image .hero-sub{color:var(--paper)}@media (width<=600px){.portfolio .hero.hero--image{background-position:50%;min-height:70svh;padding-top:4rem}}