@font-face{font-family:DM;src:url('assets/dm-mono.ttf');font-display:swap;font-weight:400}@font-face{font-family:DM;src:url('assets/dm-mono-medium.ttf');font-display:swap;font-weight:500}@font-face{font-family:Chivo;src:url('assets/chivo-mono.ttf');font-display:swap;font-weight:700;font-style:italic}
:root{color-scheme:dark;--orange:#f90;--paper:#eae9e3;--background:#0b0b09}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--background);color:var(--paper);font-family:DM,monospace;font-size:16px;line-height:1.5}body:before{content:"";position:fixed;inset:0;background:url('assets/texture.jpg') center/cover;mix-blend-mode:difference;opacity:.46;pointer-events:none;z-index:-1}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:7px}button{touch-action:manipulation}.page{max-width:1600px;margin:auto;padding:54px 5vw 0}.intro{display:grid;grid-template-columns:1.5fr 1fr auto;gap:40px;align-items:end;padding-bottom:58px;color:var(--orange)}.eyebrow{font-size:13px;letter-spacing:.14em;margin:0 0 13px}h1{font-size:clamp(46px,5.3vw,82px);font-weight:400;line-height:1.06;letter-spacing:-.055em;margin:0;position:relative;width:max-content}.asterisk{position:absolute;font-size:.85em;top:-.13em;right:-.65em}.roles{font-size:clamp(17px,1.5vw,23px);line-height:1.42;margin:0 0 20px}.bio{font-size:14px;line-height:1.6;margin:0;color:#ce8f34}.contact{display:flex;flex-direction:column;gap:12px;padding-bottom:4px}.pill{display:flex;gap:24px;justify-content:space-between;align-items:center;border:1px solid var(--orange);border-radius:30px;background:var(--orange);color:#111;padding:12px 20px;font-size:14px;white-space:nowrap;transition:background .2s,color .2s}.pill.outline{background:transparent;color:var(--orange)}.pill:hover{background:var(--paper);border-color:var(--paper);color:#111}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px;border-top:1px solid #85817666;padding-top:19px}h2{font-family:Chivo,monospace;font-style:italic;font-size:clamp(27px,2.7vw,40px);line-height:1.2;letter-spacing:-.045em;margin:0}.text-button{border:0;background:none;font-size:12px;letter-spacing:.05em;color:#b9b6ad;padding:10px 0}.text-button span{padding-left:9px}.gallery{display:grid;gap:22px;align-items:start}.card{position:relative;display:block;border:2px solid var(--outline,#d8ce34);padding:0;background:#080808;border-radius:13px;overflow:hidden;isolation:isolate;transition:transform .3s,border-color .3s;min-width:0;width:100%;text-align:left;align-self:start}.card:hover{transform:scale(1.012);z-index:2}.card img,.card video{display:block;width:100%;height:100%;object-fit:cover}.card video{position:absolute;inset:0}.card img{transition:opacity .2s}.card .badge{position:absolute;right:12px;bottom:12px;width:32px;height:32px;background:#111b;border:1px solid #ffffff44;border-radius:50%;display:grid;place-items:center;font:12px DM;color:white;opacity:0;transition:opacity .2s}.card:hover .badge,.card:focus-visible .badge{opacity:1}.more{margin-top:76px}.plus{color:var(--orange);letter-spacing:-.09em}footer{margin-top:80px;padding:25px 0 35px;border-top:1px solid #85817666;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#b7b4aa}footer a:hover{color:var(--orange)}.skip{position:fixed;top:-100px;left:15px;z-index:50;background:var(--orange);color:#111;padding:12px}.skip:focus{top:15px}dialog{width:min(1200px,96vw);max-width:none;max-height:96dvh;padding:20px;background:#0b0b09;border:1px solid #777;border-radius:12px;color:var(--paper);overflow:auto}dialog::backdrop{background:#000e;backdrop-filter:blur(12px)}.viewer-bar,.viewer-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:14px}.viewer-bar{padding-bottom:16px}.viewer-bar button,.viewer-nav button{background:transparent;border:1px solid #666;border-radius:24px;padding:10px 16px;font-size:13px}.viewer-bar button:hover,.viewer-nav button:hover{border-color:var(--orange);color:var(--orange)}#viewer-media{display:flex;justify-content:center;align-items:center;min-height:150px}#viewer-media img,#viewer-media video{display:block;max-width:100%;max-height:73dvh;width:auto;height:auto;object-fit:contain}.viewer-nav{padding-top:16px;color:#c4c0b6}body.modal-open{overflow:hidden}
@media(min-width:1600px){.page{padding-left:70px;padding-right:70px}}
@media(max-width:1050px){.intro{grid-template-columns:1.25fr 1fr;gap:25px}.contact{grid-column:2;flex-direction:row}.identity{grid-row:span 2;align-self:center}.intro-copy{padding-left:0}.pill{gap:10px;padding:10px 14px;font-size:12px}.intro{padding-bottom:40px}.gallery{gap:16px}}
@media(max-width:650px){.page{padding:30px 20px 0}.intro{display:block;padding-bottom:32px}.eyebrow{font-size:12px}h1{font-size:clamp(42px,11.8vw,70px)}.roles{font-size:17px;margin:22px 0 12px}.roles br{display:none}.roles{max-width:330px}.bio{font-size:14px}.desktop-break{display:none}.contact{margin-top:23px;gap:12px;flex-direction:row}.pill{font-size:13px;padding:10px 17px}.section-heading{gap:12px;margin-bottom:18px}h2{font-size:26px}.text-button{font-size:10px}.gallery{gap:16px}.more{margin-top:45px}.card{border-radius:9px}.card .badge{opacity:1;width:27px;height:27px;right:8px;bottom:8px}footer{margin-top:48px;flex-wrap:wrap;font-size:11px}footer span{width:100%}dialog{padding:14px}.viewer-bar{font-size:12px}.viewer-nav{gap:8px;font-size:12px}.viewer-nav button{font-size:11px;padding:9px 12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

.project-label{position:absolute;left:12px;bottom:12px;padding:5px 9px;border-radius:4px;background:#080808bf;font-size:13px;color:#fff;letter-spacing:.08em}
.card:has(.project-label) .badge{opacity:1}
#project-thumbs{display:flex;gap:10px;padding-top:18px;overflow-x:auto;justify-content:center}
#project-thumbs[hidden]{display:none}
#project-thumbs button{flex:0 0 76px;height:62px;border:2px solid transparent;border-radius:5px;padding:0;position:relative;overflow:hidden;background:#111}
#project-thumbs button[aria-current=true]{border-color:var(--orange)}
#project-thumbs img{width:100%;height:100%;object-fit:cover}
#project-thumbs span{position:absolute;right:4px;bottom:2px;color:#fff;font-size:11px;text-shadow:0 0 3px #000}
dialog.project-view{width:100vw;height:100dvh;max-height:100dvh;max-width:100vw;margin:0;border:0;border-radius:0;padding:22px 4vw}
.project-view #viewer-media img,.project-view #viewer-media video{max-height:calc(100dvh - 230px)}
.project-view #viewer-media{height:calc(100dvh - 230px)}
.star-cursor{display:none;position:fixed;width:32px;height:32px;transform:translate(-50%,-50%);background:white;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%);pointer-events:none;mix-blend-mode:difference;z-index:2147483647}
.star-cursor.over-link{width:43px;height:43px}
@media(hover:hover) and (pointer:fine){.custom-cursor,.custom-cursor a,.custom-cursor button,.custom-cursor dialog{cursor:none}.custom-cursor .star-cursor:not([hidden]){display:block}.custom-cursor video[controls]{cursor:auto}}
@media(max-width:650px){#project-thumbs{justify-content:flex-start;gap:8px}#project-thumbs button{flex-basis:58px;height:52px}dialog.project-view{padding:16px}.project-view #viewer-media,.project-view #viewer-media img,.project-view #viewer-media video{height:auto;max-height:calc(100dvh - 210px)}.project-view #viewer-media{height:calc(100dvh - 210px)}.project-label{font-size:12px}}


/* Compact gallery: four columns on desktop, two on phones. */
.gallery{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:8px;gap:16px;align-items:stretch}
.gallery .card{height:100%;min-height:0;aspect-ratio:auto;border-radius:10px;grid-column:auto}
.gallery .card img,.gallery .card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.more{margin-top:48px}
@media(min-width:1600px){.gallery{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:950px) and (min-width:651px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.project-label{font-size:11px;letter-spacing:0;left:7px;bottom:8px;max-width:calc(100% - 42px)}.card .badge{right:6px;bottom:8px;width:25px;height:25px}.more{margin-top:34px}}
/* Artwork rises above the softened, textured page. */
dialog::backdrop{background:rgb(6 6 5 / 52%);backdrop-filter:blur(18px) saturate(.65);-webkit-backdrop-filter:blur(18px) saturate(.65)}
dialog::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url('assets/texture.jpg') center/460px;opacity:.22;mix-blend-mode:screen}
dialog[open]{animation:viewer-pop .22s cubic-bezier(.2,.8,.2,1)}
@keyframes viewer-pop{from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
dialog.graphic-view{width:min(900px,92vw);height:auto;max-height:94dvh;margin:auto;padding:12px 20px;background:transparent;border:0;border-radius:0;overflow:auto}
.graphic-view #viewer-media{height:auto;min-height:0}
.graphic-view #viewer-media img{width:auto;max-width:100%;height:auto;max-height:calc(88dvh - 125px);box-shadow:0 18px 70px #0009;border-radius:3px;animation:art-pop .2s ease-out}
.graphic-view.project-view #viewer-media img{max-height:calc(88dvh - 210px)}
.graphic-view .viewer-bar,.graphic-view .viewer-nav{color:#fff;text-shadow:0 1px 8px #000}
.graphic-view .viewer-bar button,.graphic-view .viewer-nav button{background:#111b;border-color:#aaa7}
.graphic-view #viewer-title{background:#111b;padding:6px 12px;border-radius:20px}
@keyframes art-pop{from{opacity:.4;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@media(max-width:650px){dialog.graphic-view{width:96vw;padding:10px;max-height:96dvh}.graphic-view #viewer-media img{max-height:calc(90dvh - 140px)}.graphic-view.project-view #viewer-media img{max-height:calc(90dvh - 220px)}.graphic-view #viewer-title{font-size:12px;padding:4px 8px}}
dialog.graphic-view{height:fit-content;min-height:0}

.project-label{background:var(--orange);color:#fff;font-weight:500;text-shadow:0 1px 2px #713f0080}
.card:has(.project-label) .badge{background:var(--orange);color:#fff;border-color:var(--orange);font-weight:500}
.project-view #viewer-title{font-family:Chivo,monospace;font-size:30px;font-weight:700;font-style:italic;line-height:1.2;color:var(--orange);text-transform:uppercase;letter-spacing:-.035em;background:none;padding:0;border-radius:0;text-shadow:none}
.project-view .viewer-bar{align-items:center;min-height:52px}
.viewer-bar .close{flex-shrink:0}
.partnership{display:inline-block;color:var(--orange);margin-top:8px}
@media(max-width:650px){.project-view #viewer-title{font-size:24px;max-width:calc(100% - 96px);overflow-wrap:break-word}.project-view .viewer-bar{gap:12px}}

.about-marc{display:grid;grid-template-columns:200px minmax(0,520px);justify-content:center;gap:58px;align-items:center;margin:90px 0 30px;padding:48px 0 16px;border-top:1px solid #85817666}
.about-portrait{margin:0;transform:rotate(-3deg);padding:7px 7px 12px;background:#e9e7de;box-shadow:0 10px 28px #0007;color:#161611}
.about-portrait img{width:100%;height:230px;display:block;object-fit:cover;object-position:50% 70%}
.about-portrait figcaption{font-size:12px;letter-spacing:.08em;margin:8px 4px 0}
.about-copy h2{color:var(--orange);font-size:29px;margin-bottom:20px}
.about-copy p{font-size:16px;line-height:1.7;margin:0 0 14px;max-width:46ch}
.about-copy .personal-note{color:#b9b6ad}.personal-note em{color:var(--paper);font-style:normal}
@media(max-width:650px){.about-marc{grid-template-columns:1fr;gap:28px;padding-top:34px;margin-top:46px}.about-portrait{width:160px;margin-left:7px}.about-portrait img{height:185px}.about-copy h2{font-size:26px}.about-copy p{font-size:15px}}
