@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/anton-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:optional;src:url("../fonts/inter-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Theme tokens. Dark black and orange is the active theme.
   A later light theme can override this set. Light ground is off white. Light accent is #6740fc.
   The light theme is not applied.
   Frame colors are stand ins where the notes name a color and do not give a hex.
   Artchemy ground #f0ece6 is the one hex from the notes. */
:root{color-scheme:dark;--bg:#0f0e0d;--surface:var(--bg);--surface-alt:#1a1816;--fg:#f1ebe2;--mute:#8f877d;--line:#2b2825;--accent:#e8643c;--accent-ink:#0f0e0d;--panel:#141210;--halftone:#e8643c;--glow:#e8643c;--display:"Anton",Impact,"Arial Black","Arial Narrow",sans-serif;--body:"Inter",system-ui,sans-serif;--pad:clamp(1.25rem,4vw,4rem);--frame-paper:#f0ece6;--frame-ink:#1c1916;--frame-dim:#3c3834;--frame-red:#c4312b;--frame-violet:#c4b5fd;--frame-navy:#141a2e;--snap-card:#101628;--snap-dim:#c9c2b8}
*{box-sizing:border-box;margin:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);font:400 18px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip:focus{left:1rem;top:0;width:auto;height:auto;margin:0;padding:.5rem 1rem;overflow:visible;clip-path:none;background:var(--fg);color:var(--bg);z-index:100}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.nav{position:fixed;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:1rem var(--pad);z-index:50;mix-blend-mode:difference;flex-wrap:nowrap}
.nav.is-solid{mix-blend-mode:normal;background:var(--bg);box-shadow:0 1px 0 var(--line)}
.nav nav{display:flex;gap:1.5rem;align-items:center;flex-wrap:nowrap}
.nav a{text-decoration:none;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.nav a[aria-current="page"]{color:var(--accent)}
.logo{font-family:var(--display);font-size:1.2rem!important}
.btn{border:1px solid currentColor;padding:.4rem 1rem;border-radius:99px}
.label{font:400 .85rem/1 var(--body);text-transform:uppercase;letter-spacing:.18em;color:var(--mute);margin-bottom:1rem}
.num{color:var(--accent);margin-right:.5rem}
.micro{font:400 .72rem/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:.8rem}
.micro .sl,.caption .sl{color:var(--accent);letter-spacing:0;margin:0}
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:8rem var(--pad) 4rem}
.hero-kicker{margin-bottom:1rem}
.hero-title{font:400 clamp(4rem,17vw,17rem)/.86 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.wm-line{display:block;position:relative}
.wm-ink{position:relative;z-index:1}
html.motion .hero-title .wm-ink{opacity:var(--wm-fill,1)}
.hero-title.is-abstract,.hero-title.is-held{pointer-events:none}
.wm-canvas{position:fixed;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none;background:transparent}
html.reduce .wm-canvas,html.fx-cover .wm-canvas,html.fx-hold .wm-canvas{visibility:hidden}
body.page-home main,body.page-home .foot{position:relative;z-index:1}
.hero-hello{font-size:clamp(1.15rem,2.4vw,1.55rem);margin-bottom:.85rem}
.hero-intro{max-width:40rem;margin-top:1.5rem;display:grid;gap:.75rem}
.hero-intro p{max-width:46ch;color:var(--mute);font-size:clamp(1rem,1.55vw,1.22rem)}
.hero-sub{max-width:34ch;margin-top:2rem;color:var(--mute);font-size:clamp(1rem,1.6vw,1.3rem)}
.ticker{display:flex;align-items:center;gap:1rem;border-block:1px solid var(--line);padding:1rem var(--pad) 1rem 0}
.ticker-window{overflow:hidden;flex:1;min-width:0}
.ticker-pause{flex:none;font:500 .75rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:.5rem .85rem;cursor:pointer}
.ticker-pause[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.ticker-track{display:flex;width:max-content}
.ticker-track span{font:400 clamp(2rem,5vw,4rem)/1 var(--display);text-transform:uppercase;padding:0 2rem;white-space:nowrap}
.ticker-track span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--fg)}
.work,.contact{padding:8rem var(--pad)}
.work-head{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:flex-end}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.controls{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font:500 .8rem/1 var(--body);text-transform:uppercase;letter-spacing:.06em;background:none;color:var(--fg);border:1px solid var(--line);border-radius:99px;padding:.55rem 1rem;cursor:pointer}
.chip.is-on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.view-toggle{display:inline-flex;border:1px solid var(--line);background:var(--panel)}
.view-toggle button{width:2.15rem;height:2.15rem;display:grid;place-items:center;background:transparent;color:var(--fg);border:0;border-radius:0;padding:0;cursor:pointer}
.view-toggle button+button{box-shadow:inset 1px 0 0 var(--line)}
.view-toggle button.is-on{background:var(--accent);color:var(--accent-ink)}
.view-toggle button.is-on:focus-visible{outline-color:var(--fg)}
.view-toggle svg{width:1rem;height:1rem;display:block}
.work-list{list-style:none;padding:0;margin-top:2rem}
.work-list.is-moving{position:relative}
.work-list.is-moving .row{overflow:hidden;z-index:1}
.work-list.is-moving .row a{pointer-events:none;display:flex;flex-direction:column;height:100%;min-height:0;padding:0;gap:.4rem;overflow:hidden}
.work-list.is-moving .cover-pause{pointer-events:auto}
.thumb-motion.is-pending{opacity:0}
.work-list.is-moving .thumb-frame{display:block;position:relative;width:100%;aspect-ratio:8/5;height:auto;flex:none;overflow:hidden;order:-2}
.work-list.is-moving .row h3{white-space:nowrap;line-height:1.05;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:clamp(.95rem,2.2vw,1.65rem);padding:0 .2rem}
.work-list.is-moving .row .meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;min-width:0;padding:0 .2rem}
.work-list.is-moving .row .idx,.work-list.is-moving .row h3,.work-list.is-moving .row .meta{position:relative;z-index:4}
.tone-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.tone-field{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.work-list.is-tone .thumb-frame,.work-list.is-tone .thumb{background:transparent!important}
.work-list.is-tone.is-hold .row{opacity:0!important}
.work-list.is-tone.is-source[data-view="list"] .thumb-frame,.work-list.is-tone.is-seat[data-view="list"] .thumb-frame{display:none!important;background:transparent!important}
.work-list.is-tone.is-moving .row h3{font-size:clamp(1.8rem,4.5vw,3.8rem)}
.work-list.is-tone.is-seat .row,.work-list.is-tone.is-source .row{overflow:visible}
.work-list.is-tone.is-seat[data-view="list"] .row a,.work-list.is-tone.is-source[data-view="list"] .row a{display:grid;grid-template-columns:3rem minmax(0,1fr) auto;height:auto;padding:var(--gap,clamp(20px,2.75cqi,40px)) 0;gap:var(--gap,clamp(20px,2.75cqi,40px));overflow:visible}
.work-list.is-tone.is-seat[data-view="grid"] .row a,.work-list.is-tone.is-source[data-view="grid"] .row a{display:flex;flex-direction:column;height:auto;padding:0;gap:.6rem;overflow:visible}
.work-list.is-tone.is-seat[data-view="list"] .thumb-frame,.work-list.is-tone.is-source[data-view="list"] .thumb-frame{display:none}
.work-list.is-tone.is-seat .row h3,.work-list.is-tone.is-source .row h3{white-space:normal;text-overflow:clip;max-width:none;line-height:1;padding:0}
.work-list.is-tone.is-seat .row .meta,.work-list.is-tone.is-source .row .meta{white-space:normal;text-overflow:clip}
.tone-switch{letter-spacing:.08em}
.work-list[data-view="list"] .row{border-top:1px solid var(--line)}
.work-list[data-view="list"] .row:last-child{border-bottom:1px solid var(--line)}
.row a{position:relative;display:grid;grid-template-columns:3rem minmax(0,1fr) auto;gap:var(--gap,clamp(20px,2.75cqi,40px));align-items:baseline;padding:var(--gap,clamp(20px,2.75cqi,40px)) 0;text-decoration:none;min-width:0}
.row .idx{color:var(--mute);font-size:.85rem}
.row h3{font:400 clamp(1.8rem,4.5vw,3.8rem)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;overflow-wrap:break-word;min-width:0}
.row .meta{color:var(--mute);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;text-align:right;line-height:1.35;max-width:22rem;min-width:0;overflow-wrap:anywhere}
.row .thumb{display:none}
.work-list.dim .row a{opacity:.25}
.work-list.dim .row a:hover,.work-list.dim .row a:focus-visible{opacity:1}
.row[hidden]{display:none}
.work,.contact{container-type:inline-size}
.work-list[data-view="grid"]{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap,clamp(20px,2.75cqi,40px))}
.work-list[data-view="grid"] .row a{display:flex;flex-direction:column;gap:.6rem;padding:0}
.work-list[data-view="grid"] .thumb-frame{display:block;position:relative;width:100%;aspect-ratio:8/5;overflow:hidden;background:#141210;order:-2}
.card-tone{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.work-list[data-view="grid"] .thumb{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--focal,50% 50%);transform:scale(var(--zoom,1));transform-origin:var(--focal,50% 50%);background:#141210}
.cover-pause,.media-pause{position:absolute;right:.45rem;bottom:.45rem;z-index:3;border:1px solid var(--fg);background:rgb(15 14 13 / .72);color:var(--fg);padding:.28rem .55rem;letter-spacing:.08em;text-transform:uppercase;font:.72rem/1 var(--body);cursor:pointer}
.cover-pause:focus-visible,.media-pause:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.work-list[data-view="list"] .thumb-frame{display:none}
.work-list.is-moving .thumb-frame{display:block;position:relative;width:100%;aspect-ratio:8/5;height:auto;flex:none;overflow:hidden;order:-2;background:#141210}
.work-list.is-moving .thumb{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--focal,50% 50%);transform:scale(var(--zoom,1));transform-origin:var(--focal,50% 50%)}
.work-list[data-view="grid"] .tags{order:-1}
.work-list[data-view="grid"] .meta{text-align:left;max-width:none}
.tags{display:flex;gap:.4rem;flex-wrap:wrap}
.work-list[data-view="list"] .tags{display:none}
.tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--line);border-radius:99px;padding:.2rem .6rem;color:var(--mute)}
.letter{max-width:42rem;font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.75;border-left:1px solid var(--line);padding-left:1.25rem}
.letter p+p{margin-top:1.2rem}
.contact-more{margin-top:1.4rem}
.contact-more .btn{text-decoration:none}
.about-home{max-width:46rem;margin-top:3rem}
.about-home h3{font:400 clamp(1.6rem,3vw,2.4rem)/1 var(--display);text-transform:uppercase;letter-spacing:.06em;margin:.2rem 0 .8rem}
.about-gallery{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:2.5rem}
.contact-line{font-size:1.2rem;color:var(--mute)}
.contact-mail{display:inline-block;font:400 min(6rem,calc(100cqi / 11.65))/1.1 var(--display);text-transform:uppercase;text-decoration:none;margin-top:1rem;white-space:nowrap;letter-spacing:.02em}
.contact-mail:hover{color:var(--accent)}
.todo{margin-top:1.5rem;font-size:.75rem;color:var(--accent);text-transform:uppercase;letter-spacing:.08em}
.panel .todo{margin-top:.4rem}
.foot{padding:3rem var(--pad);border-top:1px solid var(--line);color:var(--mute);font-size:.8rem;display:flex;justify-content:space-between;align-items:center;gap:1.25rem 2rem;flex-wrap:wrap}
.foot-notice{flex:1 1 18rem;max-width:42rem;margin:0;line-height:1.45}
.foot-resume{color:var(--fg);text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}
.foot-resume:hover,.foot-resume[aria-current="page"]{color:var(--accent)}
.hero,.work,.contact,.case{position:relative;z-index:0}
.hero::before,.work::before,.contact::before,.case::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,var(--halftone) .65px,transparent .8px);background-size:13px 13px;opacity:.26;-webkit-mask-image:radial-gradient(ellipse at 12% 0%,#000 0%,transparent 58%);mask-image:radial-gradient(ellipse at 12% 0%,#000 0%,transparent 58%)}
.work::before{opacity:.2;-webkit-mask-image:radial-gradient(ellipse at 100% 0%,#000 0%,transparent 52%);mask-image:radial-gradient(ellipse at 100% 0%,#000 0%,transparent 52%)}
.contact::before,.case::before{opacity:.2;-webkit-mask-image:radial-gradient(ellipse at 80% 0%,#000 0%,transparent 48%);mask-image:radial-gradient(ellipse at 80% 0%,#000 0%,transparent 48%)}
html.motion .hero::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--accent);top:22%;z-index:2;pointer-events:none;animation:hero-scan .38s linear .12s both}
@keyframes hero-scan{from{top:20%;opacity:1}to{top:84%;opacity:0}}
.glow{position:fixed;left:0;top:0;width:260px;height:260px;margin:-130px 0 0 -130px;pointer-events:none;z-index:35;opacity:0;background-image:radial-gradient(circle,var(--glow) .9px,transparent 1.1px);background-size:7px 7px;-webkit-mask-image:radial-gradient(circle,#000 18%,transparent 70%);mask-image:radial-gradient(circle,#000 18%,transparent 70%);mix-blend-mode:screen}
.glow.is-on{opacity:.5}
.fx-canvas{position:fixed;inset:0;z-index:200;width:100%;height:100%;display:block;pointer-events:auto;background:transparent}
#work,#contact,#boot-kicker{scroll-margin-top:5.5rem}
/* case study */
.case{padding:8rem var(--pad) 4rem}
.case-title{font:400 clamp(3rem,12vw,11rem)/.9 var(--display);text-transform:uppercase;letter-spacing:.01em;overflow-wrap:anywhere;margin-bottom:clamp(1.5rem,3vw,2.75rem)}
.lede{max-width:42ch;color:var(--mute);font-size:clamp(1.05rem,2vw,1.3rem);margin:1rem 0 1.4rem}
.panel{border:1px solid var(--line);padding:1.15rem 1.25rem;background:transparent}
.panel h2{font:400 clamp(1.6rem,3vw,2.4rem)/1 var(--display);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.8rem}
.panel p+p{margin-top:.75rem}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:clamp(20px,2.75vw,40px);margin:0}
.facts dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;color:var(--mute)}
.facts dd{margin-top:.3rem;font-size:.95rem;overflow-wrap:anywhere}
.facts a{text-decoration:none;border-bottom:1px solid var(--accent)}
.facts a:hover{color:var(--accent)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,2.75vw,40px);row-gap:clamp(20px,2.75vw,40px);align-items:start}
.stat{min-width:0}
.stat b{display:block;font:400 clamp(3rem,8vw,6rem)/1 var(--display);color:var(--accent)}
.odo{display:inline-flex;align-items:flex-start;height:1.05em;line-height:1.05}
.odo-col{height:1.05em;overflow:hidden}
.odo-strip{display:block}
.odo-strip span,.odo-suf{display:block;height:1.05em;line-height:1.05}
.stat>span{display:block;margin-top:.4rem;color:var(--mute);font-size:.9rem;overflow-wrap:anywhere}
.study{display:grid;gap:1rem}
#boot-rest{min-height:100svh}
#experience{min-height:46rem}
.page-project .label{display:flex;align-items:flex-end;gap:.75rem;flex-wrap:wrap}
.case-odo{font:400 clamp(2.2rem,6vw,4.2rem)/.9 var(--display);color:var(--accent);letter-spacing:.02em;margin-right:0}
/* Shared spacing. Horizontal gutters and vertical gaps use one scale.
   Section breaks are twice that gap on purpose. Tight is 1.5 and airy is 2.7. */
.mosaic{container-type:inline-size;container-name:mosaic;--gap:clamp(20px,2.75cqi,40px);--cap-gap:.75rem;--section-space:calc(var(--gap) * 2);display:flex;flex-direction:column;gap:var(--section-space);width:min(100%,1280px);margin:1.6rem auto 0}
.mosaic[data-spacing="tight"]{--section-space:calc(var(--gap) * 1.5)}
.mosaic[data-spacing="airy"]{--section-space:calc(var(--gap) * 2.7)}
.mosaic-section{display:flex;flex-direction:column;gap:var(--gap)}
.mosaic-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--gap);align-items:start}
.mosaic-row.is-pair{display:flex;justify-content:center;align-items:flex-start;gap:var(--gap)}
.mosaic-row.is-pair .mosaic-tile{grid-column:auto;width:max-content;min-width:max-content;flex:0 0 auto}
.mosaic-tile{grid-column:span var(--span,12);min-width:0;display:flex;flex-direction:column;gap:var(--gap)}
.mosaic-tile.is-spacer{min-height:1px}
.mosaic-row .block{min-width:0}
.mosaic-row .is-display{font:400 clamp(2.1rem,6.4vw,4.4rem)/.92 var(--display);text-transform:uppercase;letter-spacing:-.01em;max-width:14ch;overflow-wrap:anywhere}
.mosaic-row .is-callout{color:var(--fg);font:400 clamp(1.85rem,3.1vw,2.65rem)/1.18 var(--body);letter-spacing:-.015em;max-width:28rem;margin-block:clamp(.35rem,1.2vw,.9rem);overflow-wrap:anywhere}
.mosaic-row .is-note{color:var(--fg);font:400 clamp(1rem,1.45vw,1.15rem)/1.45 var(--body);max-width:36rem;overflow-wrap:anywhere}
.shot,.media-set{display:flex;flex-direction:column;min-width:0;width:100%;align-items:stretch}
.mosaic-row figcaption.is-caption,.media-set>.is-caption{position:relative;z-index:2;color:var(--fg);font:400 clamp(1rem,1.45vw,1.15rem)/1.45 var(--body);max-width:none;margin:0;overflow-wrap:anywhere}
.mosaic-row .is-heading{font:400 clamp(1.6rem,3vw,2.6rem)/1.05 var(--display);text-transform:uppercase}
.mosaic-row .is-body{color:var(--mute);font-size:clamp(.98rem,1.5vw,1.05rem);max-width:42rem}
.mosaic-row .block-image,.block-video{margin:0;overflow:hidden;background:#141210;position:relative;aspect-ratio:var(--frame,1.5)}
.mosaic-row .block-image img,.mosaic-row .block-image video,.block-video img{width:100%;height:100%;object-fit:var(--fit,cover);object-position:var(--focal,50% 50%);transform:scale(var(--zoom,1));transform-origin:var(--focal,50% 50%);display:block}
.block-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:grid;place-items:center;width:auto;height:auto;padding:0;border:0;background:transparent;color:var(--fg);cursor:pointer}
.mosaic-row .video-play img,.mosaic-row .video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:none;z-index:0}
.is-zoomable{cursor:zoom-in}
.frame-lightbox{width:100vw;height:100vh;max-width:100vw;max-height:100vh;margin:0;padding:0;border:0;background:transparent}
.frame-lightbox::backdrop{background:rgb(15 14 13 / 92%)}
.frame-lightbox .frame-close{position:fixed;top:1rem;right:1rem;z-index:3;border:1px solid var(--fg);background:#0f0e0d;color:var(--fg);padding:.4rem .8rem;letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;cursor:pointer}
.frame-stage{display:grid;place-items:center;width:100%;height:100%}
.frame-stage img,.frame-stage .block-video{max-width:min(92vw,1400px);max-height:88vh;width:auto;height:auto}
.frame-stage .block-video{width:min(92vw,calc(88vh * var(--frame,1.5)));aspect-ratio:var(--frame,1.5);position:relative}
.mosaic-tile{container-type:inline-size;container-name:tile}
@media (min-width:768px){
 .mosaic-tile{min-width:0;min-height:0}
 .mosaic-row .block-image,.mosaic-row .block-video{width:min(100%,calc(70vh * var(--frame,1.5)));height:min(70vh,calc(100cqw / var(--frame,1.5)));max-height:70vh;aspect-ratio:auto;margin-inline:auto;flex:none;align-self:center}
 .mosaic-row .block-image img,.mosaic-row .block-image video,.mosaic-row .block-video img,.mosaic-row .video-poster{max-height:70vh}
}
.video-play span{position:relative;z-index:1;border:1px solid currentColor;padding:.35rem .8rem;letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;background:rgb(15 14 13 / 55%)}
.video-source{position:absolute;left:.55rem;bottom:.55rem;z-index:2;color:var(--fg);background:#0f0e0d;text-decoration:none;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.28rem .5rem}
.foot-links{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}
@container mosaic (max-width:767px){
 .mosaic-row,.mosaic-row.is-pair{display:grid;grid-template-columns:minmax(0,1fr)}
 .mosaic-tile,.mosaic-row.is-pair .mosaic-tile{grid-column:1 / -1;width:auto;flex:none}
 .mosaic-tile.is-spacer{display:none}
 .mosaic-row .block-image,.mosaic-row .block-video{width:100%;max-height:calc(100svh - var(--nav-h, 4.6rem) - 2.5rem);height:auto}
}
.case-copy,.case-cap{max-width:42rem}
.case-copy{color:var(--mute);font-size:1.05rem}
.case-cap{color:var(--fg);font-size:1rem}
.case-hero{position:relative;margin:1.25rem 0 1.75rem}
.case-hero img{display:block;width:100%;height:auto}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1.25rem}
.gallery figure{margin:0;min-width:0}
.gallery img{display:block;width:100%;height:auto}
.case-switch{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:6rem;border-top:1px solid var(--line);padding-top:2rem}
.case-switch .next{margin-top:0;border-top:0;padding-top:0;text-align:right}
.case-prev{display:block;text-decoration:none;min-width:0}
.case-prev strong{display:block;font:400 clamp(2rem,5vw,4.5rem)/.95 var(--display);text-transform:uppercase;letter-spacing:.02em;overflow-wrap:anywhere}
.case-prev:hover strong{color:var(--accent)}
.story{display:grid;grid-template-columns:1fr 1.4fr;gap:3rem;margin-top:2rem}
.story-steps section{min-height:70vh;display:flex;flex-direction:column;justify-content:center}
.story-steps h2{font:400 clamp(2rem,4vw,3.5rem)/1 var(--display);text-transform:uppercase;letter-spacing:.06em;margin-bottom:1rem}
.story-steps p{max-width:40ch;color:var(--mute)}
.story-media{position:sticky;top:15vh;height:70vh;background:var(--panel)}
.story-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.story-media img.is-on{opacity:1}
.case-loading{color:var(--mute)}
.case-missing{margin-top:2rem}
.case-missing a{text-decoration:none;border-bottom:1px solid var(--accent)}
.case-missing a:hover{color:var(--accent)}
.screens{display:grid;gap:1rem}
.cols-2{grid-template-columns:1.05fr .95fr}
.cols-snap{grid-template-columns:1.15fr .85fr}
.cols-snap .device:first-child{grid-row:1 / span 2}
.device{border:1px solid var(--line);background:#090807;padding:.55rem .55rem .65rem;min-width:0}
.device-bar{display:flex;gap:.35rem;padding:.15rem .3rem .5rem}
.device-bar i{width:.42rem;height:.42rem;border-radius:50%;border:1px solid var(--line);display:block}
.frame-artchemy{background:var(--frame-paper);color:var(--frame-ink);padding:1rem;font-family:system-ui,sans-serif;font-size:.92rem;line-height:1.35}
.ac-top{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.ac-mark{font-weight:750;letter-spacing:.03em}
.ac-lock{margin:0;text-align:right;font-weight:800;letter-spacing:.14em;line-height:.85;color:transparent;-webkit-text-stroke:1px var(--frame-red);font-size:.74rem}
.ac-tag{margin:.85rem 0 .7rem;font-size:1.2rem;font-weight:750;letter-spacing:-.02em;max-width:16ch}
.ac-count{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.ac-count b{border:1px solid rgb(28 25 22 / 22%);padding:.5rem .55rem;font-size:.8rem;font-weight:720}
.ac-sec{margin:.95rem 0 .5rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.ac-bots,.sn-plans{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.ac-bots{grid-template-columns:repeat(auto-fit,minmax(9.2rem,1fr))}
.ac-bots li,.sn-plan{border:1px solid rgb(28 25 22 / 18%);padding:.6rem;min-width:0}
.ac-bots strong,.sn-plan b{display:block}
.ac-bots span{display:block;margin-top:.25rem;color:var(--frame-dim)}
.ac-live{display:block;margin-top:.4rem;font-style:normal;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--frame-red)}
.ac-note,.ac-foot{margin-top:.7rem;color:var(--frame-dim);font-size:.82rem}
.frame-plan .ac-plan{border:1px solid rgb(28 25 22 / 18%);padding:.7rem;margin-top:.5rem}
.frame-plan .ac-plan b{display:block;font-size:1rem}
.frame-snap{background:var(--frame-navy);color:var(--fg);padding:1.05rem;font-family:system-ui,sans-serif;font-size:.95rem;line-height:1.4;height:100%}
.sn-brand{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--frame-violet)}
.sn-head{margin:.65rem 0 .35rem;font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.05;font-weight:800;letter-spacing:-.03em;max-width:16ch}
.sn-line,.sn-try,.sn-plan li{color:var(--snap-dim)}
.sn-card{margin-top:1rem;border:1px solid var(--frame-violet);background:var(--snap-card);padding:.8rem;box-shadow:0 16px 36px rgb(0 0 0 / 35%)}
.sn-in,.sn-price{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--frame-violet)}
.sn-row{display:flex;justify-content:space-between;gap:.5rem;border-top:1px solid rgb(196 181 253 / 40%);margin-top:.65rem;padding-top:.5rem}
.sn-total{margin:.7rem 0 0;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--snap-dim)}
.sn-try{margin-top:.8rem}
.sn-list{list-style:none;padding:0;margin:.4rem 0 0}
.sn-list li{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;border-top:1px solid rgb(241 235 226 / 16%);padding:.55rem 0}
.sn-bonus{flex:none;background:var(--frame-violet);color:var(--frame-navy);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:.12rem .4rem}
.sn-plan{border:1px solid rgb(241 235 226 / 18%);padding:.75rem}
.sn-plan b{font-size:1.05rem}
.sn-price{display:block;margin:.3rem 0;font-size:.95rem}
.sn-alt{display:block;color:var(--snap-dim);font-size:.85rem}
.sn-plan ul{margin:.35rem 0 0;padding-left:1.05rem}
.sn-position{margin-top:.75rem;color:var(--snap-dim)}
.next{display:block;margin-top:6rem;border-top:1px solid var(--line);padding-top:2rem;text-decoration:none}
.next small,.case-prev small{color:var(--mute);text-transform:uppercase;letter-spacing:.14em}
.next strong{display:block;font:400 clamp(2.5rem,8vw,7rem)/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.next:hover strong{color:var(--accent)}
/* resume */
.resume-hero{padding:8rem var(--pad) 3.5rem}
.resume-name{font:400 clamp(2.75rem,11vw,7.5rem)/.9 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.resume-role{margin-top:1rem;font-size:clamp(1.05rem,2vw,1.4rem);color:var(--mute)}
.resume-links{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;list-style:none;padding:0;margin:1.75rem 0 0}
.resume-links a{text-decoration:none}
.resume-links a:hover{color:var(--accent)}
.resume-sec{padding:1rem var(--pad) 4.5rem;background:var(--surface)}
.page-resume .resume-sec:nth-of-type(odd){background:var(--surface-alt)}
.timeline{list-style:none;margin:0;padding:0 0 0 1.5rem;border-left:1px solid var(--line)}
.tl-item{position:relative;padding:0 0 2.75rem}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-1.5rem;top:.35rem;width:.55rem;height:.55rem;margin-left:-.275rem;border-radius:50%;background:var(--accent)}
.tl-when{font:400 .8rem/1 var(--body);text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:.7rem}
.tl-item h3,.edu h3{font:400 clamp(1.7rem,3.5vw,2.8rem)/1 var(--display);text-transform:uppercase}
.tl-role{margin-top:.4rem}
.tl-where{color:var(--mute);font-size:.9rem;margin-top:.15rem}
.tl-copy{max-width:68ch;margin-top:1rem}
.tl-links{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;margin-top:.85rem}
.tl-links a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent)}
.awards{list-style:none;padding:0;margin:0}
.award{border-top:1px solid var(--line);padding:1.35rem 0;max-width:46rem}
.award:last-child{border-bottom:1px solid var(--line)}
.award h3{font:400 clamp(1.4rem,3vw,2rem)/1.1 var(--display);text-transform:uppercase}
.award-year{color:var(--accent);margin-right:.45rem}
.award p{color:var(--mute);max-width:62ch}
.award p+p{margin-top:.25rem}
.award p.award-role{color:var(--fg)}
.clients-note{color:var(--mute);margin:-.5rem 0 1.25rem}
.client-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:0 2rem;border-top:1px solid var(--line)}
.client-list li{border-bottom:1px solid var(--line);padding:.85rem 0}
.skill-group{padding:1.4rem 0;border-top:1px solid var(--line)}
.skill-group:last-child{border-bottom:1px solid var(--line)}
.skill-group h3{font:400 .8rem/1 var(--body);text-transform:uppercase;letter-spacing:.12em;color:var(--mute);margin-bottom:.85rem}
.skill-chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0}
.skill-chips li{font:500 .85rem/1.35 var(--body);border:1px solid var(--line);border-radius:99px;padding:.5rem .9rem;max-width:100%}
.edu{border-top:1px solid var(--line);padding-top:1.4rem;max-width:46rem}
.edu p{margin-top:.35rem}
.edu-meta{color:var(--mute)}
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}
/* Keep the 520px nav rules aligned with the inline critical CSS in each HTML file. */
@media (max-width:760px){
 body{font-size:17px}
 .nav nav{gap:.9rem}.nav a{font-size:.75rem}.logo{font-size:1rem!important}.btn{padding:.3rem .7rem}
 .work,.contact{padding:5rem var(--pad)}
 .row a{grid-template-columns:2rem minmax(0,1fr)}
 .row .meta{grid-column:2;text-align:left;max-width:none}
 .work-list[data-view="grid"]{grid-template-columns:1fr}
 .facts{grid-template-columns:repeat(2,1fr)}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .gallery,.case-switch{grid-template-columns:1fr}
 .case-switch .next{text-align:left}
 .story{grid-template-columns:1fr}
 .story-media{position:relative;top:0;height:auto;aspect-ratio:16/10;order:-1}
 .story-steps section{min-height:auto;padding:2rem 0}
 .cols-2,.cols-snap{grid-template-columns:1fr}
 .cols-snap .device:first-child{grid-row:auto}
 .resume-hero{padding:7.5rem var(--pad) 2rem}
 .resume-sec{padding:.5rem var(--pad) 3rem}
 .client-list{grid-template-columns:1fr}
}
@media (max-width:520px){
 .nav{padding:.65rem .5rem}
 .nav nav{gap:clamp(.2rem,1.4vw,.4rem)}
 .nav a{font-size:clamp(.55rem,2.7vw,.68rem);letter-spacing:0}
 .logo{font-size:clamp(.62rem,3.1vw,.82rem)!important}
 .nav .btn{border:0;padding:0;border-radius:0}
 .facts,.stats{grid-template-columns:1fr}
}
@media (hover:none){
 .glow{display:none!important}
}
html.fx-cover main,html.fx-cover .foot{opacity:0}
html.fx-hold::before{content:"";position:fixed;inset:0;z-index:200;background:#0f0e0d;opacity:1;pointer-events:auto}
html.fx-pane::before{content:"";position:fixed;left:0;right:0;bottom:0;top:var(--nav-h,4.6rem);z-index:45;background:#0f0e0d;opacity:1;pointer-events:none}
html.fx-pane .fx-canvas{top:var(--nav-h,4.6rem);bottom:0;height:auto;z-index:46;background:#0f0e0d}
.resume-name-line{display:block}
html.reduce.fx-pane::before{transition:opacity 150ms linear}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 html.reduce.fx-hold::before{transition:opacity 150ms linear!important}
 .ticker-track{flex-wrap:wrap;width:auto}
 .ticker-track span:nth-child(n+5){display:none}
 .ticker-window{overflow:visible}
 .ticker-pause{display:none}
 .glow,.hero::after{display:none!important}
 .wm-ink,.hero-title .wm-line{transform:none!important;opacity:1!important}
 .wm-canvas{display:none!important}
}
@media print{
 @page{size:letter;margin:.45in}
 html,body.page-resume{background:#fff!important}
 .page-resume{background:#fff!important;color:#1c1a17!important;font-size:10pt!important;line-height:1.25!important}
 .page-resume *{color:#1c1a17!important;opacity:1!important;animation:none!important;transition:none!important;transform:none!important}
 .page-resume .nav,.page-resume .fx-canvas,.page-resume .skip,.page-resume .foot,.page-resume .glow{display:none!important}
 .page-resume .resume-name,.page-resume .resume-name *{transform:none!important;overflow:visible!important;height:auto!important;max-height:none!important}
 .page-resume .resume-hero{padding:0 0 6pt!important}
 .page-resume .resume-name{font-size:18pt!important;line-height:.92!important}
 .page-resume .resume-role{font-size:10.5pt!important;margin-top:2pt!important}
 .page-resume .resume-links{margin-top:2pt!important;gap:2pt 10pt!important}
 .page-resume .resume-links a{text-decoration:none!important}
 .page-resume .resume-sec{padding:5pt 0 0!important;background:#fff!important}
 .page-resume .label{margin-bottom:3pt!important;font-size:8pt!important;letter-spacing:.08em}
 .page-resume .timeline{padding-left:10pt!important;border-left-color:#c4beb6!important}
 .page-resume .tl-item{padding-bottom:5pt!important;break-inside:avoid;page-break-inside:avoid}
 .page-resume .tl-item::before{background:#1c1a17!important;width:5pt;height:5pt;margin-left:-2.5pt;top:.2em;left:-10pt}
 .page-resume .tl-when{margin-bottom:1pt!important;font-size:8pt!important}
 .page-resume .tl-item h3,.page-resume .edu h3,.page-resume .award h3{font-size:11pt!important;line-height:1.05!important}
 .page-resume .tl-role,.page-resume .tl-where{display:inline!important;margin-top:0!important}
 .page-resume .tl-role::after{content:", "}
 .page-resume .tl-copy{margin-top:1pt!important;max-width:none}
 .page-resume .award{padding:2pt 0!important;break-inside:avoid;page-break-inside:avoid;max-width:none}
 .page-resume .award p{display:inline!important}
 .page-resume .award p::after{content:" "}
 .page-resume .award p+p{margin-top:0!important}
 .page-resume .clients-note{margin:0 0 2pt!important}
 .page-resume .client-list{display:block!important;border-top:0!important}
 .page-resume .client-list li{display:inline;border:0!important;padding:0!important}
 .page-resume .client-list li:not(:last-child)::after{content:", "}
 .page-resume .skill-group{padding:2pt 0!important;break-inside:avoid;page-break-inside:avoid}
 .page-resume .skill-group h3{margin-bottom:1pt!important;letter-spacing:0!important}
 .page-resume .skill-chips{gap:2pt}
 .page-resume .skill-chips li{font-size:9pt!important;line-height:1.2!important;padding:0 4pt!important;border-color:#b9b3ab!important}
 .page-resume .edu{padding-top:2pt!important;break-inside:avoid;max-width:none}
 .page-resume h2,.page-resume h3{break-after:avoid;page-break-after:avoid}
}