:root{color-scheme:dark;--bg:#0b0b0b;--fg:#f5f5f5;--muted:#858585}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}.top{height:102px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,4.5vw,88px);border-bottom:1px solid #191919}.brand{font-size:26px;letter-spacing:-1.7px;font-weight:900;line-height:.87}.brand span{display:block;font-size:9px;letter-spacing:3px;font-weight:600;margin-top:9px}.top nav{display:flex;gap:39px;font-size:11px;font-weight:700;letter-spacing:1.5px}.top nav a{transition:opacity .2s}.top nav a:hover,.back:hover{opacity:.55}.menu{display:none;background:none;border:0;color:white;font-size:22px}.hero{text-align:center;padding:91px 20px 85px}.hero .eyebrow{font-size:10px;letter-spacing:4px;color:#999;font-weight:700}.hero h1{font-size:clamp(54px,10.4vw,170px);letter-spacing:-.09em;line-height:.92;margin:20px 0 16px;font-weight:900}.hero p{font-size:12px;color:#999;letter-spacing:2.7px}.home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 14px 90px;max-width:1800px;margin:auto}.project{position:relative;aspect-ratio:1.72;overflow:hidden;background:#141414;display:block;isolation:isolate}.project img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease,opacity .4s;display:block}.project:hover img{transform:scale(1.035);opacity:.67}.project:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.72));pointer-events:none}.project .caption{position:absolute;z-index:2;left:32px;bottom:27px;display:flex;flex-direction:column;gap:9px}.project .caption b{font-size:clamp(17px,2.15vw,31px);letter-spacing:-.045em}.project .caption small{font-size:10px;letter-spacing:2px;color:#ddd}.project .arrow{position:absolute;z-index:2;right:30px;bottom:30px;font-size:22px}.project.placeholder img{filter:brightness(.65)}.project.placeholder:before{content:'TEMP COVER';position:absolute;top:22px;right:22px;z-index:2;font-size:9px;letter-spacing:1.5px;color:#ddd;background:#1119;padding:8px 11px}.detail{max-width:1600px;margin:auto;padding:44px 24px 100px}.back{font-size:11px;letter-spacing:2px;color:#aaa}.detail-head{text-align:center;padding:70px 0 75px}.detail-head h1{font-size:clamp(40px,6.7vw,100px);letter-spacing:-.075em;margin:0 0 12px;line-height:1}.detail-head p{font-size:11px;color:#999;letter-spacing:2px}.videos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.video-card{border:0;padding:0;background:#151515;color:#fff;text-align:left;position:relative;overflow:hidden;aspect-ratio:9/16}.video-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s,filter .4s}.video-card:hover img{transform:scale(1.04);filter:brightness(.65)}.playicon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#0008;border:1px solid #ffffff70;border-radius:50%;width:52px;height:52px;display:grid;place-items:center;font-size:16px;opacity:0;transition:opacity .2s}.video-card:hover .playicon{opacity:1}.video-card .number{position:absolute;bottom:15px;left:16px;font-size:11px;letter-spacing:1px;background:#0008;padding:6px}.about{text-align:center;min-height:65vh;padding:120px 20px}.about h1{font-size:clamp(50px,11vw,140px);letter-spacing:-.08em;margin:0}.about p{color:#aaa;letter-spacing:2px;font-size:12px}.about .cta{display:inline-block;border:1px solid #666;padding:18px 32px;margin-top:35px;font-size:12px;letter-spacing:2px}footer{border-top:1px solid #202020;min-height:115px;padding:40px clamp(22px,4.5vw,88px);display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:1.6px;color:#777}.player{position:fixed;inset:0;z-index:50;background:#000e;display:flex;justify-content:center;align-items:center;padding:45px 20px;backdrop-filter:blur(12px)}.player.hidden{display:none}#close{position:absolute;right:28px;top:22px;border:0;background:none;color:#fff;font-size:25px}.playerbox{text-align:center;max-height:100%;max-width:min(900px,100%)}#screen{max-width:100%;max-height:72vh;background:black}#playerlabel{font-weight:700;font-size:13px;margin-top:16px}.playerbox p{color:#aaa;font-size:11px;line-height:1.5}@media(max-width:900px){.videos{grid-template-columns:repeat(3,1fr)}.top{height:80px}.hero{padding:70px 20px}.project .caption{left:18px;bottom:18px}.project .arrow{right:17px;bottom:18px}}@media(max-width:650px){.top nav{display:none;position:absolute;z-index:9;right:0;left:0;top:79px;background:#111;padding:25px;flex-direction:column;gap:25px}.top nav.open{display:flex}.menu{display:block}.home-grid{grid-template-columns:1fr;padding:0 9px 55px;gap:9px}.hero{padding:64px 10px 65px}.hero h1{font-size:clamp(57px,14vw,95px)}.project{aspect-ratio:1.62}.videos{grid-template-columns:repeat(2,1fr);gap:9px}.detail{padding:26px 10px 60px}.detail-head{padding:62px 0}.video-card .playicon{opacity:.8;width:40px;height:40px}.project .caption b{font-size:23px}footer{flex-wrap:wrap;gap:20px;font-size:9px}}

/* ARSCOMA v2 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
.videos{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.project:after{background:rgba(0,0,0,.05);transition:background .45s ease}
.project:hover:after,.project:focus-visible:after{background:rgba(0,0,0,.58)}
.project img{transition:transform .65s ease,filter .5s ease}
.project:hover img,.project:focus-visible img{transform:scale(1.025);filter:brightness(.76)}
.project .caption{left:0;right:0;top:0;bottom:0;align-items:center;justify-content:center;text-align:center;gap:14px;opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .45s ease;pointer-events:none}
.project:hover .caption,.project:focus-visible .caption{opacity:1;transform:translateY(0)}
.project .caption b{font-family:Montserrat,Arial,sans-serif;font-weight:700;letter-spacing:.03em;font-size:clamp(18px,2.3vw,34px)}
.project .caption small{font-family:Montserrat,Arial,sans-serif;font-size:10px;letter-spacing:.25em}
.project .arrow{opacity:0;transition:opacity .4s ease}.project:hover .arrow,.project:focus-visible .arrow{opacity:1}
.about-page{font-family:Montserrat,Arial,sans-serif;display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr);gap:clamp(30px,6vw,110px);max-width:1450px;margin:0 auto;padding:clamp(45px,7vw,110px) clamp(22px,5vw,75px) 125px;align-items:start}
.about-image img{display:block;width:100%;height:auto;object-fit:cover}.about-image{position:sticky;top:35px}
.about-copy{font-size:clamp(13px,1.15vw,16px);line-height:1.9;font-weight:400;color:#ddd}
.about-kicker{color:#999;font-size:10px;font-weight:600;letter-spacing:.25em;margin-bottom:18px}
.about-copy h1{font-size:clamp(36px,5vw,76px);line-height:1.1;letter-spacing:-.055em;margin:0 0 34px;color:#fff;font-weight:700}
.about-copy p{margin:0 0 24px}.about-copy h2{font-size:19px;margin:32px 0 10px;color:#fff}
.about-copy ul{list-style:none;padding:0;margin:0 0 35px}.about-copy li{margin:6px 0}.about-copy li:before{content:'— ';color:#aaa}
.about-contact{display:inline-block;border:1px solid #777;padding:14px 22px;font-size:11px;letter-spacing:.13em;transition:background .2s,color .2s}.about-contact:hover{background:white;color:black}
@media(max-width:900px){.videos{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media(max-width:650px){.videos{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.video-card .number{font-size:9px;padding:3px;bottom:5px;left:5px}.video-card .playicon{width:30px;height:30px;font-size:12px}.about-page{grid-template-columns:1fr;padding:38px 20px 70px;gap:32px}.about-image{position:static;max-width:480px}.project .caption{opacity:1;transform:none;justify-content:end;padding:20px;background:linear-gradient(transparent 40%,rgba(0,0,0,.62))}.project .caption b{font-size:20px}.project .caption small{font-size:9px}.project .arrow{opacity:1}}
@media(prefers-reduced-motion:reduce){.project img,.project:after,.project .caption{transition:none}}

/* V3: reduce the gap between navigation and selected works heading */
.hero{padding-top:45px;padding-bottom:48px}
@media(max-width:900px){.hero{padding-top:40px;padding-bottom:44px}}
@media(max-width:650px){.hero{padding-top:36px;padding-bottom:40px}}

/* ARSCOMA interactive mascot — one dog element throughout the site */

/* V7: only transparent animated dachshund GIF; no legacy static dog assets. */
:root{--bg:#000} html,body{background:#000!important}
#dog-stage{position:fixed;inset:0;pointer-events:none;z-index:35;overflow:hidden;background:transparent}
#dog{position:absolute;display:block;width:94px;height:94px;border:0;padding:0;margin:0;background:transparent;opacity:0;pointer-events:auto;cursor:pointer;transition:opacity .25s ease;transform-origin:50% 80%}
#dog img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 2px #0009)}
#dog.peek{width:82px;height:82px}
#dog.peek img{clip-path:inset(0 0 23% 0);animation:peek-rise 1.7s ease-in-out infinite alternate}
#dog.scratching img{animation:dog-scratch .16s ease-in-out 8 alternate}
#dog.rolling img{animation:dog-roll 1.35s ease-in-out 1 both}
#dog.leaving{opacity:0;pointer-events:none}
@keyframes peek-rise{from{transform:translateY(25px)}to{transform:translateY(12px)}}
@keyframes dog-scratch{from{transform:rotate(-7deg)}to{transform:rotate(8deg) translateY(-3px)}}
@keyframes dog-roll{0%{transform:rotate(0)}50%{transform:rotate(-150deg)}100%{transform:rotate(-360deg)}}
@media(max-width:650px){#dog{width:69px;height:69px}#dog.peek{width:66px;height:66px}}
@media(prefers-reduced-motion:reduce){#dog img{animation:none!important}}

/* V8 mascot: the only dog, black site, no content overlap */
html,body{background:#000!important}
#dog-stage{z-index:35;overflow:hidden}
#dog{width:80px;height:80px;transition:opacity .22s ease;transform-origin:50% 50%}
#dog.peek{width:90px;height:72px}
#dog.peek img{clip-path:none;animation:none}
#dog.scratching img,#dog.rolling img{animation:none}
#dog img{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
@media(max-width:650px){#dog{width:64px;height:64px}#dog.peek{width:72px;height:58px}}

/* V11: mascot belongs to the page's top section, never the viewport. */
#dog-stage{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:auto!important;width:100%!important;height:600px;overflow:hidden;pointer-events:none;z-index:35}
#dog{pointer-events:auto}