@font-face{font-family:Display;src:url('/assets/barlow.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Sans;src:url('/assets/dmsans.woff2') format('woff2');font-weight:400 750;font-display:swap}
:root{--night:#090f25;--ink:#101837;--cream:#f9f5e9;--iris:#91a8ff;--electric:#254bea;--line:#c6c7c3;--pad:clamp(22px,5.3vw,96px);color:var(--cream);background:var(--night);font:400 16px/1.5 Sans,Arial,sans-serif;scroll-behavior:smooth;scroll-padding-top:14px}
*{box-sizing:border-box}body,p,h1,h2,h3,figure{margin:0}.wrap{width:min(1550px,100%);margin:auto;padding-inline:var(--pad)}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}.skip{position:fixed;z-index:10;left:12px;top:-120px;background:var(--cream);color:var(--night);padding:14px}.skip:focus{top:8px}:focus-visible{outline:3px solid #7298ff;outline-offset:5px}#symbols{display:none}svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px;flex:none}
header{background:var(--night);border-bottom:1px solid #ffffff24}.top{height:72px;display:flex;align-items:center;gap:clamp(18px,4vw,70px)}.brand{display:inline-flex;align-items:center;gap:10px;font-size:25px;font-weight:750;letter-spacing:-1.5px}.brand span{color:var(--iris)}.brand img{border-radius:50%}.top nav{margin-left:auto;display:flex;gap:25px;font-size:14px}.top nav a:hover,.subcta:hover{color:var(--iris)}.topwa{display:flex;gap:10px;align-items:center;font-weight:550;font-size:13px;border:1px solid #65718c;border-radius:30px;padding:9px 15px}.topwa svg{width:16px;height:16px}.topwa:hover{border-color:var(--iris)}
.hero{background:var(--night)}.hero-layout{max-width:1720px;margin:auto;display:grid;grid-template-columns:48% 52%;min-height:clamp(570px,43vw,720px);position:relative}.hero-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(38px,4vw,78px) 30px clamp(34px,4vw,75px) clamp(22px,5.3vw,96px);position:relative;z-index:1}.kicker,.category,.scene figcaption{font:600 10px/1.5 Sans,Arial,sans-serif;text-transform:uppercase;letter-spacing:.17em}.kicker{display:flex;align-items:center;gap:10px}.kicker>span:not(.mark){opacity:.5}.mark{width:11px;height:11px;display:inline-block;background:var(--iris);clip-path:polygon(0 0,65% 0,100% 35%,100% 100%,35% 100%,0 65%)}h1,.work h2,.contact h2,.missing h1{font:700 clamp(85px,8.6vw,143px)/.85 Display,Impact,'Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:-.034em}.hero h1{margin:26px 0 24px}.hero h1 span{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}.hero h1 b{display:block;font:inherit;animation:unfold .74s cubic-bezier(.19,1,.22,1) both}.hero h1 span:nth-child(2) b{animation-delay:.08s}.hero h1 span:nth-child(3) b{color:var(--iris);animation-delay:.15s}.hero-lede{font-size:clamp(16px,1.23vw,21px);line-height:1.45;max-width:410px;color:#e0e4f3}.actions{display:flex;align-items:center;gap:22px;margin-top:24px}.btn,.subcta{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:14px;font-weight:650;line-height:1.2}.btn{padding:17px 19px;border-radius:5px;transition:transform .2s,background .2s}.light{background:var(--cream);color:var(--night)}.btn:hover{background:white;transform:translateY(-2px)}.btn svg,.subcta svg{width:17px;height:17px;transition:transform .22s}.btn:hover svg{transform:translate(2px,-2px)}.scene{position:relative;isolation:isolate;overflow:hidden;background:#16245d;min-width:0;min-height:100%;border-left:1px solid #ffffff30}.scene picture,.scene picture img{position:absolute;inset:0;display:block;height:100%;width:100%;object-fit:cover;object-position:55% 48%}.scene picture{animation:projector 1.1s cubic-bezier(.16,.72,.22,1) both}.scene:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#060e257d,transparent 23%);pointer-events:none}.scene figcaption{position:absolute;bottom:23px;left:28px;right:28px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;color:white;text-shadow:0 1px 4px #000}.scene figcaption strong{font-weight:600;letter-spacing:.04em;text-transform:none;font-size:12px}.corners{position:absolute;inset:19px;z-index:2;pointer-events:none}.corners i{position:absolute;width:13px;height:13px;border-style:solid;border-color:#fff9;border-width:1px 0 0 1px}.corners i:nth-child(1){left:0;top:0}.corners i:nth-child(2){right:0;top:0;transform:rotate(90deg)}.corners i:nth-child(3){left:0;bottom:0;transform:rotate(-90deg)}.corners i:nth-child(4){right:0;bottom:0;transform:rotate(180deg)}
.work{background:var(--cream);color:var(--ink);padding:clamp(52px,6vw,92px) 0}.section-top{border-bottom:1px solid #bfc0bc;padding-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:15px}.section-top .mark{background:var(--electric)}.section-top>p{font-size:13px;color:#3e4557}.work h2,.contact h2{font-size:clamp(65px,7.1vw,114px);line-height:.9}.work h2{margin:23px 0 30px}.work h2 em,.contact h2 em{font-family:Georgia,'Times New Roman',serif;font-size:.91em;font-weight:normal;text-transform:none;letter-spacing:-.075em}.work h2 em{color:var(--electric)}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(15px,2vw,36px)}.tile{display:block;width:100%;aspect-ratio:1.14;position:relative;isolation:isolate;overflow:hidden;border:0;border-radius:4px}.commerce{background:radial-gradient(at 13% 12%,#b7d8df,#6a91a4)}.trades{background:radial-gradient(at 5% 2%,#ffe1ad,#d2a678 72%)}.book{background:repeating-linear-gradient(-28deg,#19399c 0 13px,#163590 14px 15px)}.movie-art,.paper-art{position:absolute;inset:0;display:block;transition:transform .5s cubic-bezier(.22,.61,.26,1)}.movie-art img{position:absolute;width:49%;height:auto;border-radius:8% / 4.6%;border:clamp(3px,.3vw,6px) solid #171b2c;box-shadow:3px 8px 0 #14172845,9px 12px 22px #101c3f55}.movie-art img:first-child{right:-3%;top:18%;transform:rotate(13deg)}.movie-art img:last-child{top:-8%;left:11%;transform:rotate(-10deg)}.trades .movie-art img:first-child{right:3%;transform:rotate(-5deg)}.trades .movie-art img:last-child{transform:rotate(10deg);top:-8%;left:0}.paper-art img{width:54%;height:auto;position:absolute;box-shadow:1px 2px 0 #baa77e,3px 5px 0 #ada28e,6px 9px 18px #01051780}.paper-art img:first-child{left:37%;top:17%;transform:rotate(12deg)}.paper-art img:last-child{left:11%;top:10%;transform:rotate(-10deg)}.tile:hover .movie-art,.tile:hover .paper-art{transform:scale(1.045) rotate(-1deg)}.open-icon{position:absolute;bottom:12px;left:12px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--cream);color:var(--ink);box-shadow:0 1px 8px #10153733}.open-icon svg{width:18px;height:18px}.category{margin:15px 0 5px;display:flex;align-items:center;gap:7px;font-size:9px;color:#4e5260}.category i{width:13px;height:1px;background:#8a8e96}.gallery h3{font-weight:650;font-size:clamp(18px,1.7vw,27px);line-height:1.15;letter-spacing:-.049em}
.contact{position:relative;isolation:isolate;overflow:hidden;background:#102b98;color:var(--cream);padding:clamp(55px,5vw,88px) 0}.contact-bg{position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 42%,#2549c577 42% 44%,transparent 44% 46%,#173cbd90 46% 49%,transparent 49% 51%,#3856be66 51% 55%,transparent 55%),linear-gradient(125deg,#101c48,#1e40bf 72%,#102570)}.contact-inner{display:grid;grid-template-columns:1.15fr 1fr;gap:12%;align-items:center}.contact h2{margin-top:22px}.contact h2 em{color:#c8d5ff}.contact-action{max-width:390px}.contact-action p{margin-bottom:19px;font-size:clamp(16px,1.2vw,20px);line-height:1.5}.phone{display:block;margin-top:10px;font-size:12px;letter-spacing:.05em;color:#dae2ff}.dock{display:none}
dialog{border:1px solid #626e8a;background:#111a37;color:var(--cream);padding:14px;border-radius:9px;max-width:calc(100vw - 20px);max-height:calc(100dvh - 16px);width:fit-content;overflow:auto;box-shadow:0 20px 80px #0007}dialog[open]{animation:cutin .26s ease-out}dialog::backdrop{background:#030817df;backdrop-filter:blur(4px)}.viewer-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:8px}.viewer-head h2{font-size:16px;letter-spacing:-.025em}.close,.pager button{color:inherit;background:transparent;border:1px solid #7884a1;border-radius:50%;width:42px;height:42px;font-size:24px;line-height:1}.pager button:disabled{opacity:.33}.pager{display:flex;align-items:center;justify-content:space-between;padding-top:8px;font-size:13px}.pager[hidden]{display:none}#stage video,#stage img{display:block;max-width:100%;margin:auto;max-height:calc(100dvh - 123px);border-radius:3px}#stage img{max-height:calc(100dvh - 160px)}#stage video{aspect-ratio:9/16;min-width:min(260px,73vw);background:#080d1f}.viewing{overflow:hidden}.missing{min-height:90vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:24px}.missing h1{font-size:clamp(75px,10vw,145px)}
@keyframes unfold{from{transform:translateY(108%)}to{transform:translateY(0)}}@keyframes projector{from{transform:scale(1.08);filter:brightness(.77)}to{transform:scale(1);filter:brightness(1)}}@keyframes cutin{from{opacity:.3;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}@keyframes arrive{from{opacity:.68;transform:translateY(22px)}to{opacity:1;transform:none}}.arrive{animation:arrive .6s cubic-bezier(.17,.74,.24,1) both}.gallery .arrive:nth-child(2){animation-delay:.07s}.gallery .arrive:nth-child(3){animation-delay:.14s}
@media(max-width:1100px) and (min-width:721px){.hero h1{font-size:clamp(74px,8.8vw,105px)}.hero-copy{padding-right:18px}.actions{gap:13px;flex-wrap:wrap}.hero-layout{min-height:540px}.btn,.subcta{font-size:13px}.gallery{gap:17px}}
@media(max-width:720px){:root{--pad:21px}.top{height:63px}.top nav{display:none}.brand{font-size:22px}.brand img{width:34px;height:34px}.topwa{margin-left:auto;font-size:11px;padding:7px 11px}.hero-layout{display:flex;flex-direction:column;min-height:0}.hero-copy{padding:28px var(--pad) 25px}.hero h1{font-size:clamp(60px,12vw,85px);line-height:.86;letter-spacing:-.027em;margin:17px 0}.hero h1 span{display:inline-block;margin-right:.15em}.hero h1 span:last-child{display:block}.hero-lede{font-size:15px;line-height:1.42;max-width:380px}.actions{margin-top:17px;gap:16px}.btn,.subcta{font-size:12px;gap:7px}.btn{padding:13px 14px}.scene{width:100%;min-height:0;aspect-ratio:2.25;border:0;border-top:1px solid #fff3}.scene picture img{object-position:52% 49%}.scene figcaption{bottom:10px;left:19px;right:19px;font-size:8px}.scene figcaption strong{font-size:10px}.corners{inset:8px}.corners i{width:7px;height:7px}.work{padding:38px 0 42px}.section-top{padding-bottom:10px}.section-top>p{display:none}.work h2{font-size:66px;margin:13px 0 23px}.gallery{display:grid;grid-template-columns:1fr;gap:25px}.tile{aspect-ratio:1.8}.paper-art img{width:43%}.movie-art img{width:38%;max-width:230px}.movie-art img:last-child{left:25%;top:-16%}.trades .movie-art img:last-child{left:21%}.movie-art img:first-child{right:6%;top:11%}.paper-art img:last-child{top:7%;left:22%}.paper-art img:first-child{left:42%;top:15%}.category{margin:10px 0 3px}.gallery h3{font-size:21px}.contact{padding:39px 0 110px}.contact-inner{grid-template-columns:1fr;gap:18px}.contact h2{font-size:65px;margin-top:14px}.contact-action p{font-size:15px;margin-bottom:15px}.dock{position:fixed;z-index:6;left:50%;bottom:max(env(safe-area-inset-bottom),7px);transform:translateX(-50%);width:min(364px,calc(100% - 24px));min-height:54px;display:flex;align-items:stretch;background:#0c1532f5;color:white;border-radius:16px;padding:4px;border:1px solid #8391b399;box-shadow:0 3px 17px #08102755;backdrop-filter:blur(12px)}.dock a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;font-weight:600;border-radius:12px}.dock a[aria-current]{background:#31406e}.dock svg{width:18px;height:18px}.viewing .dock{visibility:hidden}}
@media(max-width:355px){:root{--pad:16px}.hero h1{font-size:53px}.actions{gap:12px}.btn{padding:12px 10px}.kicker{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important;scroll-timeline:none!important}}
.collection{margin-top:clamp(50px,6vw,90px);border-top:1px solid #bfc0bc;padding-top:clamp(24px,3.2vw,46px)}.collection-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}.collection-head .mark{background:var(--electric)}.collection-head h3{font:700 clamp(45px,4.6vw,78px)/.95 Display,Impact,sans-serif;text-transform:uppercase;letter-spacing:-.038em;margin-top:14px}.collection-head h3 em{font-family:Georgia,serif;font-weight:400;font-size:.92em;letter-spacing:-.065em;text-transform:none;color:var(--electric)}.rail-controls{display:flex;gap:8px}.rail-controls button{display:grid;place-items:center;width:42px;height:42px;border:1px solid #8a91a3;border-radius:50%;color:var(--ink);background:transparent;font:500 21px/1 Sans,sans-serif}.rail-controls button:disabled{opacity:.38;cursor:default}.rail-controls button:not(:disabled):hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}.study-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*var(--gap))/4);--gap:clamp(14px,1.5vw,24px);gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:1px;scrollbar-color:#56678c #dae0e9;scrollbar-width:thin;padding:2px 2px 14px}.study-card{min-width:0;scroll-snap-align:start}.study-open{display:block;position:relative;isolation:isolate;overflow:hidden;background:#d8deeb;border-radius:3px;aspect-ratio:3/2}.study-open>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .45s cubic-bezier(.16,.65,.22,1)}.study-open:hover>img{transform:scale(1.035)}.study-open .open-icon{width:31px;height:31px;bottom:9px;left:auto;right:9px}.study-open .open-icon svg{width:15px;height:15px}.study-card h4{margin:0;font-size:clamp(19px,1.7vw,26px);letter-spacing:-.045em;line-height:1.2}.study-format{color:#4e5260;font-size:12px;margin-top:3px}.study-meta{color:#c7d3f2;font-size:12px;line-height:1.45;margin-bottom:8px}.study-meta:empty{display:none}#stage.gallery-stage img{width:auto;height:auto;max-width:min(86vw,840px);max-height:calc(100dvh - 189px);object-fit:contain}.study-open:focus-visible{outline-offset:-4px;outline-color:#fff}
@media(max-width:1000px){.study-rail{grid-auto-columns:31.5%}}
@media(max-width:720px){.collection{margin-top:38px}.collection-head{gap:12px;margin-bottom:14px;align-items:flex-end}.collection-head .kicker{font-size:8px;gap:6px}.collection-head h3{font-size:clamp(38px,10vw,54px);margin-top:9px}.rail-controls{gap:5px}.rail-controls button{width:34px;height:34px;font-size:18px}.study-rail{grid-auto-columns:65%;--gap:12px}.study-card h4{font-size:20px}#stage.gallery-stage img{max-width:100%;max-height:calc(100dvh - 188px)}}


/* Preserve the viewer dimensions while the next artwork is decoding. */
#stage.book-stage{width:min(78vw,739px,calc((100dvh - 173px)*.8));aspect-ratio:739/924}
#stage.gallery-stage{width:min(86vw,840px,calc((100dvh - 189px)*1.5));aspect-ratio:3/2}
#stage.book-stage img,#stage.gallery-stage img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}

/* Portfolio ribbon. The two groups are identical in width; the second is decorative. */
.brand-ribbon {
  background: var(--electric);
  color: #fff9e7;
}
.ribbon-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(15px, 2.8vw, 46px);
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.ribbon-label {
  margin: 0;
  padding-right: clamp(16px, 2vw, 34px);
  border-right: 1px solid #ffffff65;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .035em;
}
.ribbon-label strong {
  display: block;
  font-size: 17px;
  letter-spacing: -.035em;
}
.ribbon-window {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-behavior: auto;
  mask-image: linear-gradient(90deg, transparent, black 12px, black calc(100% - 12px), transparent);
}
.ribbon-window::-webkit-scrollbar { display: none; }
.ribbon-track { display: flex; width: 100%; }
.ribbon-group {
  --brand-gap: clamp(30px, 3.9vw, 75px);
  flex: 0 0 max-content;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--brand-gap);
  min-width: 100%;
  padding-right: var(--brand-gap);
}
.wordmark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 78px;
  padding-inline: 3px;
  text-decoration: none;
  text-underline-offset: 5px;
  white-space: nowrap;
  font-size: clamp(21px, 1.7vw, 29px);
  line-height: 1;
}
.wordmark:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.wordmark:focus-visible { outline-offset: -4px; outline-color: #fff9e7; border-radius: 3px; }
.wordmark svg { width: 1.06em; height: 1.06em; stroke-width: 1.5; }
.wordmark-salt { font: 700 clamp(22px, 1.9vw, 32px)/1 Display, Impact, sans-serif; text-transform: uppercase; letter-spacing: -.02em; }
.wordmark-garage { font: italic 750 clamp(19px, 1.4vw, 24px)/1 Sans, Arial, sans-serif; text-transform: uppercase; letter-spacing: -.065em; }
.wordmark-linen { font: italic 400 clamp(24px, 1.9vw, 33px)/1 Georgia, serif; letter-spacing: -.075em; }
.wordmark-air { font: 500 clamp(18px, 1.35vw, 24px)/1 Sans, Arial, sans-serif; letter-spacing: .025em; }
.wordmark-fruit { font: 700 clamp(23px, 1.95vw, 32px)/1 Georgia, serif; letter-spacing: -.065em; }
.wordmark-barber { font: 650 clamp(17px, 1.35vw, 23px)/1 Georgia, serif; text-transform: uppercase; letter-spacing: .05em; }
.wordmark-wood { font: 700 clamp(20px, 1.7vw, 29px)/1 Display, Impact, sans-serif; letter-spacing: .075em; text-transform: uppercase; }
.wordmark-pet { font-weight: 750; letter-spacing: -.072em; }
.ribbon-control {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid #ffffff80;
  border-radius: 50%;
}
.ribbon-control[hidden], .ribbon-control .play-mark { display: none; }
.ribbon-control[data-paused] .play-mark { display: block; }
.ribbon-control[data-paused] .pause-mark { display: none; }
.ribbon-control svg { width: 17px; height: 17px; stroke-width: 2.1; }
.ribbon-control:hover { background: #ffffff20; }
.ribbon-control:focus-visible { outline-color: #fff9e7; }
@media (max-width: 720px) {
  .ribbon-inner { gap: 10px; padding-inline: 16px 10px; }
  .ribbon-label { font-size: 9px; padding-right: 10px; }
  .ribbon-label strong { font-size: 14px; }
  .ribbon-group { --brand-gap: 28px; }
  .wordmark { gap: 5px; min-height: 59px; }
  .ribbon-control { width: 35px; height: 35px; }
  .ribbon-control svg { width: 15px; height: 15px; }
}
@media (max-width: 355px) { .ribbon-inner { gap: 7px; padding-left: 12px; } }

